leaflet 领图 一个本地的类似百度地图工具-不连外网
官网：https://leafletjs.com/
二次开发手册-中文：http://112.91.146.167:9090/api/
领图（一款给力的开源离线地图解决方案）
https://blog.csdn.net/weixin_43464964/article/details/106104180
Leaflet 官方教程 Zoom levels 缩放级别
https://blog.csdn.net/pyluyuan/article/details/81613130
二次开发 别人写的一个包demo
https://github.com/Vhhhhh/leadermap-leaflet
https://gitee.com/xiaoZ1712/leadermap-leaflet
如何将图片切割成瓦片图？
https://blog.csdn.net/STRIVEYe/article/details/88388072
node实现图片分割
https://www.cnblogs.com/gating/p/12488443.html
地图选择器 （这个很重要！！）
http://datav.aliyun.com/tools/atlas/index.html
这个帮主文档 也很重要
https://leafletjs.com/reference-1.7.1.html#path-option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Leaflet Map</title>
<link rel="stylesheet" type="text/css" href="leafletJs/leaflet.css" />
<script type="text/javascript" src="leafletJs/leaflet-src.js"></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#mapId {
/* height: 100%; */
height: 600px;
width: 800px;
}
</style>
</head>
<body>
<div id="mapId"></div>
</body>
<script type="text/javascript">
(function (L, undefined) {
var map;
var markerId;
var iconPrefix = "./leafletJs/assets/imageIcons/";
var polygonToolId;
var polygonToolArr = [];
function main() {
createMap(); // 创建地图
createTileLayer(); // 创建瓦片
createClickHandle(); // 绑定点击事件
// polygonPosition1Init();
}
main();
function createMap() {
map = L.map("mapId", {
maxBounds: [
// 限制显示区域
[39.3242059256878, 116.77505493164064],
[38.949263400347746, 117.64984130859376],
],
}).setView([39.136950954477115, 117.17706441879274], 8); // 初始化中心点，初始化level
}
function createTileLayer() {
var url = "http://192.168.76.66:9099/img/{z}/{x}/{y}.png";
L.tileLayer(url, {
maxZoom: 15,
minZoom: 3,
attribution: "天房科技",
}).addTo(map);
}
function createClickHandle() {
map.on("click", function (e) {
var latlng = e.latlng;
console.info(`[${latlng.lat},${latlng.lng}]`);
// eachLayerConsole();
// imageMarkerHandle(e);
// polygonTool(e); // 画多边形工具
// markerHandle(e);
// showTip(e, "kkk");
});
}
function imageMarkerHandle(e) {
var imageIcon = L.icon({
iconUrl: iconPrefix + "leaf-green.png",
shadowUrl: iconPrefix + "leaf-shadow.png",
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76], // point from which the popup should open relative to the iconAnchor
});
markerBaseHandle(function () {
markerId = L.marker(e.latlng, { icon: imageIcon }).bindPopup(
"This is Littleton, CO."
);
});
}
function markerHandle(e) {
markerBaseHandle(function () {
markerId = L.marker(e.latlng).bindPopup("This is Littleton, CO.");
markerId.on("click", function (e) {
// alert("I am marker!");
console.info("I am marker!");
});
});
}
function markerBaseHandle(callback) {
map.hasLayer(markerId) && map.removeLayer(markerId);
callback();
map.addLayer(markerId);
}
function showTip(e, txt) {
L.popup().setLatLng(e.latlng).setContent(txt).openOn(map);
}
function eachLayerConsole() {
map.eachLayer(function (layer) {
console.info("eachLayer =>", layer);
});
}
function polygonTool(e) {
map.hasLayer(polygonToolId) && map.removeLayer(polygonToolId);
polygonToolArr[polygonToolArr.length] = [e.latlng.lat, e.latlng.lng];
polygonToolId = L.polygon(polygonToolArr);
map.addLayer(polygonToolId);
console.info(
`var polygon = L.polygon(
${JSON.stringify(polygonToolArr)}
).bindPopup("提示信息").addTo(map);`
);
}
// 开启 polygonTool 函数后 获得此坐标点
function polygonPosition1Init() {
var polygon = L.polygon([
// 坐标点已删除
])
.bindPopup(
"<div style='width:250px;'><img src='https://www.baidu.com/img/flexible/logo/pc/result.png' />111</div>"
) // 弹框可加图片文字
.addTo(map);
}
})(L);
</script>
</html>
下面自定义的地图 比较难
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Leaflet Map</title>
<link rel="stylesheet" type="text/css" href="leafletJs/leaflet.css" />
<script type="text/javascript" src="leafletJs/leaflet-src.js"></script>
<script
type="text/javascript"
src="leafletJs/assets/geoJson/jquery-1.12.4.js"
></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#mapId {
height: 100%;
background-color: #f2f7f7;
/* height: 600px;
width: 800px; */
}
</style>
</head>
<body>
<div id="mapId"></div>
</body>
<script type="text/javascript">
(function (L, undefined) {
var map;
var markerId;
var iconPrefix = "./leafletJs/assets/imageIcons/";
var polygonToolId;
var polygonToolArr = [];
function main() {
createMap(); // 创建地图
// createTileLayer(); // 创建瓦片
createClickHandle(); // 绑定点击事件
// polygonPosition1Init();
getWaikuang();
getJson(createGeoJson);
}
main();
function getWaikuang() {
$.getJSON(
"leafletJs/assets/geoJson/100000.json",
function (data, status) {
var myStyle = {
color: "#666",
fillColor: "#fff",
weight: 1.5,
};
L.geoJSON(data, {
style: myStyle,
}).addTo(map);
}
);
}
function getJson(callback) {
var addr1 =
"https://geo.datav.aliyun.com/areas_v3/bound/100000_boundary.json";
var addr2 = "leafletJs/assets/geoJson/100000_full.json";
$.getJSON(addr2, function (data, status) {
console.info("data", data);
console.info("数据: " + data + "\n状态: " + status);
callback(data);
});
}
function createGeoJson(geoJson1) {
var myStyle = {
// className: "dashLines",
dashArray: "1,6",
fillColor: "#fff",
color: "#333",
weight: 0.5,
fillOpacity: 0.2,
};
var geo1 = L.geoJSON(geoJson1, {
style: myStyle,
})
// .bindPopup(function (layer) {
// // console.info("layer", layer);
// return layer.feature.properties.name;
// })
.addTo(map);
geo1.on("mouseover", function (e) {
console.info("mouseover e", e);
var currAdCode = e.layer.feature.properties.adcode;
map.eachLayer(function (layer) {
// console.info("eachLayer =>", layer.feature);
if (
layer &&
layer.feature &&
layer.feature.properties &&
layer.feature.properties.adcode === currAdCode
) {
console.info("layer111", layer);
layer.setStyle({ fillColor: "blue" });
// L.popup()
// .setLatLng(e.latlng)
// .setContent(layer.feature.properties.name)
// .openOn(map);
}
});
});
geo1.on("mouseout", function (e) {
console.info("mouseout e", e);
var currAdCode = e.layer.feature.properties.adcode;
map.eachLayer(function (layer) {
if (
layer &&
layer.feature &&
layer.feature.properties &&
layer.feature.properties.adcode === currAdCode
) {
console.info("222");
layer.setStyle({ fillColor: "white" });
}
});
});
geo1.on("click", function (e) {
// console.info("click e", e);
});
}
function createMap() {
map = L.map("mapId", {
maxBounds: [
// 限制显示区域
// [39.3242059256878, 116.77505493164064],
// [38.949263400347746, 117.64984130859376],
],
}).setView([39.136950954477115, 117.17706441879274], 8); // 初始化中心点，初始化level
}
function createTileLayer() {
var url = "http://192.168.76.66:9099/img/{z}/{x}/{y}.png";
L.tileLayer(url, {
maxZoom: 15,
minZoom: 3,
attribution: "天房科技",
}).addTo(map);
}
function createClickHandle() {
map.on("click", function (e) {
var latlng = e.latlng;
console.info(`[${latlng.lat},${latlng.lng}]`);
eachLayerConsole();
// imageMarkerHandle(e);
// polygonTool(e); // 画多边形工具
markerHandle(e);
// showTip(e, "kkk");
});
}
function imageMarkerHandle(e) {
var imageIcon = L.icon({
iconUrl: iconPrefix + "leaf-green.png",
shadowUrl: iconPrefix + "leaf-shadow.png",
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76], // point from which the popup should open relative to the iconAnchor
});
markerBaseHandle(function () {
markerId = L.marker(e.latlng, { icon: imageIcon }).bindPopup(
"This is Littleton, CO."
);
});
}
function markerHandle(e) {
markerBaseHandle(function () {
markerId = L.marker(e.latlng).bindPopup("This is Littleton, CO.");
markerId.on("click", function (e) {
// alert("I am marker!");
console.info("I am marker!");
});
});
}
function markerBaseHandle(callback) {
map.hasLayer(markerId) && map.removeLayer(markerId);
callback();
map.addLayer(markerId);
}
function showTip(e, txt) {
L.popup().setLatLng(e.latlng).setContent(txt).openOn(map);
}
function eachLayerConsole() {
map.eachLayer(function (layer) {
console.info("eachLayer =>", layer);
});
}
function polygonTool(e) {
map.hasLayer(polygonToolId) && map.removeLayer(polygonToolId);
polygonToolArr[polygonToolArr.length] = [e.latlng.lat, e.latlng.lng];
polygonToolId = L.polygon(polygonToolArr);
map.addLayer(polygonToolId);
console.info(
`var polygon = L.polygon(
${JSON.stringify(polygonToolArr)}
).bindPopup("提示信息").addTo(map);`
);
}
// 开启 polygonTool 函数后 获得此坐标点
function polygonPosition1Init() {
var polygon = L.polygon([
// 坐标点已删除
])
.bindPopup(
"<div style='width:250px;'><img src='https://www.baidu.com/img/flexible/logo/pc/result.png' />111</div>"
) // 弹框可加图片文字
.addTo(map);
}
})(L);
</script>
</html>
leaflet 领图 一个本地的类似百度地图工具-不连外网的更多相关文章
- (转载) 百度地图工具类封装(包括定位,附近、城市、范围poi检索,反地理编码)
目录视图 摘要视图 订阅 赠书 | 异步2周年,技术图书免费选 程序员8月书讯 项目管理+代码托管+文档协作,开发更流畅 百度地图工具类封装(包括定位,附近.城市.范围poi检索, ...
- geoserver控制服务访问权限-类似百度地图的key
目录 缘起 可行性分析 如何实现key验证访问 如何控制key能访问哪些地图服务? 如何实现服务器ip白名单 流程梳理 申请key 访问地图 实施步骤 拦截器设置 配置key验证规则 配置服务拦截规则 ...
- 如何结合自己本地数据库，使用【百度地图】API
如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...
- 百度地图API开发指南
简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...
- 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...
- Echarts3.0 引入百度地图(转载)
转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...
- [转]百度地图API详解之地图坐标系统
博客原文地址:http://www.jiazhengblog.com/blog/2011/07/02/289/ 我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需 ...
- ionic 项目使用百度地图插件（cordova-qdc-baidu-location）
现在我们使用'Weizhe He'提供的cordova-qdc-baidu-location来尝试创建简单的定位app. Stpe1:创建一个项目 Stpe2:申请百度地图API秘钥 应用类型 ...
- 【重点突破】—— 百度地图在React单页面应用中的使用
前言:百度地图是网页中使用地图的常用第三方工具,这里结合React项目中学到的应用场景总结一些使用要点. 一.在网页中嵌入百度地图 搜百度地图开放平台,注册百度开发者账号 控制台:查看应用.创建应用( ...
- 调用百度地图API的总结
因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...
随机推荐
- C++ Qt开发：数据库与TableView多组件联动
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍TableVi ...
- Shopee x JuiceFS：ClickHouse 冷热数据分离存储架构与实践
本文来自 shopee 技术团队 摘要 Shopee ClickHouse 是一款基于开源数据库 ClickHouse 做二次开发.架构演进的高可用分布式分析型数据库.本文将主要介绍 Shopee C ...
- ssh原理及使用场景
用过linux系统的朋友,基本肯定会用过ssh.因为大部分的linux登录都是通过ssh将进行登录,除非你用的是类似windows的桌面版. 一.什么是SSH SSH 为 Secure Shell 的 ...
- 洛谷P1045 麦森数。 快速幂算法以及固定位数的高精度乘法的优化
P1045 [NOIP2003 普及组] 麦森数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 想法很简单,我们要做的就是两件事,求2^P-1的位数,求出2^P-1的最后500位数 ...
- .NET 云原生架构师训练营（模块二 基础巩固 路由与终结点）--学习笔记
2.3.3 Web API -- 路由与终结点 路由模板 约定路由 特性路由 路由冲突 终结点 ASP.NET Core 中的路由:https://docs.microsoft.com/zh-cn/a ...
- Resharper 和 Rider 的奇淫技巧，你知道多少？
Resharper 和 Rider 的奇淫技巧,你知道多少? .NET 开发中最令人印象深刻的生产力工具之一是ReSharper.每次发布时,我都对它的功能感到震惊.不要误会我的意思,我喜欢 Visu ...
- python常用的搜索字符内容函数详解：re.findall/findfiter
区别findall返回listfinditer返回一个MatchObject类型的iterator详细举例介绍1.findall在字符串中找到正则表达式所匹配的所有子串,并返回一个列表,如果没有找到匹 ...
- JLink OB相关的一些记录
使用 STM32F103 Bluepill 制作 JLink OB https://github.com/GCY/JLINK-ARM-OB https://stm32duinoforum.com/fo ...
- 【Unity3D】相机跟随
1 前言 相机跟随是相机指始终跟随特定游戏对象,有以下 2 种跟随效果: 位置跟随:相机指向目标游戏对象的向量始终不变 位置和姿态跟随:相机在目标游戏对象的坐标系下的坐标和朝向始终不变 实现相 ...
- 之前练手使用基于gin的go web项目
目录结构: `-- demo |-- cmd | |-- api.go | `-- root.go |-- common | `-- consts | `-- consts.go |-- config ...