123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616 |
- <template>
- <div class="app-container">
- <div :class="isDbShow ? 'scoped-deal-box' : 'scoped-deal-box t2'">
- <div class="sdb-info">
- <div class="p1">当前缩放级别:{{mapDiyObj.zoom}}<span class="more" @click="setShowChange">{{isMapSetShow ? '收起设置' : '展开设置'}}></span></div>
- <div class="p2" v-show="isMapSetShow">
- <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="80px">
- <div slot="footer">
- <el-button class="xl-form-btn bgc2" @click="setHandle">设置</el-button>
- <div class="scoped-select-center" @click="setCenterHandle">中心坐标<div class="s">{{centerStr}}</div></div>
- </div>
- </base-form>
- </div>
- </div>
- <div class="sdb-add">
- <div class="b t2" @click="openMte('polygonAdd')">添加多边形</div>
- <div class="b t2" @click="openMte('textAdd')">添加文字</div>
- </div>
- <div class="sdb-add">
- <div class="b t3" @click="saveHandle()">保 存</div>
- </div>
- <div class="sdb-list" v-if="polygons.length > 0">
- <div class="label t2">多边形列表</div>
- <div class="ul">
- <div class="op" v-for="(polygon, index) in polygons" :key="index">
- <p class="p1" @click="openMte('polygonAdd', {obj: polygon, index})">{{polygon.text}}</p>
- <p class="more">
- <span v-if="polygon.editable" class="d d2" @click="textAdd(polygon)">标点</span>
- <span v-if="polygon.editable" class="d d1" @click="mapIsEdit(index, 'polygons')">编辑</span>
- <span v-else class="d d3" @click="mapIsEdit(index, 'polygons')">只读</span>
- <span class="d d4" @click="mapDel(index, 'polygons')">删除</span>
- </p>
- </div>
- </div>
- </div>
- <div class="sdb-list" v-if="markerData.length > 0">
- <div class="label t2">文字列表(选中:{{curMarkersIndex + 1}})</div>
- <div class="ul">
- <div class="op" v-for="(t, index) in markerData" :key="index">
- <p class="p1" @click="openMte('textAdd', {obj: t, index})">({{curMarkersIndex + 1}}){{t.content}}</p>
- <p class="more">
- <span v-if="t.draggable" class="d d1" @click="mapIsEdit(index, 'markerData')">编辑</span>
- <span v-else class="d d3" @click="mapIsEdit(index, 'markerData')">只读</span>
- <span class="d d4" @click="mapDel(index, 'markerData')">删除</span>
- </p>
- </div>
- </div>
- </div>
- </div>
- <el-amap
- class="amap-box"
- :vid="'amap-vue'"
- :amap-manager="amapManager"
- :zoom="mapDiyObj.zoom"
- :zooms="mapDiyObj.zooms"
- :mapStyle="mapDiyObj.mapStyle"
- :center="mapDiyObj.center"
- :events="events"
- :plugin="plugin"
- >
- <template v-if="mapDiyObj.zoom > 3">
- <el-amap-marker v-for="(marker, index) in markerData" :key="1000 + index"
- :position="marker.position"
- :draggable="marker.draggable"
- :animation="marker.animation"
- :offset="marker.offset"
- :events="markersEvents">
- <div class="scoped-marker-text" :style="`color: ${marker.color}`">{{marker.content}}</div>
- </el-amap-marker>
- </template>
- <el-amap-polygon
- v-for="(polygon, index) in polygons"
- :key="index"
- :path="polygon.path"
- :editable="polygon.editable"
- :fillColor="polygon.fillColor"
- :fillOpacity="polygon.fillOpacity"
- :strokeColor="polygon.strokeColor"
- :strokeWeight="polygon.strokeWeight"
- :strokeOpacity="polygon.strokeOpacity"
- :extData="{index}"
- :events="polygonEvents">
- </el-amap-polygon>
- </el-amap>
- <MapTextEdit
- :isShow="isMteShow"
- :mteStr="mteStr"
- :curObj="mteObj"
- @close="closeMte"/>
- </div>
- </template>
- <script>
- import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
- const amapManager = new AMapManager()
- import MapTextEdit from './components/popup/MapTextEdit'
- import { arrToObj } from '@/utils'
- export default {
- name: 'map',
- components: {
- MapTextEdit
- },
- mixins,
- data() {
- const that = this
- return {
- isDbShow: true,
- isMapSetShow: false,
- formData: [],
- isMteShow: false,
- mapDiyObj: {
- center: [115.852386, 28.684076],
- zoom: 17,
- zooms: [15, 19],
- },
- amapManager,
- polygons: [
- // {
- // path: [[115.823481,28.702359],[115.861933,28.672241],[115.812838,28.629609],[115.793784,28.657179]],
- // strokeWeight: 2,
- // fillColor: '#f00',
- // strokeStyle: 'solid',
- // },
- // {
- // path: [[115.859015,28.654919],[115.93386,28.630212],[115.841849,28.606101]],
- // editable: true,
- // strokeWeight: 1,
- // fillColor: '#ffffff',
- // strokeStyle: 'dashed',
- // },
- ],
- markerData: [],
- events: {
- init(map) {
- // map.setFeatures(['road', 'point', 'bg', 'building']); // 多个种类要素显示
- // map.setFeatures(['road']); // 多个种类要素显示
- // map.setMapStyle('amap://styles/647a4a7f773b3c7143b46e7c3e499f1f');
- AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
- //图层切换控件
- var layerControl = new BasicControl.LayerSwitcher({
- baseLayers: [
- {
- id: 'basic',//图层id,需唯一
- enable: true, //是否启用
- name: '基础地图',//显示名称,html
- layer: new AMap.TileLayer()
- },
- {
- id: 'Satellite',//图层id,需唯一
- enable: false, //是否启用
- name: '卫星图',//显示名称,html
- layer: new AMap.TileLayer.Satellite()
- },
- ],
- overlayLayers:[
- ],
- position: {
- bottom:'50px',
- right:'30px',
- },
- });
- map.addControl(layerControl);
- })
- },
- zoomchange (e) {
- const curMap = amapManager.getMap()
- that.mapDiyObj.zoom = curMap.getZoom() || 17
- },
- // click(e) {
- // const { lng, lat } = e.lnglat
- // console.log(lng, lat)
- // },
- },
- markersEvents: {
- dragend(e) {
- const { lng, lat } = e.lnglat
- let markerData = JSON.parse(JSON.stringify(that.markerData))
- markerData[that.curMarkersIndex].position = [lng, lat]
- that.markerData = [...markerData]
- },
- },
- polygonEvents: {
- click(e) {
- // console.log(e.target.getExtData())
- console.log(wx)
- console.log('abc')
- wx.miniProgram.navigateTo({url: '/pagesSchool/class'})
- },
- },
- curMarkersIndex: 0,
- plugin: [{
- pName: 'MouseTool',
- }],
- mteStr: 'polygonAdd',
- mteObj: {},
- }
- },
- computed: {
- centerStr () {
- const center = this.mapDiyObj.center
- if (center && center.length > 0) {
- return `${center[0]}, ${center[1]}`
- } else {
- return '待选取'
- }
- }
- },
- created() {
- this.getData()
- },
- mounted() {},
- methods: {
- setShowChange () {
- this.isMapSetShow = !this.isMapSetShow
- },
- getDef () {
- let params = {}
- params = { ...this.mapDiyObj }
- params.zoom1 = params.zooms[0]
- params.zoom2 = params.zooms[1]
- this.formData = [
- { label: '地图标题', key: 'title', rules: 1},
- { label: '主题样式', key: 'mapStyle', type: 'select', rules: 1,
- options: [
- {key: '默认样式', val: 'normal'},
- {key: '深色样式', val: 'dark'},
- {key: '浅色样式', val: 'light'},
- {key: '清新风格osm', val: 'fresh'},
- ]
- },
- { label: '显示内容', key: 'features', type: 'select', multiple: true, rules: 1,
- options: [
- {key: '区域面', val: 'bg'},
- {key: '兴趣点', val: 'point'},
- {key: '道路和标注', val: 'road'},
- {key: '建筑物', val: 'building'},
- ]
- },
- { label: '默认级别', key: 'zoom', rules: 1},
- { label: '最小3+', key: 'zoom1', rules: 1},
- { label: '最大19-', key: 'zoom2', rules: 1},
- ]
- this.setDefaultValue(params)
- this.setCurFeatures(params.features)
- },
- setCurFeatures (data) {
- window.setTimeout(() => {
- const curMap = this.amapManager.getMap()
- curMap.setFeatures(data)
- }, 500)
- },
- getData () {
- const query = this.$route.query
- this.$api.other.admmapcoordindetail({
- uuid: query.id
- }).then(res => {
- if (res.data) {
- const data = JSON.parse(res.data)
- this.polygons = [...data.polygons]
- this.markerData = [...data.markerData]
- this.mapDiyObj = {
- ...data.mapDiyObj,
- title: res.title,
- }
- } else {
- this.mapDiyObj = {
- mapStyle: 'light',
- zoom: 17,
- zooms: [15, 19],
- center: [115.852386, 28.684076],
- title: res.title,
- features: ['road', 'bg', 'building']
- }
- }
- this.getDef()
- })
- },
- setHandle () {
- this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
- if (valid) {
- const oldform = this.$refs.ruleForm.baseForm
- let newForm = { ...oldform }
- let mapDiyObj = { ...this.mapDiyObj }
- mapDiyObj.zoom = Number(newForm.zoom)
- mapDiyObj.zooms = [Number(newForm.zoom1), Number(newForm.zoom2)]
- mapDiyObj.title = newForm.title
- mapDiyObj.mapStyle = newForm.mapStyle
- mapDiyObj.features = newForm.features
- this.mapDiyObj = {...mapDiyObj}
- this.setCurFeatures(newForm.features)
- this.isMapSetShow = false
- }
- })
- },
- setCenterHandle () {
- const that = this
- const curMap = this.amapManager.getMap()
- let mouseTool = new AMap.MouseTool(curMap)
- mouseTool.marker({
- content: ' ',
- })
- that.isDbShow = false
- that.$msgs('请在地图上选择中心点')
- AMap.event.addListener(mouseTool,'draw',function(e){
- let cPath = e.obj.getPosition()
- let mapDiyObj = {...that.mapDiyObj}
- mapDiyObj.center = [cPath.lng, cPath.lat]
- that.mapDiyObj = {...mapDiyObj}
- that.$msg('中心坐标选取成功~如需重新选中心点,请再次点击中心坐标位置')
- that.isDbShow = true
- window.setTimeout(() => {
- mouseTool.close(true)
- }, 100)
- })
- },
- saveHandle () {
- this.$msg(`您确定要保存该数据(覆盖原来数据)吗?`, 'confirm', () => {
- let polygons = JSON.parse(JSON.stringify(this.polygons))
- polygons.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,
- markerData,
- mapDiyObj: this.mapDiyObj,
- }
- const query = this.$route.query
- this.$api.other.admmapcoordinedit({
- uuid: query.id,
- title: this.mapDiyObj.title,
- data: JSON.stringify(data)
- }).then(res => {
- this.getData()
- })
- })
- },
- polygonAdd (obj) {
- const that = this
- const curMap = this.amapManager.getMap()
- let mouseTool = new AMap.MouseTool(curMap)
- mouseTool.polygon({
- 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 polygons = [...that.polygons]
- polygons.push({
- path: tempPath,
- editable: true,
- fillColor: obj.fillColor || '#DC3021', // 填充色
- fillOpacity: obj.fillOpacity || 0.3, // 填充透明度
- strokeColor: obj.strokeColor || '#DC3021', // 轮廓颜色
- strokeWeight: 2, // 轮廓宽度
- strokeOpacity: 0.9, // 轮廓透明度
- text: obj.text,
- })
- that.polygons = [...polygons]
- mouseTool.close(true)
- that.isDbShow = true
- console.log(that.isDbShow)
- })
- },
- mapIsEdit (index, str) {
- this.curMarkersIndex = index
- let tempData = [...this[str]]
- if (str === 'polygons') {
- if (tempData[index].editable) {
- tempData[index].editable = false
- tempData[index].strokeStyle = 'solid'
- } else {
- tempData[index].editable = true
- tempData[index].strokeStyle = 'dashed'
- }
- } else {
- tempData[index].draggable = !tempData[index].draggable
- // tempData[index].animation = tempData[index].draggable ? 'AMAP_ANIMATION_BOUNCE' : 'AMAP_ANIMATION_DROP'
- }
- this[str] = [...tempData]
- this.$storage(`map_${str}`, JSON.stringify(tempData))
- },
- mapDel (index, str) {
- this.$msg(`您确定要删除该数据吗?`, 'confirm', () => {
- let tempData = [...this[str]]
- tempData.splice(index, 1)
- this[str] = [...tempData]
- this.$storage(`map_${str}`, JSON.stringify(tempData))
- })
- },
- openMte (str, obj) {
- this.mteStr = str
- this.isMteShow = true
- if (obj) {
- this.mteObj = {...obj}
- }
- },
- closeMte (obj, bcStr) {
- this.isMteShow = false
- if (obj) {
- if (bcStr && bcStr === 'edit') {
- const index = this.mteObj.index || 0
- console.log(this.mteObj)
- const str = this.mteStr === 'textAdd' ? 'markerData' : 'polygons'
- let tempData = [...this[str]]
- if (this.mteStr === 'textAdd') {
- tempData[index].content = obj.text
- tempData[index].text = obj.text
- tempData[index].color = obj.color
- } else {
- tempData[index].text = obj.text
- tempData[index].fillColor = obj.fillColor
- tempData[index].fillOpacity = obj.fillOpacity
- tempData[index].strokeColor = obj.strokeColor
- }
- this[str] = [...tempData]
- this.$storage(`map_${str}`, JSON.stringify(tempData))
- } else {
- this[this.mteStr](obj)
- this.isDbShow = false
- this.$msgs('请在地图上操作')
- }
- }
- this.mteObj = {}
- },
- textAdd (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 markerData = [...that.markerData]
- markerData.push({
- position: [cPath.lng, cPath.lat],
- draggable: true,
- animation: 'AMAP_ANIMATION_DROP',
- content: obj.text,
- offset: [0, -10],
- text: obj.text,
- color: obj.color,
- })
- that.markerData = [...markerData]
- window.setTimeout(() => {
- mouseTool.close(true)
- that.isDbShow = true
- }, 100)
- })
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .app-container {
- height: 100%;
- padding: 0;
- margin: 0;
- position: relative;
- .amap-box {
- height: 100%;
- }
- }
- .scoped-deal-box {
- background: #f2f2f2;
- box-shadow: 0 0 5px #666;
- position: absolute;
- z-index: 999;
- left: 0;
- top: 0;
- height: 100%;
- width: 220px;
- overflow-y: auto;
- overflow-x: hidden;
- &.t2 {
- opacity: 0.5;
- }
- .sdb-info {
- background: #fff;
- margin-bottom: 10px;
- padding: 10px 10px 0;
- .p1 {
- font-size: 14px;
- user-select: none;
- padding-bottom: 10px;
- .more {
- color: #409eff;
- text-decoration: underline;
- padding-left: 2px;
- cursor: pointer;
- }
- }
- .p2 {
- padding-bottom: 6px;
- }
- }
- .sdb-add {
- padding: 0 10px 10px;
- .b {
- display: inline-block;
- vertical-align: middle;
- border-radius: 0;
- background: #0c78b1;
- color: #fff;
- min-width: 60px;
- height: 36px;
- line-height: 36px;
- cursor: pointer;
- outline: none;
- padding: 0 10px;
- margin-right: 10px;
- font-size: 14px;
- text-align: center;
- &:last-child {
- margin-right: 0;
- }
- &.t2 {
- background: #409eff;
- }
- &.t3 {
- width: 177px;
- }
- }
- }
- .sdb-list {
- background: #fff;
- margin-bottom: 10px;
- padding-top: 10px;
- .label {
- margin-left: 10px;
- border-left: 4px solid #409eff;
- padding-left: 6px;
- &.t2 {
- border-left-color: #0c78b1;
- }
- }
- .ul {
- height: 300px;
- overflow-y: auto;
- }
- .op {
- border-bottom: 1px solid #dcdcdc;
- padding: 10px;
- .p1 {
- color: #313131;
- font-weight: bold;
- padding-bottom: 6px;
- }
- .more {
- .d {
- display: inline-block;
- vertical-align: middle;
- margin-right: 10px;
- padding: 0 6px;
- line-height: 20px;
- height: 20px;
- border: 1px solid #0c78b1;
- color: #0c78b1;
- border-radius: 6px;
- font-size: 12px;
- font-weight: bold;
- cursor: pointer;
- &.d2 {
- color: #409eff;
- border-color: #409eff;
- }
- &.d3 {
- color: #313131;
- border-color: #313131;
- }
- &.d4 {
- color: #f00;
- border-color: #f00;
- }
- }
- }
- }
- }
- }
- .scoped-marker-text {
- color: #fff;
- min-width: 100px;
- font-weight: bold;
- }
- .scoped-select-center {
- position: absolute;
- left: -75px;
- top: 0px;
- cursor: pointer;
- width: 60px;
- line-height: 14px;
- color: #313131;
- .s {
- color: #f00;
- font-size: 12px;
- }
- }
- </style>
|