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.技术一:坐标转换 ...
随机推荐
- 从嘉手札<2023-11-13>
1. 很多时候 成功并不等同于成长 成功是很多因素复合形成的一种结果 而并不等同于一个人阅历的丰富.认知的提高 2. 我一直认为 世界不属于投机者 也不属于堕落者 信念感在这个大数据泛滥.碎片化汹涌的 ...
- MySQL中 int(11)和int(10)有没有区别！！
结论:int(11) int(3) int(20) 若不勾选填充0,那么效果统统一样,若勾选了填充0:查询出来的效果 会是这样: int(11) 00000000123 int(3) 123 ...
- 《ASP.NET Core 与 RESTful API 开发实战》-- （第8章）-- 读书笔记（下）
第 8 章 认证和安全 8.3 HTTPS HTTP 协议能够在客户端和服务器之间传递信息,特点是以明文的方式发送内容,并不提供任何方式的数据加密 为了解决 HTTP 协议这一缺陷,需要使用另一种协议 ...
- Nodepad++格式化XML和JSON字符串
(一)格式化XML 1.安装XML Tools 在notepad++中点击菜单栏[插件]-[插件管理]. 在插件管理界面选择[XML Tools],点击[安装]. 2.打开XML文件 在notepad ...
- Linux 在线安装MySQL8.0
1.更新Linux yum yum update 2.安装wget工具(如果已经安装wget,可以跳过该步骤) yum install wget 3.使用wget下载MySQL Yum Reposit ...
- typescript 实现enum枚举值定义为对象
壹 ❀ 引 最近因为有一些闲散时间,所以一直在做将Class组件重构为typescript + hooks组件的工作,结果今天就遇到一个有趣的问题.我们知道react Class组件一般都会定义Com ...
- NC16645 [NOIP2007]矩阵取数游戏
题目链接 题目 题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规则如下: 1.每次取数时须从每行各取走一个元素,共n个.m次后取完矩阵 ...
- Swoole从入门到入土(12)——HTTP服务器[Response]
继上一节了解完请求对象之后,这一节我们着重了解响应对象(Response).响应对象主要用于将数据发现到客户端.当 Response 对象销毁时,如果未调用 end 发送 HTTP 响应,底层会自动执 ...
- Spring boot项目实战之记录应用访问日志
1.说明 系统上线后往往我们需要知道都有哪些用户访问了应用的那些功能,以便更好的了解用户需求.防止恶意访问等.为此我们需要给应用添加记录访问日志的功能.下面就开始吧: 2.建表 CREATE TABL ...
- Linux上安装和部署git
本机环境: [git@rhel-server .ssh]$ cat /proc/version Linux version 2.6.32-358.el6.x86_64 1.安装 yum install ...