持续更新中。。。
1. 设置地图中心
new L.LatLng("纬度", "经度")
2.投影
var crs = new L.Proj.CRS("EPSG:4326", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs", {
origin: [-180, 90],
resolutions: [] // 所有的分辨率复制到这里
});
3.地图
var map = L.map('map', {
maxZoom: 10,
minZoom: 0,
crs: crs, // 投影
layers: [], // 图层
zoomControl: false,
bounceAtZoomLimits: false
}).setView(centerPoint, 0); // 中心点坐标
4.多图层
L.layerGroup([tdt, tdt2]); // 图层一一列举
5.瓦片图层
L.esri.tiledMapLayer({
url: "", // 服务地址
continuousWorld: true
})
6.绘制工具箱
let drawnItems = new L.featureGroup();
let draw = new L.Control.Draw({
position: 'bottomright', // 工具箱放置位置
edit: {
featureGroup: drawnItems,
poly: {
allowIntersection: false
}
},
draw: {
polygon: {
allowIntersection: false, // 是否允许自相交
showArea: true
},
rectangle: false, // 矩形
circle: false, // 圆形
marker: true, // 点
polygon: true, // 面
polyline: true, // 线
circlemarker: false
}
})
map.addControl(draw);
7.图标设置
let icon = L.icon({
iconUrl: 'img/marker-icon.png', // 图标路径
iconSize: [25, 41], // 图标大小
iconAnchor: [12, 41],
popupAnchor: [0, -40]
});
8.注记
var marker = L.marker(["",""], { icon: icon }); // 经纬度坐标,icon就是7中的图标
drawnItems.addLayer(marker);
9.绘制方法调用
map.on(L.Draw.Event.CREATED, function (event) {
});
map.on(L.Draw.Event.DRAWSTOP, function (event) {
})
console.log(L.Draw.Event)