map-editer v1.0.22

map-editer

包括在传单地图上绘制编辑网格及批量移动等操作支持

使用

 npm install map-editer --save

#####以下示例将向您展示如何：

<template>
  <div id="app">
    <map-editer
    :prefix="prefix"
    @drawStop="drawStop"
    @drawGeojsonDataChange ="drawGeojsonDataChange"
    :drawOptions="drawOptions"
    ></map-editer>
  </div>
</template>

<script>
import MapEditer from 'MapEditer';
export default {
  name: 'app',
  data () {
    return {
      prefix: '©室内地图', // 归属
      drawOptions: {// 工具项
        polyline: true,// 线
        polygon: true,// 对变形
        rectangle: true,// 矩形
        marker: true,// 矢量标
        circlemarker: false,//矢量圆
        edit: true,// 编辑
        remove: true,// 删除
      },
      minZoom:1, // 地图最小缩放级
      maxZoom:6, // 地图最大缩放级
    }
  },components:{
    MapEditer
  },
    methods:{
    drawStop(data){// drawStart
      console.log(data,'绘制完成的geojson数据');
    },
    drawGeojsonDataChange(data){//数据改变事件
      console.log(data,'data');

    }
    }
}
</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

#####如图