89.（leaflet篇）leaflet态势标绘-突击方向采集.zip

共16个文件

png：7个

js：7个

html：1个

版权申诉

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

资源推荐

资源详情

资源评论

收起资源包目录

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

<!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'/> <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>

评论收藏

内容反馈

版权申诉