在leaflet加入比例尺

760 阅读1分钟

为原生组件 image.png

html

 var scale = L.control.scale();
            //将比例尺加载到地图容器中
            map.addControl(scale);

vue形式


  mounted() {
    this.map = this.$utils.map.createMap("map-container", {
      //缩放控件
      zoomControl: false,
    });

    // 加载 open street map 图层服务
    this.$utils.map.createTileLayer(this.map, this.vecLayer, { noWrap: true });
    this.$utils.map.createTileLayer(this.map, this.cvaLayer, { noWrap: true });

    // 设施地图视图 中心位置 所有操作的前提必须先给个中心点
    this.map.setView([30.82993, 120.92559], 18);
    var scale = this.$utils.map.$L.control.scale();//$utils.map.$L 为封装的模块
            //将比例尺加载到地图容器中
            this.map.addControl(scale);
    //平移至
    //   setTimeout(() =>{
    //     this.map.panTo([30.82993, 122.31],{
    //   animate: true,
    // })
    //   },1500)

    //鸟瞰放大至
    //this.map.flyTo([36.52, 120.31]);


    //  // 双击地图结束绘制
    //   this.map.on("dblclick", (evt) => {
    //     alert("绘制结束");
    //   });
    
  },