<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Historic Topographic Maps</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="lib/leaflet/leaflet.css" />
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
</style>
<script src="lib/leaflet/leaflet-src.js"></script>
<script src="lib/proj4/proj4.js"></script>
<script src="lib/proj4/proj4leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<input type="button" value="leaflet飞地" onclick="addTest()"
style="cursor:pointer;position:absolute;left:100px;top:50px;z-index:9999;background:blue;color:white;border:none;font-size:24px">
<script>
//L.CRS.EPSG4326
var map = L.map('map');
//高德、google图层,地图服务地址可替换成爬取离线部署的地图服务,如:http://106.53.28.207/baidu_sl/{z}/{x}/{y}.png
//高德URL:http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
//openstreetmap:https://tile.openstreetmap.org/{z}/{x}/{y}.png
//googleURL:xxxxxx
//以上地址如果不能访问到新版地图URL,可通过访问新版地图,通过F12-->network获取
//openstreetmap:https://tile.openstreetmap.org/{z}/{x}/{y}.png
//openstreetmap二版:https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png
new L.TileLayer('https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 20,
minZoom: 1,
attribution: 'ⓒ 2012 Daum'
}).addTo(map);
var center_point=[24.522422570142833,118.11471659369913];
map.setView(center_point, 10);
function addTest() {
console.log("leaflet飞地");
var latlngs = [
[ // first polygon
[24.577789306640625,118.09959411621094],[24.526634216308594,118.03539276123048],[24.41986083984375,118.06423187255858],[ 24.421234130859375,118.19572448730467],
[24.53075408935547,118.23177337646484]
],
//second
[
[24.513931274414062,118.30215454101562],[24.39788818359375,118.28498840332031],[24.38346862792969,118.44772338867189],[24.537277221679688,118.46626281738283]
]
];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
}
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
66.(leaflet篇)leaflet绘制飞地.zip
共15个文件
png:8个
js:5个
css:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 1 下载量 172 浏览量
2022-02-07
14:43:22
上传
评论
收藏 382KB ZIP 举报
温馨提示
下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/122808605
资源推荐
资源详情
资源评论
收起资源包目录
66.(leaflet篇)leaflet绘制飞地.zip (15个子文件)
map
66.(leaflet篇)leaflet绘制飞地.html 2KB
images
marker-icon.png 4KB
poi.png 3KB
people.png 175KB
lib
proj4
proj4.js 72KB
proj4leaflet.js 7KB
proj4-compressed.js 72KB
leaflet
images
marker-icon-2x.png 4KB
marker-icon.png 2KB
layers.png 1KB
layers-2x.png 3KB
marker-shadow.png 797B
leaflet.js 136KB
leaflet-src.js 388KB
leaflet.css 13KB
共 15 条
- 1
资源评论
- 追夢人生2022-06-24用户下载后在一定时间内未进行评价,系统默认好评。
地图之家家长
- 粉丝: 4778
- 资源: 138
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功