platMap

快速开始

1、安装组件库

npm install component-map-web -S

2、引用组件库

//全部引入
import "component-map-web/dist/css/index.css"
import platMap from "component-map-web"
Vue.use(platMap)

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

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

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

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

 mounted() {
    this.initConfigObj()
    this.$refs.basicMap.initMap(this.configObj)
  },
  methods: {
    initConfigObj() {
      this.configObj = {
        osmUrl: "http://10.20.167.151: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
    }
  }

组件内部 map 作为全局变量在各个子组件共享。

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

mapTool 展示的工具

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