Leaflet.js常用API记录

持续更新中。。。

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)