90.（leaflet篇）leaflet态势标绘-突击方向修改.zip资源-CSDN文库

共16个文件

png：7个

js：7个

html：1个

版权申诉

leaflet

态势标绘

5星 · 超过95%的资源 18 浏览量 2022-04-21 10:16:37 上传评论收藏 212KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

90.（leaflet篇）leaflet态势标绘-突击方向修改.zip （16个子文件）

map

images

gatherPoint.png 891B

poi.png 3KB

90.（leaflet篇）leaflet军事标绘-突击方向修改.html 4KB

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

<!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' />  <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'/> <input type="button" onclick='editStraightArrow();' value="突击方向进入编辑" style='position:absolute;left:50px;top:100px;background: blue;color:white;z-index: 9999;font-size: 24px'/> <input type="button" onclick='endStraightArrow();' value="突击方向结束编辑" style='position:absolute;left:50px;top:150px;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= [[24.543687907411208, 118.02989959716798],[24.482461840837402, 118.14903259277344]]; straightArrowLayer=L.Plot.assaultDirection(gatherPosition).addTo(map); } //进入编辑状态 function editStraightArrow() { for (var i = 0; i < gatherPosition.length; i++) { var markerTemp=createPoint(gatherPosition[i], i); markerTemp.on('drag', drawCallBack,"plot"); markerTemp.dragging.enable(); } } //结束采集 function endStraightArrow(){ clearKeyPoint(); console.log("细直线箭头的采集关键点数据：",gatherPosition); } //移动点回调函数 function drawCallBack(e){ gatherPosition[e.target.oid]=[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>

评论收藏

内容反馈

版权申诉