angular + leaflet + leaflet-draw

版本信息

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 地址