leaflet-component-map

快速开始

1、安装组件库

npm install leaflet-component-map -S

2、引用组件库

//全部引入
import 'leaflet-component-map/dist/css/index.css'
import rgMap from 'leaflet-component-map'
Vue.use(rgMap)

//按需引入
import 'leaflet-component-map/dist/css/mapBasic.css'
import mapBasic from 'leaflet-component-map'
Vue.use(mapBasic)

import 'leaflet-component-map/dist/css/mapTool.css'
import { mapTool } from 'leaflet-component-map'
Vue.use(mapTool)

// 组件内使用
<rg-map-basic :configObj="configObj" ref="basicMap" @mapReady="mapReady">
  <rg-map-tool
    :tools="tools"
    @pointDbclick="pointDbclick"
    @pointClick="pointClick"
  ></rg-map-tool>
</rg-map-basic>

引入 mapBsic 组件，传入地图参数 configObj,并调用组件内 initMap 方法，初始化地图。

 mounted() {
    this.initConfigObj()
  },
  methods: {
    initConfigObj() {
      this.configObj = {
        osmUrl: "http://10.10.167.122:8089/map/yantai/{z}/{x}/{y}.png",
        southWest: [37.590442, 121.057361], // 西南角坐标
        northEast: [37.631471, 121.194953], // 东北角左边
        min: 16,
        max: 19,
        mapCenter: [37.60966, 121.128402],
      }
    },
    mapReady(e) {
      this.map = e
    }
  }

mapReady 方法接收地图初始化完成后的 map,在外部使用。

  methods: {
    mapReady(e) {
      this.map = e
    }
  }

需要引入的子组件，则在 rg-map-basic 内引入。

mapTool 展示的工具

  data(){
    return{
      tools: ["distance", "area", "markPoint", "markLine", "markArea", "clear"],
    }
  }