<!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个子文件） 
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资源评论
RMTC馃樁2022-05-23用户下载后在一定时间内未进行评价，系统默认好评。
追夢人生2022-06-25用户下载后在一定时间内未进行评价，系统默认好评。
GIS之家家长
- 粉丝: 691
- 资源: 139
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
