|
@@ -21,6 +21,7 @@
|
|
|
</div>
|
|
|
<div class="sdb-add">
|
|
|
<div class="b t2" @click="openMte('polygonAdd')">添加多边形</div>
|
|
|
+ <div class="b t2" @click="openMte('polylineAdd')">添加折线</div>
|
|
|
<div class="b t2" @click="openMte('textAdd')">添加文字</div>
|
|
|
</div>
|
|
|
<div class="sdb-add">
|
|
@@ -40,6 +41,20 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="sdb-list" v-if="polylines.length > 0">
|
|
|
+ <div class="label t2">折线列表(选中:{{polylineIndex + 1}})</div>
|
|
|
+ <div class="ul">
|
|
|
+ <div class="op" v-for="(polyline, index) in polylines" :key="index">
|
|
|
+ <p class="p1" @click="openMte('polylineAdd', {obj: polyline, index})">({{index + 1}}){{polyline.text}}</p>
|
|
|
+ <p class="more">
|
|
|
+ <!-- <span v-if="polyline.editable" class="d d2" @click="textAdd(polyline)">标点</span> -->
|
|
|
+ <span v-if="polyline.editable" class="d d1" @click="mapIsEdit(index, 'polylines')">编辑</span>
|
|
|
+ <span v-else class="d d3" @click="mapIsEdit(index, 'polylines')">只读</span>
|
|
|
+ <span class="d d4" @click="mapDel(index, 'polylines')">删除</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="sdb-list" v-if="markerData.length > 0">
|
|
|
<div class="label t2">文字列表(选中:{{curMarkersIndex + 1}})</div>
|
|
|
<div class="ul">
|
|
@@ -132,6 +147,19 @@
|
|
|
:extData="{index}"
|
|
|
:events="polygonEvents">
|
|
|
</el-amap-polygon>
|
|
|
+ <el-amap-polyline
|
|
|
+ v-for="(polyline, index) in polylines"
|
|
|
+ :key="index"
|
|
|
+ :editable="polyline.editable"
|
|
|
+ :fillColor="polyline.fillColor"
|
|
|
+ :fillOpacity="polyline.fillOpacity"
|
|
|
+ :strokeColor="polyline.strokeColor"
|
|
|
+ :strokeWeight="polyline.strokeWeight"
|
|
|
+ :strokeOpacity="polyline.strokeOpacity"
|
|
|
+ :extData="{index}"
|
|
|
+ :events="polylineEvents"
|
|
|
+ :path="polyline.path">
|
|
|
+ </el-amap-polyline>
|
|
|
</el-amap>
|
|
|
<MapTextEdit
|
|
|
:isShow="isMteShow"
|
|
@@ -155,6 +183,7 @@ export default {
|
|
|
data() {
|
|
|
const that = this
|
|
|
return {
|
|
|
+ polylines: [],
|
|
|
estateList: [],
|
|
|
schoolList: [],
|
|
|
medium_school_list: [],
|
|
@@ -249,6 +278,12 @@ export default {
|
|
|
// wx.miniProgram.navigateTo({url: '/pagesSchool/indexDtl?id=25'})
|
|
|
},
|
|
|
},
|
|
|
+ polylineEvents: {
|
|
|
+ click(e) {
|
|
|
+ const eData = e.target.getExtData()
|
|
|
+ that.polylineIndex = eData.index
|
|
|
+ },
|
|
|
+ },
|
|
|
estateEvents: {
|
|
|
click(e) {
|
|
|
const eData = e.target.getExtData()
|
|
@@ -268,6 +303,7 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
polygonIndex: 0,
|
|
|
+ polylineIndex: 0,
|
|
|
curMarkersIndex: 0,
|
|
|
plugin: [{
|
|
|
pName: 'MouseTool',
|
|
@@ -588,6 +624,7 @@ export default {
|
|
|
}).then(res => {
|
|
|
if (res.data) {
|
|
|
const data = JSON.parse(res.data)
|
|
|
+ this.polylines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
|
|
|
this.polygons = [...data.polygons]
|
|
|
this.markerData = [...data.markerData]
|
|
|
this.mapDiyObj = {
|
|
@@ -682,12 +719,22 @@ export default {
|
|
|
})
|
|
|
one.path = tPath
|
|
|
})
|
|
|
+ let polylines = JSON.parse(JSON.stringify(this.polylines))
|
|
|
+ polylines.map(one=> {
|
|
|
+ let tPath = []
|
|
|
+ one.editable = false
|
|
|
+ one.path.forEach(sub => {
|
|
|
+ tPath.push([sub.lng, sub.lat])
|
|
|
+ })
|
|
|
+ one.path = tPath
|
|
|
+ })
|
|
|
let markerData = JSON.parse(JSON.stringify(this.markerData))
|
|
|
markerData.map(one => {
|
|
|
one.draggable = false
|
|
|
})
|
|
|
const data = {
|
|
|
polygons,
|
|
|
+ polylines,
|
|
|
markerData,
|
|
|
mapDiyObj: this.mapDiyObj,
|
|
|
}
|
|
@@ -735,10 +782,42 @@ export default {
|
|
|
that.isDbShow = true
|
|
|
})
|
|
|
},
|
|
|
+ polylineAdd (obj) {
|
|
|
+ const that = this
|
|
|
+ const curMap = this.amapManager.getMap()
|
|
|
+ let mouseTool = new AMap.MouseTool(curMap)
|
|
|
+ mouseTool.polyline({
|
|
|
+ fillColor:'#00b0ff',
|
|
|
+ strokeColor:'#80d8ff',
|
|
|
+ editable: true,
|
|
|
+ strokeStyle: 'dashed',
|
|
|
+ })
|
|
|
+ AMap.event.addListener(mouseTool,'draw',function(e) {
|
|
|
+ let cPath = [...e.obj.getPath()]
|
|
|
+ let tempPath = []
|
|
|
+ cPath.forEach(item => {
|
|
|
+ tempPath.push([item.lng, item.lat])
|
|
|
+ })
|
|
|
+ let polylines = [...that.polylines]
|
|
|
+ polylines.push({
|
|
|
+ path: tempPath,
|
|
|
+ editable: true,
|
|
|
+ fillColor: obj.fillColor || '#DC3021', // 填充色
|
|
|
+ fillOpacity: obj.fillOpacity || 0.4, // 填充透明度
|
|
|
+ strokeColor: obj.strokeColor || '#DC3021', // 轮廓颜色
|
|
|
+ strokeWeight: 5, // 轮廓宽度
|
|
|
+ strokeOpacity: 0.8, // 轮廓透明度
|
|
|
+ text: obj.text,
|
|
|
+ })
|
|
|
+ that.polylines = [...polylines]
|
|
|
+ mouseTool.close(true)
|
|
|
+ that.isDbShow = true
|
|
|
+ })
|
|
|
+ },
|
|
|
mapIsEdit (index, str) {
|
|
|
this.curMarkersIndex = index
|
|
|
let tempData = [...this[str]]
|
|
|
- if (str === 'polygons') {
|
|
|
+ if (str === 'polygons' || str === 'polylines') {
|
|
|
if (tempData[index].editable) {
|
|
|
tempData[index].editable = false
|
|
|
tempData[index].strokeStyle = 'solid'
|
|
@@ -773,7 +852,17 @@ export default {
|
|
|
if (obj) {
|
|
|
if (bcStr && bcStr === 'edit') {
|
|
|
const index = this.mteObj.index || 0
|
|
|
- const str = this.mteStr === 'textAdd' ? 'markerData' : 'polygons'
|
|
|
+ let str = ''
|
|
|
+ // let str = this.mteStr === 'textAdd' ? 'markerData' : 'polygons'
|
|
|
+ if (this.mteStr === 'textAdd') {
|
|
|
+ str = 'markerData'
|
|
|
+ }
|
|
|
+ if (this.mteStr === 'polygonAdd') {
|
|
|
+ str = 'polygons'
|
|
|
+ }
|
|
|
+ if (this.mteStr === 'polylineAdd') {
|
|
|
+ str = 'polylines'
|
|
|
+ }
|
|
|
let tempData = [...this[str]]
|
|
|
if (this.mteStr === 'textAdd') {
|
|
|
tempData[index].content = obj.text
|
|
@@ -884,6 +973,7 @@ export default {
|
|
|
margin-right: 10px;
|
|
|
font-size: 14px;
|
|
|
text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
&:last-child {
|
|
|
margin-right: 0;
|
|
|
}
|