<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="referrer" content="no-referrer"/>
<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>
<script src="lib/plot/Plots.js"></script>
<script src="lib/plot/PlotUtil.js"></script>
</head>
<body>
<input type="button" onclick='addStraightArrow();' value="突击方向采集"
style='position:absolute;left:50px;top:50px;background: blue;color:white;z-index: 9999;font-size: 24px'/>
<div id="map"></div>
<script>
/** */
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
//以上地址如果不能访问到新版地图URL,可通过访问新版地图,通过F12-->network获取
new L.TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 20,
minZoom: 1,
attribution: 'ⓒ 2012 Daum'
}).addTo(map);
var center_point=[24.507455675371375,118.15418243408205];
map.setView(center_point, 12);
// 直箭头
var gatherPosition=[];//采集的点信息
var gatherIcon=L.icon({
iconUrl: 'images/gatherPoint.png',
iconSize: [16, 16],
iconAnchor: [8, 8],
});
var floatingPoint=null;////浮动点
var straightArrowLayer=null;//直线箭头标绘
function addStraightArrow() {
gatherPosition=[];
straightArrowLayer=null;
floatingPoint=null;
map.on("click",clickBack,"plot");
map.on("mousemove",mousemoveBack,"plot");
}
function clickBack(e){
var gatherPointTemp=[e.latlng.lat,e.latlng.lng];
//console.log("gatherPointTemp",gatherPointTemp);
var num = gatherPosition.length;
if (num == 0) {
gatherPosition.push(gatherPointTemp);
floatingPoint = createPoint(gatherPointTemp, -1);
}
gatherPosition.push(gatherPointTemp);
var oid = gatherPosition.length - 2;
createPoint(gatherPointTemp, oid);
if (num > 1) {
gatherPosition.pop();
map.removeLayer(floatingPoint);
map.off("click",clickBack,"plot");
map.off("mousemove",mousemoveBack,"plot");
//删除关键点
clearKeyPoint();
console.log("细直线箭头的采集关键点数据:",gatherPosition);
}
}
function mousemoveBack(e){
if(floatingPoint==null){
return;
}
floatingPoint.setLatLng([e.latlng.lat,e.latlng.lng]);
gatherPosition.pop();
gatherPosition.push([e.latlng.lat,e.latlng.lng]);
showRegionToMap();
}
function showRegionToMap(){
//console.log("gatherPosition:",gatherPosition);
if(straightArrowLayer==null){
straightArrowLayer=L.Plot.assaultDirection(gatherPosition).addTo(map);
}else{
map.removeLayer(straightArrowLayer);
straightArrowLayer=null;
//console.log("gatherPositiongggg",gatherPosition);
straightArrowLayer=L.Plot.assaultDirection(gatherPosition).addTo(map);
}
}
function createPoint(latlng,oid){
var markerTemp=L.marker(latlng,{icon: gatherIcon,opacity:0.9}).addTo(map);
markerTemp.oid = oid;
markerTemp.flag = "keypoint";
return markerTemp;
}
function clearKeyPoint(){
map.eachLayer(function(layer){
//删除layerType不是map值的图层
if(layer.flag=="keypoint"){
map.removeLayer(layer);
}
});
}
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
89.(leaflet篇)leaflet态势标绘-突击方向采集.zip
共16个文件
png:7个
js:7个
html:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 2 下载量 68 浏览量
2022-04-20
10:10:06
上传
评论
收藏 212KB ZIP 举报
温馨提示
该资源包的执行效果查看地址:https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“89.(leaflet篇)leaflet态势标绘-突击方向采集”。如下载有问题,可联系博主。
资源推荐
资源详情
资源评论
收起资源包目录
89.(leaflet篇)leaflet态势标绘-突击方向采集.zip (16个子文件)
map
images
gatherPoint.png 891B
poi.png 3KB
lib
proj4
proj4.js 72KB
proj4leaflet.js 7KB
proj4-compressed.js 72KB
plot
Plots.js 30KB
PlotUtil.js 13KB
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
89.(leaflet篇)leaflet军事标绘-突击方向采集 .html 4KB
共 16 条
- 1
资源评论
- RMTC馃樁2022-05-23用户下载后在一定时间内未进行评价,系统默认好评。
- 追夢人生2022-06-25用户下载后在一定时间内未进行评价,系统默认好评。
GIS之家家长
- 粉丝: 688
- 资源: 139
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 通过python实现原型模式(Prototype Pattern).rar
- xiefrnsdklmkds
- 基于PyQt5+pytorch的在线疲劳检测系统项目源码+文档说明(Python毕业设计)
- Excel表格拆分工具.exe
- Python毕业设计基于PyQt5+pytorch的在线疲劳检测系统项目源码+文档说明
- 基于Unity开发的消消乐小游戏源代码(毕业设计和大作业适用).zip
- 基于hadoop和hbase的电商交易记录的简单分析项目源码+文档说明.zip
- Vue 3前端框架核心特性详解及其应用
- F1C100s_with_Keil_RTX4_emWin5-嵌入式开发资源
- gear-lib-嵌入式开发资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功