<!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>
<script src="lib/leaflet.polylineDecorator.js"></script>
</head>
<body>
<div id="map"></div>
<input type="button" value="线段中间叠加内容（虚线）" onclick="addCenterDivDashPolyline()"
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.490422570142833,118.11471659369913];
map.setView(center_point, 12);
function addCenterDivDashPolyline(){
//虚线
var dashJson = {};
dashJson.xys = [
[24.510154724121097,118.0195999145508],
[24.5815991210937504,118.16516876220703]
];
dashJson.option = {};
dashJson.option.color = '#0000ff';
dashJson.option.weight = '3';
var dashPolyline= addDashPolyline(dashJson);
console.log("虚线", dashPolyline);
//给线加箭头
var iconJson2 = {};
iconJson2.option = {};
iconJson2.option.iconUrl = "images/plane.png";
iconJson2.option.iconAnchor = [20, 20];
iconJson2.option.iconSize=[40, 40];
var markerIcon2 = L.icon(iconJson2.option);
dashPolyline.icon = markerIcon2;
var markers = addDirectionIcon(dashPolyline);
console.log("markers:",markers);
//为线段添加div
var startPoint = [24.510154724121097,118.0195999145508];
var endPoint = [24.5815991210937504,118.16516876220703];
//计算倾斜角度
var angle = Math.atan2((endPoint[0] - startPoint[0]), (endPoint[1] - startPoint[1]));
var theta = -angle * (180 / Math.PI)-2.5;
console.log("rotateRatio", theta);
//计算中心点
var centerPoint=[(endPoint[0] + startPoint[0])/2,(endPoint[1] + startPoint[1])/2];
console.log("中心点位置：",centerPoint);
var divJson2 = {};
divJson2.xy = centerPoint;
divJson2.option = {};
divJson2.option.iconAnchor = [105, 35];
var html="<div style='font-size:20px;color:white;opacity:0.8;width: 210px;height:30px;background-color: green;transform: rotateZ("+theta+"deg);transform-origin:center center;'>";
html+="98.288MHz | 35分40秒";
html+="</div>";
divJson2.option.html =html;
var centerDiv=addDiv(divJson2);
console.log("centerDiv",centerDiv);
}
//线段尾巴加图标
function addDirectionIcon(polylineObj) {
var markers = [];
console.log("线对象", polylineObj);
var latlngs = polylineObj._latlngs;
for (var i = 0; i < latlngs.length; i++) {
if (i == 0) {
} else {
var startPoint = latlngs[i - 1];
var endPoint = latlngs[i];
var angle = Math.atan2((endPoint.lng - startPoint.lng), (endPoint.lat - startPoint.lat)); //弧度 0.6435011087932844
//var angle = Math.atan2((endPoint.lat - startPoint.lat), (endPoint.lng - startPoint.lng)); //弧度 0.6435011087932844
var theta = angle * (180 / Math.PI); //角度 36.86989764584402
//console.log("rotateRatio", angle, theta);
//添加箭头
var divJson2 = {};
divJson2.xy = [endPoint.lat, endPoint.lng];
divJson2.option = {};
divJson2.option.iconAnchor = polylineObj.icon.options.iconAnchor;
var html = "";
html += '<div>';
html += '<img src="' + polylineObj.icon.options.iconUrl + '" width="' + polylineObj.icon.options.iconSize[0] + 'px" height="' + polylineObj.icon.options.iconSize[1] + 'px" style="transform: rotateZ(' + theta + 'deg)">';
html += '</div>';
divJson2.option.html = html;
var directionDiv = this.addDiv(divJson2);
markers.push(directionDiv);
}
}
return markers;
};
function addDashPolyline(dashJson) {
var pathPattern = L.polylineDecorator(dashJson.xys,
{
patterns: [
{
offset: 10,
repeat: 20,
symbol: L.Symbol.dash({pixelSize: 10, pathOptions: dashJson.option})
},
//{offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 1})}
]
}
).addTo(map);
pathPattern._latlngs = [];
for (var i = 0; i < dashJson.xys.length; i++) {
var obj = {};
obj.lat = dashJson.xys[i][0];
obj.lng = dashJson.xys[i][1];
pathPattern._latlngs.push(obj);
}
return pathPattern;
}
function addDiv(divJson) {
divJson.option.iconSize = [];
var divIcon = L.divIcon(divJson.option);
var divLayer = L.marker(divJson.xy, {icon: divIcon});
divLayer.type = "div";
divLayer.addTo(map);
return divLayer;
}
</script>
</body>
</html>
61.（leaflet篇）leaflet线段中间叠加内容（虚线）.zip
版权申诉
5星 · 超过95%的资源 199 浏览量
2022-01-06
09:35:18
上传
评论
收藏 393KB ZIP 举报 
61.（leaflet篇）leaflet线段中间叠加内容（虚线）.zip （20个子文件） 
map images 
marker-icon.png 4KB people.png 175KB poi.png 3KB plane.png 2KB bike.png 2KB lib iconpulse 
L.Icon.Pulse.js 2KB L.Icon.Pulse.css 763B proj4 proj4-compressed.js 72KB proj4leaflet.js 7KB proj4.js 72KB leaflet.polylineDecorator.js 16KB leaflet leaflet.css 13KB leaflet.js 136KB leaflet-src.js 388KB images marker-icon.png 2KB layers-2x.png 3KB layers.png 1KB marker-icon-2x.png 4KB marker-shadow.png 797B
61.（leaflet篇）leaflet线段中间叠加内容（虚线）.html 6KB资源评论
追夢人生2022-06-24用户下载后在一定时间内未进行评价，系统默认好评。
地图之家家长
- 粉丝: 4770
- 资源: 138
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
最新资源
- oracle 触发器语法及 for each row 详细说明
- 微信小程序-豆瓣图书源码
- Fragment - Unknow animation name objectAnimator 问题解决及源码分析
- 词向量-中文文本相似度计算-采用text2vec词向量工具进行计算对比.zip
- 521293804316625base(1).apk
- ARP IP地址分类及特殊IP
- 【MySQL补丁】vcredist-x64xz MySQL必备插件
- 基于SG3525芯片PWM控制推挽隔离DCDC电源模块AD09设计硬件(原理图+PCB)工程文件.zip
- Word_20240428_092324.docx
- cloudcc_v1.1.10-release_sign.apk
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
