极客观点
项目管理
HarmonyOS
当我画出底层覆盖物的时候，一切正常，在底层覆盖物上面画出二级覆盖物就会出现对角线，代码如下
<template>
<div class="amap-page-container">
<div id="map-container" ref="mapContainer"/>
<el-dialog :visible.sync="dialogFormVisible" :before-close="handleClose" title="修改地图信息" width="25%">
<el-form :model="form">
<el-form-item label-width="120px" label="该地图所属小组" prop="">
<el-select v-model="form.orgId" placeholder="请选择小组名称">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog()">取 消</el-button>
<el-button type="primary" @click="handEdit()">确 定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogVisible" :before-close="handleClose" title="添加地图信息" width="25%">
<span>确定要保存该地图图形？</span>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialog()">取 消</el-button>
<el-button type="primary" @click="handEdit()">确 定</el-button>
</span>
</el-dialog>
<el-button ref="mapButtonBack" class="mapButtonBack" type="success" @click.native="backto()"><i class="el-icon-back"/></el-button>
<el-button ref="mapButton" class="mapButtonMap" type="success" @click.native="handleEdit()">编辑<br>地图</el-button>
<el-button ref="mapButtonShe" class="mapButtonShe" type="success" @click.native="resetList(1)">编辑<br>社区</el-button>
<el-button ref="mapButtoncun" class="mapButtonCun" type="success" @click.native="resetList(2)">编辑<br>村组</el-button>
</div>
</template>
<script>
import { getAccountList, saveMap, personMapList } from '@/api/map/accountMap'
/** 地图 */
import { AMap } from '@/components/Map/AMap'
export default {
name: 'Map',
data() {
return {
map: null,
maps: null,
polygon: null, // 存储最后一个绘制的图形对象
polys: null, // 存储点击时获取的图形对象,用来判断是否点击得是同一个地图
mouseTool: null, // 存储绘制时地图对象
beginPoints: [], // 存点坐标
clickListener: null, // click事件对象
polygonEditor: null, // 存储需要修改的地图图形对象
dialogVisible: false, // 控制弹出层
dialogFormVisible: false, // 控制修改弹出层
temporaryOrgId: [], // 临时存储orgId的值以及每个地图ip
orgIdList: [], // 存储orgId的值，编辑的时候判断并显示选中的小组名
options: [], // 存储下拉列表
flag: true, // 判断是否清除多边形
windowInfo: null, // 地图弹出信息窗体
mouseMove: null,
// 测试
// 测试
// form表单变量
form: {
id: '',
orgId: this.$route.params.form.id,
orgName: this.$route.params.form.name,
mapIp: '',
orgLevel: this.$route.params.form.level
}
}
},
created() {
this.getList()
},
methods: {
initAMap() {
var _this = this
// 初始化地图
AMap(process.env.MAP_KEY).then(maps => {
_this.map = new maps.Map('map-container', {
center: [99.219438, 25.127817],
/* layers: [
// 卫星
new maps.TileLayer.Satellite(),
// 路网
new maps.TileLayer.RoadNet()
], */
zoom: 16,
resizeEnable: true
})
var marker = new maps.Marker({
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
position: [99.219438, 25.127817]
})
// 添加定位图标
_this.map.add(marker)
_this.maps = maps
// 判断是否有地图数据，有则循环遍历并展示
if (_this.beginPoints.length > 0) {
for (var i in _this.beginPoints) {
for (var index in _this.temporaryOrgId) {
if (_this.beginPoints[i] === _this.temporaryOrgId[index][1]) {
var polygon = new _this.maps.Polygon({
path: _this.beginPoints[i],
strokeColor: (_this.temporaryOrgId[index][4] === 1 ? 'red' : (_this.temporaryOrgId[index][4] === 2 ? 'yellow' : 'blue')),
strokeWeight: 10,
strokeOpacity: 0.4,
fillOpacity: 0.2,
fillColor: '#1791fc',
zIndex: 50
})
_this.map.add(polygon)
// 绑定各种事件
polygon.on('click', this.mapOnClick)
polygon.on('mouseover', this.mapMouseOver)
polygon.on('mouseout', this.mapMouseOut)
// _this.map.setFitView([mouseTool])
var list = [_this.temporaryOrgId[index][0], polygon, _this.temporaryOrgId[index][2], _this.temporaryOrgId[index][3]]
_this.orgIdList.push(list)
}
}
}
}
// 点击地图时候触发
_this.clickListener = maps.event.addListenerOnce(_this.map, 'click', _this.mapCreate)
// 点击地图并修改地图
}, e => {
console.log('地图加载失败', e)
})
},
end(event) {
// console.log('触发事件： end')
// event.target 即为编辑后的多边形对象
this.polygon = event.target
// 获取绘制的图形的坐标
const params = event.target.getPath()
var param = ''
for (var item in params) {
const ip = [params[item].lat, params[item].lng]
param += ip.toString() + '|'
}
for (var i in this.orgIdList) {
if (event.target === this.orgIdList[i][1]) {
this.form.orgId = this.orgIdList[i][0]
this.form.id = this.orgIdList[i][2]
this.form.orgName = this.orgIdList[i][3]
this.form.orgLevel = this.orgIdList[i][4]
}
}
this.flag = false
// 打开弹出层
this.dialogFormVisible = true
this.getAccountLists(param)
},
mapOnClick(e) { // 点击事件
if (this.$refs.mapButton.$el.innerHTML.indexOf('结束') > 0) {
// 移除鼠标事件
if (this.mouseTool != null) {
this.mouseTool.close(true)
}
var polygons = e.target
// 判断是否是点击的是同一个地图区域，如果是就不执行close方法
if (this.polygonEditor !== null && this.polys !== polygons) {
this.polygonEditor.close()
}
// 判断如果是同一个对象就不需要创建新的地图对象
if (this.polys !== polygons && typeof e.target.getPath === 'function') {
this.polygonEditor = new this.maps.PolyEditor(this.map, polygons)
// var polygonEditor = new this.maps.PolyEditor(this.map, polygons)
// 开始编辑
this.polygonEditor.open()
this.polygonEditor.on('end', this.end)
// 存储点击得地图对象
this.polys = polygons
} else if (this.polys === polygons) {
this.polygonEditor.open()
}
} else {
// 清除监听事件
// this.maps.event.removeListener(this.clickListener)
this.mapCreate(e)
}
},
mapCreate(e) {
var _this = this
this.beginPoints.push(e.lnglat)
// if (this.mouseTool === null) {
this.mouseTool = new this.maps.MouseTool(this.map)
// }
console.log(this.mouseTool.polygon)
this.mouseTool.polygon({
strokeColor: (_this.form.orgLevel === 1 ? 'red' : (_this.form.orgLevel === 2 ? 'yellow' : 'blue')),
// strokeOpacity: 1,
strokeWeight: 6,
// bubble: true,
strokeOpacity: 0.4,
fillColor: '#1791fc',
fillOpacity: 0.2,
// 线样式还支持 'dashed'
strokeStyle: 'solid'
})
this.mouseTool.on('draw', function(event) {
// event.obj 为绘制出来的覆盖物对象
_this.polygon = event.obj
// 获取绘制的图形的坐标
const params = event.obj.getPath()
var param = ''
for (var item in params) {
const ip = [params[item].lat, params[item].lng]
param += ip.toString() + '|'
}
_this.flag = true
_this.form.mapIp = param
// 打开弹出层
_this.dialogVisible = true
})
},
mapMouseOver(e) {
var info = []
for (var i in this.orgIdList) {
if (e.target === this.orgIdList[i][1]) {
info.push('<div style="padding:13px;">' + this.orgIdList[i][3] + '</div> ')
}
}
this.windowInfo = new this.maps.InfoWindow({
content: info.join('<br/>') // 使用默认信息窗体框样式，显示信息内容
})
var _this = this
this.mouseMove = this.maps.event.addListener(_this.map, 'mousemove', function(e) {
_this.windowInfo.open(_this.map, [e.lnglat.getLng(), e.lnglat.getLat()])
})
},
mapMouseOut(e) {
this.maps.event.removeListener(this.mouseMove)
this.windowInfo.close(true)
},
getAccountLists(param) {
// 获取小组的名称
var _this = this
this.form.mapIp = param
getAccountList().then(res => {
if (res.success) {
_this.options = res.data
} else {
_this.$notify({ title: '失败', message: '保存失败！', type: 'error', duration: 2000 })
}
})
},
getList(level) {
var _this = this
level = (level === undefined ? 0 : level)
if (this.map != null) {
// 清空地图上所有的原有图形
this.map.clearMap()
this.beginPoints = []
}
personMapList(level).then(res => {
if (res.success && res.data.length > 0) {
// 循环遍历所有的地图区域
for (var index in res.data) {
// 对地图数据进行处理
const params = res.data[index].mapIp.toString().split('|')
// 临时储存每条地图信息
const paramsList = []
for (var i = 0; i < params.length; i++) {
var param = [Number(params[i].toString().split(',')[1]), Number(params[i].toString().split(',')[0])]
// 最后一个元素不添加进去
if (i !== params.length - 1) {
paramsList.push(param)
}
}
_this.beginPoints.push(paramsList)
var arry = [res.data[index].orgId, paramsList, res.data[index].id, res.data[index].orgName, res.data[index].orgLevel]
_this.temporaryOrgId.push(arry)
}
}
_this.initAMap()
})
},
// 存新建的地图
handEdit() {
saveMap(this.form).then(res => {
if (res.success) {
this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
this.getList()
} else {
this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
}
this.closeDialog()
}).catch(() => {
this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
this.closeDialog()
})
},
// 修改地图信息
handleEdit() {
var _this = this
if (this.$refs.mapButton.$el.innerHTML.indexOf('结束') > 0) {
// 还原地图并进行绘图
this.$refs.mapButton.$el.innerHTML = '<!----><!----><span>编辑<br data-v-62496e35="">地图</span>'
if (this.polys != null) {
this.polygonEditor.close()
}
this.maps.event.addListenerOnce(_this.map, 'click', _this.mapCreate)
} else {
// 进入编辑修改地图
this.$refs.mapButton.$el.innerHTML = '<!----><!----><span>结束<br data-v-62496e35="">编辑</span>'
// 清除监听事件
this.maps.event.removeListener(this.clickListener)
// 判断是否正在创建地图，如果创建地图就清除创建动作
if (this.mouseTool != null) {
this.mouseTool.close(true)
}
}
},
closeDialog() {
this.dialogVisible = false
this.dialogFormVisible = false
debugger
console.log(this.polygon.getPath().length)
if (this.flag) {
this.map.remove(this.polygon)
}
this.form.mapIp = null
},
handleClose(done) {
this.$confirm('确认放弃本次操作并关闭？')
.then(_ => {
done()
this.closeDialog()
})
.catch(_ => {})
},
resetList(level) {
this.getList(level)
// 进入编辑修改地图
this.$refs.mapButton.$el.innerHTML = '<!----><!----><span>结束<br data-v-62496e35="">编辑</span>'
// 清除监听事件
this.maps.event.removeListener(this.clickListener)
// 判断是否正在创建地图，如果创建地图就清除创建动作
if (this.mouseTool != null) {
this.mouseTool.close(true)
}
},
backto() {
this.$router.push({ path: '/sys/organ' })
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.amap-page-container {
height: 100%;
}
#map-container {
height: 100%;
}
.mapButtonMap{
padding:13px;
position:fixed;
bottom: 46px;
right: 33px;
border-radius: 50%;
background-color:#409EFF;
border:0;
}
.mapButtonCun{
padding:13px;
position:fixed;
bottom: 106px;
right: 33px;
border-radius: 50%;
background-color:#409EFF;
border:0;
}
.mapButtonShe{
padding:13px;
position:fixed;
bottom: 166px;
right: 33px;
border-radius: 50%;
background-color:#409EFF;
border:0;
}
.mapButtonBack{
padding:13px;
position:fixed;
top: 33px;
left: 33px;
border-radius: 50%;
background-color:rgba(0,0,0,0.4);
border:0;
}
</style>
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）