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.技术一:坐标转换 ...
随机推荐
- 5.2 Windows驱动开发：内核取KERNEL模块基址
模块是程序加载时被动态装载的,模块在装载后其存在于内存中同样存在一个内存基址,当我们需要操作这个模块时,通常第一步就是要得到该模块的内存基址,模块分为用户模块和内核模块,这里的用户模块指的是应用层进程 ...
- 面试谈薪4点博弈策略，将20k谈到28k
薪资谈判本质上是一种博弈,无论是表面谈得好还是实质上谈得好,都需要掌握一些策略 面试薪资怎么谈,您目前的薪资是20k,如果您想要提高到28k,那么请花两分钟看完以下内容.薪资谈判本质上是一种博弈,无论 ...
- MySQL主主+Keepalived架构安装部署
需求:根据当前客户的生产环境,模拟安装部署一套MySQL主主+Keepalived架构的测试环境,方便后续自己做一些功能性的测试. 1.准备工作 2.MySQL安装部署 3.MySQL主主配置 4.K ...
- Linux用户被锁定后如何解锁
客户的一台机器,按照提供的常用密码尝试使用oracle用户登陆,超过指定次数账号被锁定,提示如下: Account locked due to 6 failed logins 这需要使用root用户解 ...
- .NET Core开发实战（第35课：MediatR：让领域事件处理更加优雅）--学习笔记
35 | MediatR:让领域事件处理更加优雅 核心对象 IMediator INotification INotificationHandler 这两个与之前的 Request 的行为是不一样的, ...
- Hadoop集群常用组件的命令
1. Hadoop (1).HDFS:启动HDFS:start-dfs.sh关闭HDFS:stop-dfs.sh格式化NameNode:hdfs namenode -format查看文件系统状态:hd ...
- C# 二十年语法变迁之 C# 2,C# 3 ,C# 4参考
C# 二十年语法变迁之 C# 2,C# 3 ,C# 4参考 https://benbowen.blog/post/two_decades_of_csharp_i/ 自从 C# 于 2000 年推出以来 ...
- 【Unity3D】UGUI之InputField
1 InputField 属性面板 在 Hierarchy 窗口右键,选择 UI 列表里的 InputField(输入框)控件,即可创建 InputField 控件,选中创建的 InputFiel ...
- Java并发编程实例--1.创建和运行一个线程
从这一篇开始写Java并发编程实例,内容都翻译整理自书籍:<Java 7 Concurrency Cookbook> 谈到线程,无法逃避的一个问题就是: 并发(concurrency)和并 ...
- Django关于StreamingHttpResponse与FileResponse响应文件或视频的下载请求
StreamingHttpResponse from django.http import StreamingHttpResponse StreamingHttpResponse(streaming_ ...