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)

相关推荐

  1. Leaflet.jsAPI记录

    2024-04-12 00:56:04       36 阅读
  2. 记录 Selenium 功能和API

    2024-04-12 00:56:04       37 阅读
  3. VOL_记录!!

    2024-04-12 00:56:04       47 阅读
  4. 工具记录

    2024-04-12 00:56:04       48 阅读
  5. ubuntu记录

    2024-04-12 00:56:04       37 阅读
  6. JDBC-API

    2024-04-12 00:56:04       66 阅读
  7. unity---API

    2024-04-12 00:56:04       32 阅读
  8. <span style='color:red;'>常</span><span style='color:red;'>用</span><span style='color:red;'>API</span>

    API

    2024-04-12 00:56:04      38 阅读
  9. libtorch函数记录

    2024-04-12 00:56:04       55 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-12 00:56:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-12 00:56:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-12 00:56:04       82 阅读
  4. Python语言-面向对象

    2024-04-12 00:56:04       91 阅读

热门阅读

  1. 【运行环境】加载资源的形式

    2024-04-12 00:56:04       41 阅读
  2. Hutool是什么依赖?

    2024-04-12 00:56:04       39 阅读
  3. debian内核版本升级步骤详解

    2024-04-12 00:56:04       34 阅读
  4. jmeter生成随机数的详细步骤及使用方式

    2024-04-12 00:56:04       32 阅读
  5. 深入探讨string类的奥秘

    2024-04-12 00:56:04       37 阅读
  6. LISP入门

    2024-04-12 00:56:04       37 阅读
  7. node 中的 nextTick 和 vue 中的 nextTick 的区别

    2024-04-12 00:56:04       32 阅读
  8. Testng测试框架(5)--依赖

    2024-04-12 00:56:04       36 阅读
  9. sql语句自连接使用场景 案例

    2024-04-12 00:56:04       42 阅读
  10. 蓝桥第 6 场 强者挑战赛 谁是帕鲁|数位DP模板

    2024-04-12 00:56:04       38 阅读