component-map-web/README.md

web端电子地图组件-基于leaflet实现的2D地图效果

# platMap

### 快速开始

#### 1、安装组件库

```bash
npm install component-map-web -S
```

#### 2、引用组件库

```javascript
//全部引入
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)
```

```html
// 组件内使用
<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 方法，初始化地图。

```javascript
 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,在外部使用。

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

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

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

##### mapTool 展示的工具

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