版本信息
angular: 9.1.9
leaflet: 1.6.0
leaflet-draw: 1.0.4
项目背景
目前在做气象方面项目，有一个需求是动态改变地图上面的polygon的形状及大小。
备注
本博客代码路径: https://github.com/xiaowuler/leaflet.git
一定先安装 leaflet, 再安装leaflet-draw，不然import L from 'leaflet'; 报错，原因是 leaflet-draw 里面有个类型说明 import * as L from 'leaflet',按照 leaflet-draw 里面的类型导入leaflet,会出现许多属性找不到，建议npm install 后，再卸载leaflet-draw,然后再安装一下，不知道具体原因是不是这样，只能暂时这样处理一下。
编码过程
1、加载地图
initMap(): void {
// 创建初始地图（以安徽省地图为例）
this.map = L.map('map', {
zoom: 7,
zoomSnap: 0,
zoomDelta: 0.001,
zoomControl: false,
attributionControl: false,
editable: true,
printable: true,
downloadable: true,
center: [ 31.866942, 117.282699 ]
});
this.map.addLayer(this.features.base);
// 加载地图边界
this.loadBorder("assets/map/city-border.json", "#444", '#fff', 1, 1, 0, '10000, 0', null);
this.loadBorder("assets/map/province-border.json", "#444", '#fff', 2, 1, 1, '10000, 0', null);
}
2、引入leaflet-draw
import 'leaflet-draw';
3、添加leaflet-draw 控制层
initDraw(){
// this.drawItems 是一个 L.FeatureGroup(),用来存放polygon
this.map.addLayer(this.drawnItems);
this.drawControl = new L.Control.Draw({
// 隐藏绘制的工具栏，因为我的项目不需要手动绘制
draw: false,
edit: {
featureGroup: this.drawnItems,
remove: false,
}
});
// 隐藏edit handlers tip
L.drawLocal.edit.handlers.edit.tooltip.text = null;
L.drawLocal.edit.handlers.edit.tooltip.subtext = null;
this.map.addControl(this.drawControl);
}
4、动态绘制一个polygon,展示效果
drawPolygon(){
let layer = L.polygon([[31.4, 115.7], [31.5, 117.1], [29.5, 117.1], [29.5, 115.1]], {
weight: 1,
color: '#3366ff',
opacity: 1,
fillColor: '#3366ff',
fillOpacity: 1,
});
this.drawnItems.addLayer(layer);
}
5、为draw添加一个修改事件
this.map.on(L.Draw.Event.EDITVERTEX, e => {
console.log("改变了")
})
整体代码
import { Component, OnInit, AfterViewInit } from '@angular/core';
import L from 'leaflet';
import 'leaflet-draw';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements AfterViewInit {
private map;
private drawnItems = new L.FeatureGroup();
private drawControl;
private features = {
base: new L.FeatureGroup(),
layers: new L.FeatureGroup()
};
constructor(private httpClient: HttpClient) { }
ngAfterViewInit(): void {
this.initMap();
this.initDraw();
this.drawPolygon();
let content = document.querySelector('.leaflet-draw-edit-edit') as HTMLElement
content.click();
//this.drawControl._toolbars['edit'].enable();
}
private async drawPolygon(){
let layer = L.polygon([[31.4, 115.7], [31.5, 117.1], [29.5, 117.1], [29.5, 115.1]], {
weight: 1,
color: '#3366ff',
opacity: 1,
fillColor: '#3366ff',
fillOpacity: 1,
});
this.drawnItems.addLayer(layer);
}
initDraw(){
this.map.addLayer(this.drawnItems);
this.drawControl = new L.Control.Draw({
draw: false,
edit: {
featureGroup: this.drawnItems,
remove: false,
}
});
// 隐藏edit handlers tip
L.drawLocal.edit.handlers.edit.tooltip.text = null;
L.drawLocal.edit.handlers.edit.tooltip.subtext = null;
this.map.addControl(this.drawControl);
}
initMap(): void {
this.map = L.map('map', {
zoom: 7,
zoomSnap: 0,
zoomDelta: 0.001,
zoomControl: false,
attributionControl: false,
editable: true,
printable: true,
downloadable: true,
center: [ 31.866942, 117.282699 ]
});
this.map.addLayer(this.features.base);
this.loadBorder("assets/map/city-border.json", "#444", '#fff', 1, 1, 0, '10000, 0', null);
this.loadBorder("assets/map/province-border.json", "#444", '#fff', 2, 1, 1, '10000, 0', null);
this.map.on(L.Draw.Event.EDITVERTEX, e => {
console.log("改变了")
})
}
loadBorder(url, color, fillColor, weight, opacity, fillOpacity, dash, loadedCallback): void {
this.httpClient.get(url).subscribe((data: any) => {
let layer = L.geoJSON(data, {
weight: weight,
color: color,
opacity: opacity,
fillColor: fillColor,
fillOpacity: fillOpacity,
dashArray: dash,
dashOffset: '0'
});
this.features.base.addLayer(layer);
//this.map.addLayer(layer);
if (loadedCallback != null)
loadedCallback(layer, data);
});
}
}
效果
修改前
修改中
参考
https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html #leaflet-draw api文档
https://github.com/Leaflet/Leaflet.draw #leaflet-draw github 地址
