如何解决如何使用 Leaflet.Draw 添加和保存折线并在代码中重用?
我如何使用 leaflet.draw 来添加折线并将它们保存在 js 代码中。
我只想使用 leaflet.draw 因为我不知道我在地图上的坐标。我会添加超过 100 条折线。
我想在 GTA 5 地图上添加 RacingTracks,用户可以查看地图,但不能编辑对象。
所以我需要使用 leaflet.draw 来绘制,然后保存并移除工具栏。
..这是我第一次使用 html/javascript,我感到迷茫 xD
<!DOCTYPE html>
<head>
<Meta charset="utf-8" />
<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
/>
<style>
html,body {
margin: 0;
padding: 0;
}
#map {
position:absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js">
</script>
<script>
// Setup map
var map = L.map('map',{
crs: L.CRS.Simple,minZoom: -1,maxZoom: 5
});
var bounds = [[0,0],[1600,1600]];
var image = L.imageOverlay('https://static.wixstatic.com/media/9b4488_d04bfdefc77e4c2c803d07e9b4b34e6f~mv2.png',bounds).addTo(map);
map.fitBounds(bounds);
var LeafIcon = L.Icon.extend({
options: {
shadowUrl:
'http://leafletjs.com/docs/images/leaf-shadow.png',iconSize: [38,95],shadowSize: [50,64],iconAnchor: [22,94],shadowAnchor: [4,62],popupAnchor: [-3,-76]
}
});
var greenIcon = new LeafIcon({
iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'
});
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
position: 'topright',draw: {
polygon: {
shapeOptions: {
color: 'purple'
},allowIntersection: false,drawError: {
color: 'orange',timeout: 1000
},showArea: true,metric: false,repeatMode: true
},polyline: {
shapeOptions: {
color: 'red'
},},rect: {
shapeOptions: {
color: 'green'
},circle: {
shapeOptions: {
color: 'steelblue'
},marker: {
icon: greenIcon
},edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created',function (e) {
var type = e.layerType,layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
});
</script>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。