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.技术一:坐标转换 ...
随机推荐
- ElasticSearch7.3学习(七)----Mapping映射入门
1．mapping映射 概念:自动或手动为index中的_doc建立的一种数据结构和相关配置,简称为mapping映射.插入几条数据,让es自动为我们建立一个索引 PUT /website/_doc/ ...
- Hbase简单介绍
一.背景介绍 我们生活在一个互联网的时代,这个时代的特点是,无论任何事情,只要我们想知道,都可以通过互联网迅速的检索到问题的答案,并且答案是有用的,并非常切合我们的需要. 因此,很多公司都开始致力于提 ...
- .NET 云原生架构师训练营（模块二 基础巩固 Scrum 简介）--学习笔记
2.7.2 Scrum 简介 SCRUM 是什么 SCRUM 精髓 SCRUM 框架 角色 SCRUM 是什么 SCRUM 是迄今为止最著名的敏捷方法,主要用于开发.交付和持续支持复杂产品的一个框架, ...
- 2024年，提升Windows开发和使用体验的实践经验 - RIME输入法
前言 上一篇文章介绍了 Windows 下的包管理器,本文继续介绍输入法. 事实上 Windows 的输入法生态比 Linux/Mac 丰富很多,不过很多国产输入法存在窃取隐私.植入广告.乱安装流氓软 ...
- 【CVE-2024-21626】容器逃逸漏洞修复
哈喽大家好,我是咸鱼. 好久不见,最近有一个很火的 CVE--runc 容器逃逸漏洞.年前的时候我们已经在测试环境进行了相关操作打算年后线上进行修复. 因为今天咸鱼才开工,所以文章也就拖到了现在 漏洞 ...
- 2021-07-30 JavaScript中常用数据的判断
为什么要判断一个变量的常用数据? 实际业务场景里,一个变量的数据是否合法或符合预期,会影响到项目中用到的UI组件库特定组件的运行.比如element-ui中的el-select组件,单选时绑定的数据不 ...
- pgrep查询当前运行程序的pid
pgrep 运行的程序 [root@c1 ~]# pgrep matmul 2634730
- centos7.x及centos8.x安装新版docker
前置步骤 # 如之前安装过docker,请先删除 yum remove docker docker-common docker-selinux docker-engine centos7 # cent ...
- 吐血分享一套iOS底层面试题，真心想帮你！！！
一 选择题(单选/多选) 1. 在LP64下,一个指针的有多少个字节 A: 4 B: 8 C: 16 D: 64 答案B解析: 1个指针8字节 2. 一个实例对象的内存结构存在哪些元素 A:成员变量 ...
- 【Azure Logic App】消费型逻辑应用在消费Service Bus时遇见消息并发速度慢，消息积压
问题描述 消费型逻辑应用(Consumption Logic App)使用触发器模式消费 Azure Service Bus的消息,当Service Bus中存在大量消息等待消费时,Logic App ...