|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <div class="scoped-top-tips">洪楼plus小程序提示：点击图中区域、楼盘、学校可查看更多</div>
|
|
|
+ <div class="scoped-top-tips">洪楼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>
|
|
|
@@ -51,11 +51,9 @@
|
|
|
:offset="marker.offset"
|
|
|
:extData="{index}"
|
|
|
:icon="marker.icon"
|
|
|
- :title="marker.text"
|
|
|
:events="markersEvents">
|
|
|
- <div class="scoped-marker-text" v-if="!marker.icon" :style="`color: ${marker.color}`">{{marker.text}}</div>
|
|
|
+ <div class="scoped-marker-text" v-if="!marker.icon" :style="`color: ${marker.color}`">{{marker.content}}</div>
|
|
|
</el-amap-marker>
|
|
|
- <!-- :label="{content: marker.text}" -->
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<template v-if="mapDiyObj.isAreaShow === '1'">
|
|
|
@@ -84,6 +82,7 @@
|
|
|
:strokeColor="polygon.strokeColor"
|
|
|
:strokeWeight="polygon.strokeWeight"
|
|
|
:strokeOpacity="polygon.strokeOpacity"
|
|
|
+ :strokeStyle="polygon.strokeStyle"
|
|
|
:extData="{index}"
|
|
|
:events="polygonEvents">
|
|
|
</el-amap-polygon>
|
|
|
@@ -96,10 +95,13 @@
|
|
|
: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>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -113,6 +115,7 @@ export default {
|
|
|
data() {
|
|
|
const that = this
|
|
|
return {
|
|
|
+ isImgShow: false,
|
|
|
polylines: [],
|
|
|
estateList: [],
|
|
|
schoolList: [],
|
|
|
@@ -129,6 +132,10 @@ export default {
|
|
|
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]],
|
|
|
@@ -155,23 +162,23 @@ export default {
|
|
|
var layerControl = new BasicControl.LayerSwitcher({
|
|
|
baseLayers: [
|
|
|
{
|
|
|
- id: 'basic',//图层id，需唯一
|
|
|
+ id: 'Satellite',//图层id，需唯一
|
|
|
enable: true, //是否启用
|
|
|
- name: '基础地图',//显示名称，html
|
|
|
- layer: new AMap.TileLayer()
|
|
|
+ name: '卫星图',//显示名称，html
|
|
|
+ layer: new AMap.TileLayer.Satellite()
|
|
|
},
|
|
|
{
|
|
|
- id: 'Satellite',//图层id，需唯一
|
|
|
+ id: 'basic',//图层id，需唯一
|
|
|
enable: false, //是否启用
|
|
|
- name: '卫星图',//显示名称，html
|
|
|
- layer: new AMap.TileLayer.Satellite()
|
|
|
+ name: '基础地图',//显示名称，html
|
|
|
+ layer: new AMap.TileLayer()
|
|
|
},
|
|
|
],
|
|
|
overlayLayers:[
|
|
|
],
|
|
|
position: {
|
|
|
- bottom:'50px',
|
|
|
- right:'30px',
|
|
|
+ left:'230px',
|
|
|
+ top:'2px',
|
|
|
},
|
|
|
});
|
|
|
map.addControl(layerControl);
|
|
|
@@ -191,6 +198,8 @@ export default {
|
|
|
},
|
|
|
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]
|
|
|
@@ -205,7 +214,85 @@ export default {
|
|
|
click(e) {
|
|
|
const eData = e.target.getExtData()
|
|
|
that.polygonIndex = eData.index
|
|
|
- // wx.miniProgram.navigateTo({url: '/pagesSchool/indexDtl?id=25'})
|
|
|
+ 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 = {
|
|
|
+ '#fb6557': '专本科',
|
|
|
+ '#ff9149': '幼儿园',
|
|
|
+ '#ff0': '新楼盘',
|
|
|
+ '#9f7df4': '二手房',
|
|
|
+ '#ff7fbf': '教育用地',
|
|
|
+ '#ff003f': '商业用地',
|
|
|
+ '#007299': '公用设施',
|
|
|
+ '#00ff3f': '公园用地',
|
|
|
+ '#4da4ee': '医院用地',
|
|
|
+ }
|
|
|
+ that.winObj.position = [lnglatObj.lng, lnglatObj.lat]
|
|
|
+ if (estateObj.id) {
|
|
|
+ const ptObj = {
|
|
|
+ bs: "别墅",
|
|
|
+ cgc: "超高层",
|
|
|
+ dc: "低层",
|
|
|
+ dpc: "大平层",
|
|
|
+ ds: "叠墅",
|
|
|
+ gc: "高层",
|
|
|
+ gy: "公寓",
|
|
|
+ other: "其它",
|
|
|
+ ptyf: "普通洋房",
|
|
|
+ ttyf: "退台洋房",
|
|
|
+ xgc: "小高层",
|
|
|
+ xsdyf: "新时代洋房"
|
|
|
+ }
|
|
|
+ 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: 10px 10px;background:#409eff;user-select: none;margin-bottom: 10px;text-align: left;">${cObj.text}</div>
|
|
|
+ <div style="display: flex;padding-left: 10px;">
|
|
|
+ <div style="width: 100px;">
|
|
|
+ <img style="width: 100px;height: auto;" src="${estateObj.pri_image}_xs" />
|
|
|
+ </div>
|
|
|
+ <div style="width: 160px;">
|
|
|
+ <div style="padding: 0 10px 6px;color: #999;font-size: 12px;color: #f00;font-weight: bold;">价格：￥${estateObj.price_range}</div>
|
|
|
+ <div style="padding: 0 10px 6px;color: #999;font-size: 12px;">类型：${typeObj[cObj.fillColor] || '其它'}</div>
|
|
|
+ <div style="padding: 0 10px 6px;color: #999;font-size: 12px;">物业：${estateObj.property_type}</div>
|
|
|
+ <div style="padding: 0 10px 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: 10px 10px;background:#409eff;user-select: none;margin-bottom: 10px;text-align: left;">${cObj.text}</div>
|
|
|
+ <div style="display: flex;padding-left: 10px;">
|
|
|
+ <div style="width: 100px;">
|
|
|
+ <img style="width: 100px;height: auto;" src="${schoolObj.pri_image}_xs" />
|
|
|
+ </div>
|
|
|
+ <div style="width: 260px;">
|
|
|
+ <div style="padding: 0 10px 6px;color: #999;font-size: 12px;color: #f00;font-weight: bold;">${saObj[schoolObj.school_attrib]}、${stObj[schoolObj.school_type]}</div>
|
|
|
+ <div style="padding: 0 10px 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: 10px 10px;background:#409eff;user-select: none;margin-bottom: 10px;text-align: center;">${cObj.text}</div>
|
|
|
+ <div style="padding: 0 10px 10px;color: #999;">类型：${typeObj[cObj.fillColor] || '其它'}</div>
|
|
|
+ <div style="padding: 0 10px 10px;color: #999;">状态：${cObj.strokeStyle === 'dashed' ? '规划中' : '已规划'}</div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
polylineEvents: {
|
|
|
@@ -240,7 +327,7 @@ export default {
|
|
|
}],
|
|
|
mteStr: 'polygonAdd',
|
|
|
mteObj: {},
|
|
|
- dictData: {
|
|
|
+ dictData: {
|
|
|
sys_yesno: [
|
|
|
{key: '是', val: '1'},
|
|
|
{key: '否', val: '2'},
|
|
|
@@ -421,63 +508,63 @@ export default {
|
|
|
computed: {},
|
|
|
created() {
|
|
|
this.getData()
|
|
|
- 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.base.admmapcoordinall().then(res => {
|
|
|
- let estateList = res.estate_list || []
|
|
|
- estateList.map(item => {
|
|
|
- item.position = [item.longitude, item.latitude]
|
|
|
- })
|
|
|
- this.estateList = [...estateList]
|
|
|
+ // 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.base.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]
|
|
|
- }
|
|
|
+ // 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]
|
|
|
- })
|
|
|
- })
|
|
|
+ // 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: {
|
|
|
@@ -501,6 +588,12 @@ export default {
|
|
|
}).then(res => {
|
|
|
if (res.data) {
|
|
|
const data = JSON.parse(res.data)
|
|
|
+ this.winObj = {
|
|
|
+ content: `
|
|
|
+ <div style="font-weight: bold;color:#409eff;padding: 10px 10px;background:#fff;border-radius: 6px;user-select: none;">${data.mapDiyObj.title}</div>
|
|
|
+ `,
|
|
|
+ position: [data.mapDiyObj.center[0], data.mapDiyObj.center[1]],
|
|
|
+ }
|
|
|
this.polylines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
|
|
|
this.polygons = [...data.polygons]
|
|
|
this.markerData = [...data.markerData]
|
|
|
@@ -522,10 +615,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
document.title = res.title || '洪楼地图1'
|
|
|
- // this.getDef()
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
