leaflet动态加载/手动绘制（圆、多边形）demo

L.tileLayer(wpUrl, {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var LeafIcon = L.Icon.extend({
options: {
shadowUrl: '/Img/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});

var greenIcon = new LeafIcon({ iconUrl: '/Img/leaf-green.png' }),
redIcon = new LeafIcon({ iconUrl: '/Img/leaf-red.png' });

L.marker([30.3367385888597, 120.135198302847], { icon: greenIcon }).bindPopup("I am a green leaf.").addTo(map);
L.marker([30.3381806108297, 120.140808207925], { icon: redIcon }).bindPopup("I am a red leaf.").addTo(map);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

//初始化数据
var defaultVal = 1;
var defaultSite = [30.3367385888597, 120.135198302847];

var point = []; //多边形集合
point.push([30.2993660256245, 120.154368710801]);
point.push([30.3500857043154, 120.157951567494]);
point.push([30.3126058061275, 120.12189508822]);
point.push([30.3028305920692, 120.12263712889]);
point.push([30.2993660256245, 120.154368710801]);

var tempCircle = new L.circle();
DrawCircle(defaultVal, defaultSite);

function add() {
defaultVal = defaultVal + 1;
DrawCircle(defaultVal, defaultSite);
}
function reduce() {
defaultVal = defaultVal - 1;
DrawCircle(defaultVal, defaultSite);
}

//圆形
function DrawCircle(r, globalSite) {
map.removeLayer(tempCircle);
tempCircle.setLatLng(globalSite)
tempCircle.setRadius(r * 1000)
tempCircle.setStyle({ color: '#ff0000', fillColor: '#28FF28', fillOpacity: 0.3 })
map.addLayer(tempCircle)
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

var lines = new L.polyline([]);
var geometry = [];
var node;
var tempLines = new L.polyline([], { dashArray: 5 });

DrawPolygon();
//多边形
function DrawPolygon() {
$.each(point, function (index, item) {
node = L.circle(item, { color: '#ff0000', fillColor: 'ff0000', fillOpacity: 1 })
lines.addLatLng(item);
map.addLayer(tempLines);
map.addLayer(lines);
map.addLayer(node);
geometry.push(node);
});

geometry.push(L.polygon(point).addTo(map));

}
</script>
<script>
////读取点击位置坐标并返回其经纬度
//// function onMapClick(e) { alert("You clicked the map at " + e.latlng); }
////r用来存储半径，i用来存储圆心经纬度
////tempCircle是用来存放圆的图层，pop用来返回圆半径的弹窗
//var r;
//var i;
//var tempCircle;
//var pop;
////移除圆图层
//function removeCircle() {
// map.removeLayer(tempCircle);
//}
////绘制圆
//function drawCircle() {
// //在绘制圆之前需要先判断是否已经绘制过了，如果有，则清空再绘制
// //如果需要绘制多个圆，则不必此句
// if (tempCircle) {
// removeAll();
// }
// r = 0;
// i = null;
// tempCircle = new L.circle();
// map.dragging.disable();//将mousemove事件移动地图禁用
// //监听鼠标落下事件
// map.on('mousedown', onmouseDown);

// function onmouseDown(e) {
// //确定圆心
// i = e.latlng
// pop = L.popup().setLatLng(e.latlng);
// map.addLayer(pop);
// //监听鼠标移动事件
// map.on('mousemove', onMove);
// //监听鼠标弹起事件
// map.on('mouseup', onmouseUp);
// }
// function onMove(e) {
// r = L.latLng(e.latlng).distanceTo(i);//计算半径
// if (r < 5000) {
// if (i) {
// //绘制圆心位置与半径
// tempCircle.setLatLng(i)
// tempCircle.setRadius(r)
// tempCircle.setStyle({ color: '#ff0000', fillOpacity: 0 })
// map.addLayer(tempCircle)
// }
// //toFixed()方法用来保留两位小数（四舍五入）
// pop.setContent("绘制圆半径为：" + r.toFixed(2) + "米");;
// } else {
// r = 5000;
// if (i) {
// tempCircle.setLatLng(i)
// tempCircle.setRadius(r)
// tempCircle.setStyle({ color: '#ff0000', fillOpacity: 0 })
// map.addLayer(tempCircle)
// }
// pop.setContent("绘制圆半径为：" + r + "米");;
// }
// }
// function onmouseUp(e) {
// /* r = L.latLng(e.latlng).distanceTo(i); */
// map.removeLayer(pop);
// L.circle(i, { radius: r, color: '#ff0000', fillOpacity: 0 });
// map.addLayer(tempCircle);
// map.dragging.enable();

// map.setView(i, 13);

// i = null;
// r = 0;
// //取消监听事件
// map.off('mousedown');
// map.off('mouseup');
// map.off('mousemove');

// }
//}
////移除所有图层(包括圆和多边形)
//function removeAll() {
// removePolygon()
// removeCircle()
//}
</script>
<script>
////动态绘制多边形
//var points, geometry, lines, tempLines, node;
//function drawPolygon() {
// if (tempLines) {
// removePolygon();
// }
// map.doubleClickZoom.disable();
// lines = new L.polyline([]);
// tempLines = new L.polyline([], { dashArray: 5 });
// points = [];
// geometry = [];
// map.on('click', onClick); //点击地图
// map.on('dblclick', onDoubleClick);
// map.on('mousemove', onMove)//双击地图

// function onClick(e) {
// points.push([e.latlng.lat, e.latlng.lng])
// lines.addLatLng(e.latlng)
// map.addLayer(tempLines)
// map.addLayer(lines)
// node = L.circle(e.latlng, { color: '#ff0000', fillColor: 'ff0000', fillOpacity: 1 })
// map.addLayer(node)
// geometry.push(node)
// }
// function onMove(e) {
// if (points.length > 0) {
// ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng], points[0]]
// tempLines.setLatLngs(ls)
// // map.addLayer(tempLines)
// }
// }
// function onDoubleClick(e) {
// geometry.push(L.polygon(points).addTo(map))
// points = [];
// node = null;
// map.off('click', onClick); //点击地图
// map.off('dblclick', onDoubleClick);
// map.off('mousemove', onMove)//双击地图
// map.doubleClickZoom.enable();
// //isInPolygon(marker);
// }
//}
//function removeCircle() {
// map.removeLayer(tempCircle);
//}
//function removePolygon() {
// for (let ooo of geometry) {
// ooo.remove();
// }
// map.removeLayer(lines);
// map.removeLayer(tempLines);
//}
</script>

posted @ 2021-08-06 17:56 WantRemake 阅读(777) 评论(0) 编辑收藏举报

刷新页面返回顶部

WantRemake

leaflet动态加载/手动绘制（圆、多边形）demo

公告