|
|
@@ -0,0 +1,1503 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="scoped-top-tips" v-show="!isDeal">洪楼plus小程序提示：点击图中区域、楼盘、学校可查看更多</div>
|
|
|
+ <div class="scoped-bg"></div>
|
|
|
+ <div v-if="$route.query.id === '95542fdc-b542-4582-9be2-9ab8005728d3' || $route.query.id === '95542ff1-8176-4267-8344-2aa7f1034ac5'" class="scoped-tab">
|
|
|
+ <div @click="linkChange('95542fdc-b542-4582-9be2-9ab8005728d3')" :class="$route.query.id === '95542fdc-b542-4582-9be2-9ab8005728d3' ? 'op cur' : 'op'">小学</div>
|
|
|
+ <div @click="linkChange('95542ff1-8176-4267-8344-2aa7f1034ac5')" :class="$route.query.id === '95542ff1-8176-4267-8344-2aa7f1034ac5' ? 'op cur' : 'op'">初中</div>
|
|
|
+ </div>
|
|
|
+ <!-- https://img2.honglounews.com/20220111024440-5626.png -->
|
|
|
+ <div v-show="isDeal" :class="isDbShow ? 'scoped-deal-box' : 'scoped-deal-box t2'">
|
|
|
+ <div class="sdb-list">
|
|
|
+ <div class="label t2">多边形列表(选中:{{polygonIndex + 1}})
|
|
|
+ <div class="xl-form" style="position: absolute;right: 20px;top: 0;">
|
|
|
+ <el-button icon="el-icon-plus" class="xl-form-btn bgc2" @click="openMte('polygonAdd')">添加</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <search-form
|
|
|
+ @change="getList"
|
|
|
+ @add="openMte('polygonAdd')"
|
|
|
+ /> -->
|
|
|
+ <div class="ul">
|
|
|
+ <div class="op" v-for="(polygon, index) in polygons" :key="index">
|
|
|
+ <p class="p1" @click="openMte('polygonAdd', {obj: polygon, index})">({{index + 1}}){{polygon.text}}</p>
|
|
|
+ <p class="more">
|
|
|
+ <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-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('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>
|
|
|
+ </div>
|
|
|
+ <div class="sdb-add">
|
|
|
+ <div class="b t3" @click="saveHandle()">设置保存</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">
|
|
|
+ <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" v-if="markerData[0].icon">图标列表(选中:{{curMarkersIndex + 1}})</div>
|
|
|
+ <div class="label t2" v-else>文字列表(选中:{{curMarkersIndex + 1}})</div>
|
|
|
+ <div class="ul">
|
|
|
+ <div class="op" v-for="(t, index) in markerData" :key="index">
|
|
|
+ <p class="p1" v-if="t.icon" @click="openImg({obj: t, index})">({{index + 1}}){{t.text}}</p>
|
|
|
+ <p class="p1" v-else @click="openMte('textAdd', {obj: t, index})">({{index + 1}}){{t.content || t.text}}</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="mapEvents"
|
|
|
+ :plugin="plugin"
|
|
|
+ >
|
|
|
+ <template v-if="mapDiyObj.zoom > 12">
|
|
|
+ <template v-if="mapDiyObj.isSchoolShow === '1'">
|
|
|
+ <el-amap-marker class="scoped-m-box" v-for="(marker, index) in schoolList" :key="3000 + index"
|
|
|
+ icon="https://img2.honglounews.com/20220110041435-6276.png"
|
|
|
+ width="20"
|
|
|
+ height="20"
|
|
|
+ :position="marker.position"
|
|
|
+ :events="schoolEvents"
|
|
|
+ :title="marker.school_name"
|
|
|
+ :label="{content: marker.school_name, offset: [-10 * marker.school_name.length / 2, -20]}"
|
|
|
+ :extData="{id: marker.id}"
|
|
|
+ >
|
|
|
+ </el-amap-marker>
|
|
|
+ </template>
|
|
|
+ <template v-if="mapDiyObj.isEstateShow === '1'">
|
|
|
+ <el-amap-marker class="scoped-m-box" v-for="(marker, index) in estateList" :key="2000 + index"
|
|
|
+ icon="https://img2.honglounews.com/20220110041411-6675.png"
|
|
|
+ :position="marker.position"
|
|
|
+ :events="estateEvents"
|
|
|
+ :title="marker.estate_name"
|
|
|
+ :label="{content: marker.estate_name, offset: [-10 * marker.estate_name.length / 2, -20]}"
|
|
|
+ :extData="{id: marker.id}"
|
|
|
+ >
|
|
|
+ <!-- https://img2.honglounews.com/20220110041534-8330.png -->
|
|
|
+ <!-- https://img2.honglounews.com/20220110041411-6675.png -->
|
|
|
+ </el-amap-marker>
|
|
|
+ </template>
|
|
|
+ <el-amap-marker v-for="(marker, index) in markerData" :key="9000 + index"
|
|
|
+ :position="marker.position"
|
|
|
+ :draggable="marker.draggable"
|
|
|
+ :animation="marker.animation"
|
|
|
+ :offset="marker.offset"
|
|
|
+ :extData="{index}"
|
|
|
+ :icon="marker.icon"
|
|
|
+ :events="markersEvents">
|
|
|
+ <div class="scoped-marker-text" v-if="!marker.icon" :style="`color: ${marker.color}`">{{marker.content}}</div>
|
|
|
+ </el-amap-marker>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <template v-if="mapDiyObj.isAreaShow === '1'">
|
|
|
+ <el-amap-marker class="scoped-m-box" v-for="(marker, index) in areaList" :key="4000 + index"
|
|
|
+ icon="https://img2.honglounews.com/20220110041435-6276.png"
|
|
|
+ :position="marker.position"
|
|
|
+ :events="areaEvents"
|
|
|
+ :offset="[-40, -40]"
|
|
|
+ :extData="{areaName: marker.areaName, areaType: marker.area_type}"
|
|
|
+ >
|
|
|
+ <div class="scoped-marker-area">
|
|
|
+ <div class="p1">{{marker.areaName}}</div>
|
|
|
+ <div class="p2">楼盘:{{marker.estate_total}}</div>
|
|
|
+ <div class="p2">学校:{{marker.school_total}}</div>
|
|
|
+ </div>
|
|
|
+ </el-amap-marker>
|
|
|
+ </template>
|
|
|
+ </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"
|
|
|
+ :strokeStyle="polygon.strokeStyle"
|
|
|
+ :extData="{index}"
|
|
|
+ :events="polygonEvents">
|
|
|
+ </el-amap-polygon>
|
|
|
+ <el-amap-polyline
|
|
|
+ v-for="(polyline, index) in polylines"
|
|
|
+ :key="20000 + index"
|
|
|
+ :editable="polyline.editable"
|
|
|
+ :fillColor="polyline.fillColor"
|
|
|
+ :fillOpacity="polyline.fillOpacity"
|
|
|
+ :strokeColor="polyline.strokeColor"
|
|
|
+ :strokeWeight="polyline.strokeWeight"
|
|
|
+ :strokeOpacity="polyline.strokeOpacity"
|
|
|
+ :strokeStyle="polyline.strokeStyle"
|
|
|
+ :extData="{index}"
|
|
|
+ :events="polylineEvents"
|
|
|
+ :path="polyline.path">
|
|
|
+ </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"
|
|
|
+ :mteStr="mteStr"
|
|
|
+ :curObj="mteObj"
|
|
|
+ @close="closeMte"/>
|
|
|
+ <MapImgEdit
|
|
|
+ :isShow="isImgShow"
|
|
|
+ :curObj="mteObj"
|
|
|
+ @close="closeImg"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
|
|
|
+const amapManager = new AMapManager()
|
|
|
+import MapImgEdit from './components/popup/MapImgEdit'
|
|
|
+import SearchForm from './components/searchForm/Dtl2'
|
|
|
+import MapTextEdit from './components/popup/MapTextEdit'
|
|
|
+import { arrToObj } from '@/utils'
|
|
|
+export default {
|
|
|
+ name: 'map',
|
|
|
+ components: {
|
|
|
+ MapTextEdit,
|
|
|
+ MapImgEdit,
|
|
|
+ SearchForm,
|
|
|
+ },
|
|
|
+ mixins,
|
|
|
+ data() {
|
|
|
+ const that = this
|
|
|
+ return {
|
|
|
+ isImgShow: false,
|
|
|
+ polylines: [],
|
|
|
+ circles: [],
|
|
|
+ estateList: [],
|
|
|
+ schoolList: [],
|
|
|
+ medium_school_list: [],
|
|
|
+ small_school_list: [],
|
|
|
+ areaList: [],
|
|
|
+ isDbShow: true,
|
|
|
+ isMapSetShow: false,
|
|
|
+ formData: [],
|
|
|
+ isMteShow: false,
|
|
|
+ mapDiyObj: {
|
|
|
+ center: [115.852386, 28.684076],
|
|
|
+ zoom: 17,
|
|
|
+ zooms: [15, 19],
|
|
|
+ },
|
|
|
+ amapManager,
|
|
|
+ winObj: {
|
|
|
+ position: [115.852386, 28.684076],
|
|
|
+ content: '',
|
|
|
+ },
|
|
|
+ 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: [],
|
|
|
+ mapEvents: {
|
|
|
+ init(map) {
|
|
|
+ // map.setFeatures(['road', 'point', 'bg', 'building']); // 多个种类要素显示
|
|
|
+ map.setFeatures(['road', 'bg', 'building']); // 多个种类要素显示
|
|
|
+ // map.setMapStyle('amap://styles/647a4a7f773b3c7143b46e7c3e499f1f');
|
|
|
+ AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
|
|
|
+ //图层切换控件
|
|
|
+ var layerControl = new BasicControl.LayerSwitcher({
|
|
|
+ baseLayers: [
|
|
|
+ {
|
|
|
+ id: 'Satellite',//图层id，需唯一
|
|
|
+ enable: true, //是否启用
|
|
|
+ name: '卫星图',//显示名称，html
|
|
|
+ layer: new AMap.TileLayer.Satellite()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'basic',//图层id，需唯一
|
|
|
+ enable: false, //是否启用
|
|
|
+ name: '基础地图',//显示名称，html
|
|
|
+ layer: new AMap.TileLayer()
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ overlayLayers:[
|
|
|
+ ],
|
|
|
+ position: {
|
|
|
+ left:'230px',
|
|
|
+ top:'2px',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ map.addControl(layerControl);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ zoomchange (e) {
|
|
|
+ const curMap = amapManager.getMap()
|
|
|
+ that.mapDiyObj.zoom = curMap.getZoom() || 17
|
|
|
+ },
|
|
|
+ complete () {
|
|
|
+ that.setCurFeatures(that.mapDiyObj.features)
|
|
|
+ },
|
|
|
+ // click(e) {
|
|
|
+ // const { lng, lat } = e.lnglat
|
|
|
+ // console.log(lng, lat)
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ markersEvents: {
|
|
|
+ dragend(e) {
|
|
|
+ const eData = e.target.getExtData()
|
|
|
+ that.curMarkersIndex = eData.index
|
|
|
+ const { lng, lat } = e.lnglat
|
|
|
+ let markerData = JSON.parse(JSON.stringify(that.markerData))
|
|
|
+ markerData[that.curMarkersIndex].position = [lng, lat]
|
|
|
+ that.markerData = [...markerData]
|
|
|
+ },
|
|
|
+ click(e) {
|
|
|
+ const eData = e.target.getExtData()
|
|
|
+ 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()
|
|
|
+ that.polygonIndex = eData.index
|
|
|
+ const lnglatObj = e.lnglat
|
|
|
+ const cObj = that.polygons[that.polygonIndex]
|
|
|
+ const estateObj = cObj.estateObj ? JSON.parse(cObj.estateObj) : {}
|
|
|
+ const schoolObj = cObj.schoolObj ? JSON.parse(cObj.schoolObj) : {}
|
|
|
+ const typeObj = {
|
|
|
+ '#ff0': '新楼盘',
|
|
|
+ '#bb9c2c': '二手房',
|
|
|
+ '#e8d0e6': '还建房',
|
|
|
+ '#ff9149': '幼儿园',
|
|
|
+ '#ff7fbf': '小学初中',
|
|
|
+ '#e77ad4': '高中',
|
|
|
+ '#fb6557': '中大专本科',
|
|
|
+ '#ff003f': '纯商业',
|
|
|
+ '#999': '商业综合体',
|
|
|
+ '#007299': '公用设施',
|
|
|
+ '#00ff3f': '公园用地',
|
|
|
+ '#4da4ee': '医院用地',
|
|
|
+ }
|
|
|
+ that.winObj.position = [lnglatObj.lng, lnglatObj.lat]
|
|
|
+ if (estateObj.id) {
|
|
|
+ const ptObj = arrToObj(that.$dictData.product_type)
|
|
|
+ const ptArr = estateObj.product_type.split(',')
|
|
|
+ let ptStrArr = []
|
|
|
+ ptArr.forEach(n => {
|
|
|
+ ptStrArr.push(ptObj[n])
|
|
|
+ })
|
|
|
+ const productTypeStr = ptStrArr.join(',')
|
|
|
+ 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:#409eff;user-select: none;margin-bottom: 6px;text-align: left;font-size: 12px;">${cObj.text}</div>
|
|
|
+ <div style="display: flex;padding-left: 6px;">
|
|
|
+ <div style="width: 80px;">
|
|
|
+ <img style="width: 80px;height: auto;" src="${estateObj.pri_image}_xs" />
|
|
|
+ </div>
|
|
|
+ <div style="width: 140px;">
|
|
|
+ <div style="padding: 0 6px 6px;color: #999;font-size: 12px;color: #f00;font-weight: bold;">价格：￥${estateObj.price_range}</div>
|
|
|
+ <div style="padding: 0 6px 6px;color: #999;font-size: 12px;">类型：${typeObj[cObj.fillColor] || '其它'}</div>
|
|
|
+ <div style="padding: 0 6px 6px;color: #999;font-size: 12px;">产品：${productTypeStr}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ } else if (schoolObj.id) {
|
|
|
+ const saObj = arrToObj(that.$dictData.school_attrib)
|
|
|
+ const stObj = arrToObj(that.$dictData.school_type)
|
|
|
+ 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:#409eff;user-select: none;margin-bottom: 6px;text-align: left;font-size: 12px;">${cObj.text}</div>
|
|
|
+ <div style="display: flex;padding-left: 6px;">
|
|
|
+ <div style="width: 80px;">
|
|
|
+ <img style="width: 80px;height: auto;" src="${schoolObj.pri_image}_xs" />
|
|
|
+ </div>
|
|
|
+ <div style="width: 160px;">
|
|
|
+ <div style="padding: 0 6px 6px;color: #999;font-size: 12px;color: #f00;font-weight: bold;">${saObj[schoolObj.school_attrib]}、${stObj[schoolObj.school_type]}</div>
|
|
|
+ <div style="padding: 0 6px 6px;color: #999;font-size: 12px;">备注：${schoolObj.remarked}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ } else {
|
|
|
+ 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:#409eff;user-select: none;margin-bottom: 6px;text-align: left;font-size: 12px;">${cObj.text}</div>
|
|
|
+ <div style="padding: 0 6px 6px;color: #999;font-size: 12px;">类型：${typeObj[cObj.fillColor] || '其它'}</div>
|
|
|
+ <div style="padding: 0 6px 6px;color: #999;font-size: 12px;">状态：${cObj.strokeStyle === 'dashed' ? '规划中' : '已规划'}</div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ polylineEvents: {
|
|
|
+ click(e) {
|
|
|
+ const eData = e.target.getExtData()
|
|
|
+ that.polylineIndex = eData.index
|
|
|
+ },
|
|
|
+ },
|
|
|
+ estateEvents: {
|
|
|
+ click(e) {
|
|
|
+ const eData = e.target.getExtData()
|
|
|
+ wx.miniProgram.navigateTo({url: `/pagesHouse/indexDtl?id=${eData.id}`})
|
|
|
+ },
|
|
|
+ },
|
|
|
+ schoolEvents: {
|
|
|
+ click(e) {
|
|
|
+ const eData = e.target.getExtData()
|
|
|
+ wx.miniProgram.navigateTo({url: `/pagesSchool/indexDtl?id=${eData.id}`})
|
|
|
+ },
|
|
|
+ },
|
|
|
+ areaEvents: {
|
|
|
+ click(e) {
|
|
|
+ const eData = e.target.getExtData()
|
|
|
+ wx.miniProgram.navigateTo({url: `/pagesSchool/index?areaName=${eData.areaName}&areaType=${eData.areaType}`})
|
|
|
+ },
|
|
|
+ },
|
|
|
+ polygonIndex: 0,
|
|
|
+ polylineIndex: 0,
|
|
|
+ curMarkersIndex: 0,
|
|
|
+ circleIndex: 0,
|
|
|
+ plugin: [{
|
|
|
+ pName: 'MouseTool',
|
|
|
+ }],
|
|
|
+ mteStr: 'polygonAdd',
|
|
|
+ mteObj: {},
|
|
|
+ dictData: {
|
|
|
+ sys_yesno: [
|
|
|
+ {key: '是', val: '1'},
|
|
|
+ {key: '否', val: '2'},
|
|
|
+ ],
|
|
|
+ area_type: [
|
|
|
+ {
|
|
|
+ "key": "红谷滩中心区",
|
|
|
+ "val": "hgt"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "红角洲",
|
|
|
+ "val": "hjz"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "朝阳新城",
|
|
|
+ "val": "cyxc"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "九龙湖",
|
|
|
+ "val": "jlh"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "凤凰洲",
|
|
|
+ "val": "fhz"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "西湖区",
|
|
|
+ "val": "xhq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "东湖区",
|
|
|
+ "val": "dhq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "象湖滨江",
|
|
|
+ "val": "xhbj"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "青山湖区",
|
|
|
+ "val": "qshq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "新建区",
|
|
|
+ "val": "xjq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "湾里区",
|
|
|
+ "val": "wlq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "青云谱区",
|
|
|
+ "val": "qypq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "高新区",
|
|
|
+ "val": "gxq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "欣悦湖",
|
|
|
+ "val": "xyh"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "经开区",
|
|
|
+ "val": "jkq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "象湖新城",
|
|
|
+ "val": "xhxc"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "望城",
|
|
|
+ "val": "wcxq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "南昌县",
|
|
|
+ "val": "ncx"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "key": "赣江新区",
|
|
|
+ "val": "gjxq"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ map_area_lnglat: [
|
|
|
+ {
|
|
|
+ "option1": "望城",
|
|
|
+ "key": "115.74219,28.622854",
|
|
|
+ "val": "wcxq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "湾里区",
|
|
|
+ "key": "115.781385,28.709504",
|
|
|
+ "val": "wlq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "欣悦湖",
|
|
|
+ "key": "115.787513,28.685376",
|
|
|
+ "val": "xyh"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "九龙湖",
|
|
|
+ "key": "115.792951,28.587435",
|
|
|
+ "val": "jlh"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "新建区",
|
|
|
+ "key": "115.818441,28.692623",
|
|
|
+ "val": "xjq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "红角洲",
|
|
|
+ "key": "115.824219,28.63926",
|
|
|
+ "val": "hjz"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "经开区",
|
|
|
+ "key": "115.830506,28.747641",
|
|
|
+ "val": "jkq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "象湖滨江",
|
|
|
+ "key": "115.847217,28.582374",
|
|
|
+ "val": "xhbj"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "红谷滩中心区",
|
|
|
+ "key": "115.852886,28.683902",
|
|
|
+ "val": "hgt"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "朝阳新城",
|
|
|
+ "key": "115.858884,28.633789",
|
|
|
+ "val": "cyxc"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "凤凰洲",
|
|
|
+ "key": "115.875846,28.709236",
|
|
|
+ "val": "fhz"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "西湖区",
|
|
|
+ "key": "115.889966,28.664366",
|
|
|
+ "val": "xhq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "东湖区",
|
|
|
+ "key": "115.901112,28.680259",
|
|
|
+ "val": "dhq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "青云谱区",
|
|
|
+ "key": "115.908247,28.623327",
|
|
|
+ "val": "qypq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "南昌县",
|
|
|
+ "key": "115.932183,28.550813",
|
|
|
+ "val": "ncx"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "赣江新区",
|
|
|
+ "key": "115.93303,28.803368",
|
|
|
+ "val": "gjxq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "青山湖区",
|
|
|
+ "key": "115.949679,28.701298",
|
|
|
+ "val": "qshq"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "option1": "高新区",
|
|
|
+ "key": "116.033624,28.697981",
|
|
|
+ "val": "gxq"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isDeal () {
|
|
|
+ const query = this.$route.query
|
|
|
+ if (query.e && query.e === '1') {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ centerStr () {
|
|
|
+ const center = this.mapDiyObj.center
|
|
|
+ if (center && center.length > 0) {
|
|
|
+ return `${center[0]}, ${center[1]}`
|
|
|
+ } else {
|
|
|
+ return '待选取'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ this.getData()
|
|
|
+ return
|
|
|
+ this.$api.base.apiareainfolist().then(areaArr => {
|
|
|
+ const arr = areaArr.map((a, aIndex) => {
|
|
|
+ return {
|
|
|
+ key: aIndex,
|
|
|
+ val: a.option1,
|
|
|
+ longitude: a.longitude,
|
|
|
+ latitude: a.latitude,
|
|
|
+ areaName: a.area_name,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$api.other.admmapcoordinall().then(res => {
|
|
|
+ let estateList = res.estate_list || []
|
|
|
+ estateList.map(item => {
|
|
|
+ item.position = [item.longitude, item.latitude]
|
|
|
+ })
|
|
|
+ this.estateList = [...estateList]
|
|
|
+
|
|
|
+ const query = this.$route.query
|
|
|
+ if (query.id === '95542fdc-b542-4582-9be2-9ab8005728d3') {
|
|
|
+ let small_school_list = res.small_school_list || []
|
|
|
+ small_school_list.map(item => {
|
|
|
+ item.position = [item.longitude, item.latitude]
|
|
|
+ })
|
|
|
+ this.schoolList = [...small_school_list]
|
|
|
+ } else if (query.id === '95542ff1-8176-4267-8344-2aa7f1034ac5') {
|
|
|
+ let medium_school_list = res.medium_school_list || []
|
|
|
+ medium_school_list.map(item => {
|
|
|
+ item.position = [item.longitude, item.latitude]
|
|
|
+ })
|
|
|
+ this.schoolList = [...medium_school_list]
|
|
|
+ } else {
|
|
|
+ let schoolList = res.school_list || []
|
|
|
+ schoolList.map(item => {
|
|
|
+ item.position = [item.longitude, item.latitude]
|
|
|
+ })
|
|
|
+ this.schoolList = [...schoolList]
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ let areaList = res.area_total || []
|
|
|
+ let newAreaList = []
|
|
|
+ areaList.forEach(item => {
|
|
|
+ // let lnglatArr = arrToObj(this.dictData.map_area_lnglat)[item.area_type].split(',')
|
|
|
+ // item.position = [lnglatArr[0], lnglatArr[1]]
|
|
|
+ // item.areaName = arrToObj(this.dictData.area_type)[item.area_type]
|
|
|
+ const areaIndex = arrToObj(arr)[item.area_type]
|
|
|
+ if (arr[areaIndex] && arr[areaIndex].longitude) {
|
|
|
+ newAreaList.push({
|
|
|
+ ...item,
|
|
|
+ position: [arr[areaIndex].longitude, arr[areaIndex].latitude],
|
|
|
+ areaName: arr[areaIndex].areaName
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.areaList = [...newAreaList]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ linkChange (str) {
|
|
|
+ const query = this.$route.query
|
|
|
+ if (query.e) {
|
|
|
+ this.$router.push(`/map/dtl?e=${query.e}&id=${str}`)
|
|
|
+ } else {
|
|
|
+ this.$router.push(`/map/dtl?id=${str}`)
|
|
|
+ }
|
|
|
+ this.$router.go(0)
|
|
|
+ },
|
|
|
+ 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},
|
|
|
+ // { label: '展示楼盘', key: 'isEstateShow', type: 'select', rules: 1, options: this.dictData.sys_yesno},
|
|
|
+ // { label: '展示学校', key: 'isSchoolShow', type: 'select', rules: 1, options: this.dictData.sys_yesno},
|
|
|
+ // { label: '展示区域', key: 'isAreaShow', type: 'select', rules: 1, options: this.dictData.sys_yesno},
|
|
|
+ ]
|
|
|
+ this.setDefaultValue(params)
|
|
|
+ // this.setCurFeatures(params.features)
|
|
|
+ },
|
|
|
+ setCurFeatures (data) {
|
|
|
+ const curMap = this.amapManager.getMap()
|
|
|
+ curMap.setFeatures(data)
|
|
|
+ },
|
|
|
+ getList (params) {
|
|
|
+ const query = this.$route.query
|
|
|
+ this.$api.other.admmapcoordindatalist({
|
|
|
+ map_id: query.id
|
|
|
+ }).then(res => {
|
|
|
+ let polygons = res.map(item => {
|
|
|
+ const d = JSON.parse(item.data)
|
|
|
+ console.log(d.path[0])
|
|
|
+ return {
|
|
|
+ ...d,
|
|
|
+ longitude: item.longitude,
|
|
|
+ latitude: item.latitude,
|
|
|
+ id: item.id,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.polygons = [...polygons]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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.winObj = {
|
|
|
+ content: `
|
|
|
+ <div style="font-weight: bold;color:#409eff;padding: 6px;background:#fff;border-radius: 6px;user-select: none;font-size: 12px;">${data.mapDiyObj.title}</div>
|
|
|
+ `,
|
|
|
+ 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] : []
|
|
|
+ this.markerData = [...data.markerData]
|
|
|
+ this.mapDiyObj = {
|
|
|
+ ...data.mapDiyObj,
|
|
|
+ title: res.title,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.mapDiyObj = {
|
|
|
+ mapStyle: 'normal',
|
|
|
+ zoom: 13,
|
|
|
+ zooms: [11, 19],
|
|
|
+ center: [115.852386, 28.684076],
|
|
|
+ isEstateShow: '2',
|
|
|
+ isSchoolShow: '2',
|
|
|
+ isAreaShow: '2',
|
|
|
+ title: res.title,
|
|
|
+ features: ['road', 'bg', 'building']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ document.title = res.title || '洪楼地图1'
|
|
|
+ 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
|
|
|
+ mapDiyObj.isEstateShow = newForm.isEstateShow
|
|
|
+ mapDiyObj.isSchoolShow = newForm.isSchoolShow
|
|
|
+ mapDiyObj.isAreaShow = newForm.isAreaShow
|
|
|
+ this.mapDiyObj = {...mapDiyObj}
|
|
|
+ this.setCurFeatures(newForm.features)
|
|
|
+ this.isMapSetShow = false
|
|
|
+ this.saveHandle()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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 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
|
|
|
+ // if (one.icon === 'https://img2.honglounews.com/20221216021336-9631.png') {
|
|
|
+ // one.icon = 'https://img2.honglounews.com/20221216033134-4172.png'
|
|
|
+ // }
|
|
|
+ // if (one.icon === 'https://img2.honglounews.com/20221216021406-2208.png') {
|
|
|
+ // one.icon = 'https://img2.honglounews.com/20221216033029-9699.png'
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ const data = {
|
|
|
+ polylines,
|
|
|
+ markerData,
|
|
|
+ mapDiyObj: this.mapDiyObj,
|
|
|
+ }
|
|
|
+ // console.log(markerData)
|
|
|
+ // return
|
|
|
+ const query = this.$route.query
|
|
|
+ this.$api.other.admmapcoordinedit({
|
|
|
+ uuid: query.id,
|
|
|
+ title: this.mapDiyObj.title,
|
|
|
+ data: JSON.stringify(data)
|
|
|
+ }).then(res => {
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCenterPoint(geoCoordinateList) {
|
|
|
+ const geoCoordinateListFlat = geoCoordinateList.reduce((s, v) => {
|
|
|
+ return (s = s.concat(v))
|
|
|
+ }, [])
|
|
|
+ const total = geoCoordinateListFlat.length
|
|
|
+ let X = 0
|
|
|
+ let Y = 0
|
|
|
+ let Z = 0
|
|
|
+ for (const g of geoCoordinateListFlat) {
|
|
|
+ const lat = g.lat * Math.PI / 180
|
|
|
+ const lon = g.lng * Math.PI / 180
|
|
|
+ const x = Math.cos(lat) * Math.cos(lon)
|
|
|
+ const y = Math.cos(lat) * Math.sin(lon)
|
|
|
+ const z = Math.sin(lat)
|
|
|
+ X += x
|
|
|
+ Y += y
|
|
|
+ Z += z
|
|
|
+ }
|
|
|
+
|
|
|
+ X = X / total
|
|
|
+ Y = Y / total
|
|
|
+ Z = Z / total
|
|
|
+ const Lon = Math.atan2(Y, X)
|
|
|
+ const Hyp = Math.sqrt(X * X + Y * Y)
|
|
|
+ const Lat = Math.atan2(Z, Hyp)
|
|
|
+
|
|
|
+ return { lng: Lon * 180 / Math.PI, lat: Lat * 180 / Math.PI }
|
|
|
+ },
|
|
|
+ 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])
|
|
|
+ })
|
|
|
+ const lnglatObj = that.getCenterPoint(cPath)
|
|
|
+ const query = that.$route.query
|
|
|
+ const params = {
|
|
|
+ map_id: query.id,
|
|
|
+ longitude: lnglatObj.lng,
|
|
|
+ latitude: lnglatObj.lat,
|
|
|
+ data: JSON.stringify({
|
|
|
+ path: tempPath,
|
|
|
+ editable: true,
|
|
|
+ fillColor: obj.fillColor || '#DC3021', // 填充色
|
|
|
+ fillOpacity: obj.fillOpacity || 0.4, // 填充透明度
|
|
|
+ strokeColor: obj.strokeColor || '#DC3021', // 轮廓颜色
|
|
|
+ strokeStyle: obj.strokeStyle || 'solid',
|
|
|
+ strokeWeight: 2, // 轮廓宽度
|
|
|
+ strokeOpacity: 0.8, // 轮廓透明度
|
|
|
+ text: obj.text,
|
|
|
+ estateObj: obj.estateObj || '{}',
|
|
|
+ schoolObj: obj.schoolObj || '{}'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ that.$api.other.admmapcoordindataadd(params).then(res => {
|
|
|
+ that.getList()
|
|
|
+ })
|
|
|
+ mouseTool.close(true)
|
|
|
+ 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', // 轮廓颜色
|
|
|
+ strokeStyle: obj.strokeStyle || 'solid',
|
|
|
+ strokeWeight: 5, // 轮廓宽度
|
|
|
+ strokeOpacity: 0.8, // 轮廓透明度
|
|
|
+ text: obj.text,
|
|
|
+ })
|
|
|
+ that.polylines = [...polylines]
|
|
|
+ mouseTool.close(true)
|
|
|
+ that.isDbShow = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mapIsEdit (index, str) {
|
|
|
+ if (str === 'polygons') {
|
|
|
+ let cObj = this.polygons[index]
|
|
|
+ if (cObj.editable) {
|
|
|
+ cObj.editable = false
|
|
|
+ const cPath = cObj.path
|
|
|
+ const lnglatObj = this.getCenterPoint(cPath)
|
|
|
+ console.log(lnglatObj)
|
|
|
+ let tempPath = []
|
|
|
+ cPath.forEach(item => {
|
|
|
+ tempPath.push([item.lng, item.lat])
|
|
|
+ })
|
|
|
+ cObj.path = tempPath
|
|
|
+ this.$api.other.admmapcoordindataedit({
|
|
|
+ id: cObj.id,
|
|
|
+ latitude: lnglatObj.lng,
|
|
|
+ longitude: lnglatObj.lat,
|
|
|
+ data: JSON.stringify(cObj)
|
|
|
+ }).then(res => {
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ cObj.editable = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return
|
|
|
+ this.curMarkersIndex = index
|
|
|
+ let tempData = [...this[str]]
|
|
|
+ if (str === 'polygons' || str === 'polylines' || str === 'circles') {
|
|
|
+ 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', () => {
|
|
|
+ if (str === 'polygons') {
|
|
|
+ let cObj = this.polygons[index]
|
|
|
+ this.$api.other.admmapcoordindatadel({
|
|
|
+ id: cObj.id,
|
|
|
+ }).then(res => {
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return
|
|
|
+ let tempData = [...this[str]]
|
|
|
+ tempData.splice(index, 1)
|
|
|
+ this[str] = [...tempData]
|
|
|
+ this.$storage(`map_${str}`, JSON.stringify(tempData))
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openImg (obj) {
|
|
|
+ this.isImgShow = true
|
|
|
+ if (obj) {
|
|
|
+ this.mteObj = {...obj}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeImg (obj, bcStr) {
|
|
|
+ this.isImgShow = false
|
|
|
+ if (obj) {
|
|
|
+ if (bcStr && bcStr === 'edit') {
|
|
|
+ const index = this.mteObj.index || 0
|
|
|
+ let tempData = [...this.markerData]
|
|
|
+ tempData[index].icon = obj.icon
|
|
|
+ tempData[index].text = obj.text
|
|
|
+ tempData[index].color = obj.color
|
|
|
+ this.markerData = [...tempData]
|
|
|
+ this.$storage(`map_markerData`, JSON.stringify(tempData))
|
|
|
+ } else {
|
|
|
+ this.imgAdd(obj)
|
|
|
+ this.isDbShow = false
|
|
|
+ this.$msgs('请在地图上操作')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.mteObj = {}
|
|
|
+ },
|
|
|
+ imgAdd (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: '',
|
|
|
+ offset: [0, 0],
|
|
|
+ text: obj.text,
|
|
|
+ icon: obj.icon,
|
|
|
+ })
|
|
|
+ that.markerData = [...markerData]
|
|
|
+ window.setTimeout(() => {
|
|
|
+ mouseTool.close(true)
|
|
|
+ that.isDbShow = true
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ let polygons = [...this.polygons]
|
|
|
+ let cObj = polygons[index]
|
|
|
+ cObj.text = obj.text
|
|
|
+ cObj.fillColor = obj.fillColor
|
|
|
+ cObj.fillOpacity = obj.fillOpacity
|
|
|
+ cObj.strokeColor = obj.strokeColor
|
|
|
+ cObj.strokeStyle = obj.strokeStyle
|
|
|
+ cObj.estateObj = obj.estateObj || '{}'
|
|
|
+ cObj.schoolObj = obj.schoolObj || '{}'
|
|
|
+ const cPath = cObj.path
|
|
|
+ let tempPath = []
|
|
|
+ cPath.forEach(item => {
|
|
|
+ tempPath.push([item.lng, item.lat])
|
|
|
+ })
|
|
|
+ cObj.path = tempPath
|
|
|
+ this.$api.other.admmapcoordindataedit({
|
|
|
+ id: cObj.id,
|
|
|
+ latitude: cObj.latitude,
|
|
|
+ longitude: cObj.longitude,
|
|
|
+ data: JSON.stringify(cObj)
|
|
|
+ }).then(res => {
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ return
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ if (this.mteStr === 'circleAdd') {
|
|
|
+ str = 'circles'
|
|
|
+ }
|
|
|
+ let tempData = [...this[str]]
|
|
|
+ if (this.mteStr === 'textAdd' || this.mteStr === 'circleAdd') {
|
|
|
+ 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
|
|
|
+ tempData[index].strokeStyle = obj.strokeStyle
|
|
|
+ tempData[index].estateObj = obj.estateObj || '{}'
|
|
|
+ tempData[index].schoolObj = obj.schoolObj || '{}'
|
|
|
+ }
|
|
|
+ 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: [-10, -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: 300px;
|
|
|
+ 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;
|
|
|
+ &.one {
|
|
|
+ padding: 0 10px;
|
|
|
+ .b {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &: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: 120px;
|
|
|
+ font-weight: bold;
|
|
|
+ box-shadow: 0 0 2px #fff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 6px 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #369af7;
|
|
|
+}
|
|
|
+
|
|
|
+.scoped-select-center {
|
|
|
+ position: absolute;
|
|
|
+ left: -75px;
|
|
|
+ top: 0px;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 60px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #313131;
|
|
|
+ .s {
|
|
|
+ color: #f00;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+::v-deep .amap-marker-label {
|
|
|
+ border-color: #dcdcdc;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 3px 5px;
|
|
|
+ color: #666;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 0 3px #ccc;
|
|
|
+}
|
|
|
+::v-deep .amap-logo{
|
|
|
+ display: none!important;;
|
|
|
+}
|
|
|
+::v-deep .amap-copyright {
|
|
|
+ opacity:0;
|
|
|
+}
|
|
|
+::v-deep .amap-icon img {
|
|
|
+ width: 11px !important;
|
|
|
+ height: 11px !important;
|
|
|
+ // width: 20px !important;
|
|
|
+ // height: 20px !important;
|
|
|
+}
|
|
|
+
|
|
|
+// ::v-deep .amap-marker .amap-icon img {
|
|
|
+// width: 20px !important;
|
|
|
+// height: 20px !important;
|
|
|
+// }
|
|
|
+
|
|
|
+.scoped-marker-area {
|
|
|
+ background: #369af7;
|
|
|
+ box-shadow: 0 0 5px #369af7;
|
|
|
+ color: #fff;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 50%;
|
|
|
+ padding-top: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.scoped-bg {
|
|
|
+ width: 180px;
|
|
|
+ height: 30px;
|
|
|
+ background: url(./img/bg.png);
|
|
|
+ background-size: 100%;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 999999;
|
|
|
+ // left: 50%;
|
|
|
+ // top: 50%;
|
|
|
+ // margin-left: -150px;
|
|
|
+ // margin-top: -25px;
|
|
|
+ // transform: rotate(-45deg);
|
|
|
+ left: 10px;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.scoped-top-tips {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 999999;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ color: #5caac1; //#de8c17;
|
|
|
+ background: #fcf6ed;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 10px;
|
|
|
+ opacity: .8;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.scoped-tab {
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ background: #fff;
|
|
|
+ z-index: 9999999;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 20px 0 0 20px;
|
|
|
+ box-shadow: 0 0 10px #ccc;
|
|
|
+ .op {
|
|
|
+ color: #313131;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ &:last-child {
|
|
|
+ border-top: 1px solid #dcdcdc;
|
|
|
+ }
|
|
|
+ &.cur {
|
|
|
+ color: #409eff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
