|
|
@@ -21,6 +21,7 @@
|
|
|
</div>
|
|
|
<div class="sdb-add">
|
|
|
<div class="b t2" @click="openMte('polygonAdd')">添加多边形</div>
|
|
|
+ <div class="b t2" @click="openMte('circleAdd')">添加圆点</div>
|
|
|
<div class="b t2" @click="openMte('polylineAdd')">添加折线</div>
|
|
|
<div class="b t2" @click="openMte('textAdd')">添加文字</div>
|
|
|
<div class="b t2" @click="openImg()">添加图标</div>
|
|
|
@@ -42,6 +43,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="sdb-list" v-if="circles.length > 0">
|
|
|
+ <div class="label t2">圆点列表(选中:{{circleIndex + 1}})</div>
|
|
|
+ <div class="ul">
|
|
|
+ <div class="op" v-for="(circle, index) in circles" :key="index">
|
|
|
+ <p class="p1" @click="openMte('circleAdd', {obj: circle, index})">({{index + 1}}){{circle.text}}</p>
|
|
|
+ <p class="more">
|
|
|
+ <span v-if="circle.editable" class="d d1" @click="mapIsEdit(index, 'circles')">编辑</span>
|
|
|
+ <span v-else class="d d3" @click="mapIsEdit(index, 'circles')">只读</span>
|
|
|
+ <span class="d d4" @click="mapDel(index, 'circles')">删除</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="sdb-list" v-if="polylines.length > 0">
|
|
|
<div class="label t2">折线列表(选中:{{polylineIndex + 1}})</div>
|
|
|
<div class="ul">
|
|
|
@@ -154,7 +168,7 @@
|
|
|
</el-amap-polygon>
|
|
|
<el-amap-polyline
|
|
|
v-for="(polyline, index) in polylines"
|
|
|
- :key="index"
|
|
|
+ :key="20000 + index"
|
|
|
:editable="polyline.editable"
|
|
|
:fillColor="polyline.fillColor"
|
|
|
:fillOpacity="polyline.fillOpacity"
|
|
|
@@ -168,6 +182,20 @@
|
|
|
</el-amap-polyline>
|
|
|
<!-- closeWhenClickMap="true" -->
|
|
|
<el-amap-info-window :isCustom="true" :position="winObj.position" :content="winObj.content"></el-amap-info-window>
|
|
|
+ <!-- <el-amap-circle :center="circleCenter" :radius="radius" :visible="visible" :editable="edit" :draggable="draggable" @click="click"></el-amap-circle> -->
|
|
|
+ <el-amap-circle
|
|
|
+ v-for="(circle, index) in circles"
|
|
|
+ :key="30000 + index"
|
|
|
+ :center="circle.center"
|
|
|
+ :radius="circle.radius"
|
|
|
+ :editable="circle.editable"
|
|
|
+ :fillColor="'#d71139'"
|
|
|
+ :fillOpacity="0.7"
|
|
|
+ :strokeColor="'#d71139'"
|
|
|
+ :strokeOpacity="0.8"
|
|
|
+ :extData="{index}"
|
|
|
+ :events="circleEvents">
|
|
|
+ </el-amap-circle>
|
|
|
</el-amap>
|
|
|
<MapTextEdit
|
|
|
:isShow="isMteShow"
|
|
|
@@ -198,6 +226,7 @@ export default {
|
|
|
return {
|
|
|
isImgShow: false,
|
|
|
polylines: [],
|
|
|
+ circles: [],
|
|
|
estateList: [],
|
|
|
schoolList: [],
|
|
|
medium_school_list: [],
|
|
|
@@ -291,6 +320,21 @@ export default {
|
|
|
that.curMarkersIndex = eData.index
|
|
|
},
|
|
|
},
|
|
|
+ circleEvents: {
|
|
|
+ click(e) {
|
|
|
+ const eData = e.target.getExtData()
|
|
|
+ that.circleIndex = eData.index
|
|
|
+ const lnglatObj = e.lnglat
|
|
|
+ that.winObj.position = [lnglatObj.lng, lnglatObj.lat]
|
|
|
+ const cObj = that.circles[that.circleIndex]
|
|
|
+ that.winObj.content = `
|
|
|
+ <div style="border-radius: 6px;overflow:hidden;background:#fff;box-shadow: 0 0 3px #ccc;">
|
|
|
+ <div style="font-weight: bold;color:#fff;padding: 6px;background:#d71139;user-select: none;margin-bottom: 6px;text-align: left;font-size: 12px;">南昌地铁</div>
|
|
|
+ <div style="padding: 0 6px 6px;color: #999;font-size: 12px;">站点：${cObj.text}</div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ },
|
|
|
polygonEvents: {
|
|
|
click(e) {
|
|
|
const eData = e.target.getExtData()
|
|
|
@@ -392,6 +436,7 @@ export default {
|
|
|
polygonIndex: 0,
|
|
|
polylineIndex: 0,
|
|
|
curMarkersIndex: 0,
|
|
|
+ circleIndex: 0,
|
|
|
plugin: [{
|
|
|
pName: 'MouseTool',
|
|
|
}],
|
|
|
@@ -718,6 +763,7 @@ export default {
|
|
|
position: [data.mapDiyObj.center[0], data.mapDiyObj.center[1]],
|
|
|
}
|
|
|
this.polylines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
|
|
|
+ this.circles = data.circles && data.circles.length > 0 ? [...data.circles] : []
|
|
|
let polygons = [...data.polygons]
|
|
|
//
|
|
|
// polygons.forEach(item => {
|
|
|
@@ -857,6 +903,32 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
+ circleAdd (obj) {
|
|
|
+ const that = this
|
|
|
+ const curMap = this.amapManager.getMap()
|
|
|
+ let mouseTool = new AMap.MouseTool(curMap)
|
|
|
+ mouseTool.marker({
|
|
|
+ content: ' ',
|
|
|
+ })
|
|
|
+ AMap.event.addListener(mouseTool,'draw',function(e) {
|
|
|
+ let cPath = e.obj.getPosition()
|
|
|
+ let circles = [...that.circles]
|
|
|
+ circles.push({
|
|
|
+ center: [cPath.lng, cPath.lat],
|
|
|
+ editable: true,
|
|
|
+ radius: 50,
|
|
|
+ fillColor: obj.color || '#d71139',
|
|
|
+ strokeColor: obj.color || '#d71139',
|
|
|
+ text: obj.text,
|
|
|
+ // strokeStyle: obj.strokeStyle || 'solid',
|
|
|
+ })
|
|
|
+ that.circles = [...circles]
|
|
|
+ window.setTimeout(() => {
|
|
|
+ mouseTool.close(true)
|
|
|
+ that.isDbShow = true
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
polygonAdd (obj) {
|
|
|
const that = this
|
|
|
const curMap = this.amapManager.getMap()
|
|
|
@@ -928,7 +1000,7 @@ export default {
|
|
|
mapIsEdit (index, str) {
|
|
|
this.curMarkersIndex = index
|
|
|
let tempData = [...this[str]]
|
|
|
- if (str === 'polygons' || str === 'polylines') {
|
|
|
+ if (str === 'polygons' || str === 'polylines' || str === 'circles') {
|
|
|
if (tempData[index].editable) {
|
|
|
tempData[index].editable = false
|
|
|
// tempData[index].strokeStyle = 'solid'
|
|
|
@@ -1025,8 +1097,11 @@ export default {
|
|
|
if (this.mteStr === 'polylineAdd') {
|
|
|
str = 'polylines'
|
|
|
}
|
|
|
+ if (this.mteStr === 'circleAdd') {
|
|
|
+ str = 'circles'
|
|
|
+ }
|
|
|
let tempData = [...this[str]]
|
|
|
- if (this.mteStr === 'textAdd') {
|
|
|
+ if (this.mteStr === 'textAdd' || this.mteStr === 'circleAdd') {
|
|
|
tempData[index].content = obj.text
|
|
|
tempData[index].text = obj.text
|
|
|
tempData[index].color = obj.color
|
