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# 实现对网站Get与Post请求
C# 是一种面向对象的编程语言,提供了强大的Web请求库和API来执行 HTTP GET 和 POST 请求.在C#中,我们可以使用 System.Net 命名空间下的 WebRequest 和 We ...
- 面试谈薪4点博弈策略，将20k谈到28k
薪资谈判本质上是一种博弈,无论是表面谈得好还是实质上谈得好,都需要掌握一些策略 面试薪资怎么谈,您目前的薪资是20k,如果您想要提高到28k,那么请花两分钟看完以下内容.薪资谈判本质上是一种博弈,无论 ...
- [vue] 脚手架笔记
笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── a ...
- UIWindow的概念与使用
UIWindow的作用 UIWindow是UIView的子类用于显示程序内容.每一个UIView想要将内容显示到屏幕上都需要依赖于一个UIWindow. iOS应用程序要想正常运行至少要有一个UIWi ...
- iOS使用Run Script提升开发效率
通过在Xcode Run Script添加shell脚本,然后通过脚本来帮助我们在编译阶段完成一下资源的copy,文件替换,修改等繁琐的事件.使Xcode在编译过程中自动完成耗时繁琐的操作提升开发效率 ...
- C语言输出百分号%
遭遇的问题 在学习时有一个课后题要求计算两个变量的加减乘除以及取余,其中去余需要输出如下的效果: 10 % 5 = 0; 我就写了这样的代码: printf("a % b = %d" ...
- Java 重复注解 @Repeatable
1. 设计一个重复使用的注解: @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Repeatable(AppSpecs.c ...
- Oracle-ORA-12505, TNS:listener does not currently know of SID given in connect descriptor
问题描述 ORA-12505, TNS:listener does not currently know of SID given in connect descriptorORA-12505: TN ...
- Python-pymysql操作MySQL数据库
一.安装pymysql py -m pip install pymysql; 二.pymysql数据库操作 1．简单示例 #coding=utf-8 import pymysql ## 打开数据库连接 ...
- ASCII编码的诞生：解决字符标准化与跨平台通信的需求
在计算机的发展过程中,字符的表示和传输一直是一个重要的问题.为了实现字符的标准化和跨平台通信,ASCII(American Standard Code for Information Intercha ...