map-editer
v1.0.22
Published
map editer project
Downloads
50
Readme
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>
#####如图