Skip to content

P
pudong-elevator-map
Commit b61f1b8c authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

删改代码,添加注释

parent 35728540
Show whitespace changes
Inline Side-by-side
Showing with 216 additions and 328 deletions
src/main.js
View file @ b61f1b8c
...@@ -6,14 +6,13 @@ import App from './App' ...@@ -6,14 +6,13 @@ import App from './App'
import router from './router' import router from './router'
import common from './util/common' import common from './util/common'
import api from './util/api' import api from './util/api'
import {Icon, Button, Collapse, Panel, Modal, Table, Drawer} from 'view-design' import {Button, Collapse, Panel, Modal, Table, Drawer} from 'view-design'
import 'view-design/dist/styles/iview.css' import 'view-design/dist/styles/iview.css'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$com = common Vue.prototype.$com = common
Vue.prototype.$api = api Vue.prototype.$api = api
Vue.component('Button', Button) Vue.component('Button', Button)
Vue.component('Icon', Icon)
Vue.component('Collapse', Collapse) Vue.component('Collapse', Collapse)
Vue.component('Panel', Panel) Vue.component('Panel', Panel)
Vue.component('Modal', Modal) Vue.component('Modal', Modal)
......
src/util/common.js
View file @ b61f1b8c
...@@ -11,6 +11,34 @@ export default{ ...@@ -11,6 +11,34 @@ export default{
return [] return []
} }
}, },
switchImg(ratio) {
if (!ratio) ratio = 0
if (ratio < 1) {
ratio = ratio * 100
}
if (ratio <= 10) return 1
if (ratio <= 20) return 2
if (ratio <= 30) return 3
if (ratio <= 40) return 4
if (ratio <= 50) return 5
if (ratio <= 60) return 6
if (ratio <= 70) return 7
if (ratio <= 80) return 8
if (ratio <= 90) return 9
if (ratio <= 100) return 10
},
switchColor(color) {
if (!color) return null
if (color.indexOf('绿') >= 0) return {'background-color': '#8fd618'}
if (color.indexOf('黄') >= 0) return {'background-color': 'gold'}
if (color.indexOf('红') >= 0) return {'background-color': 'red'}
},
switchStarNum(intention) {
if (!intention) return 0
if (intention.indexOf('一') >= 0) return 1
if (intention.indexOf('二') >= 0 || intention.indexOf('两') >= 0) return 2
if (intention.indexOf('三') >= 0) return 3
},
switchStatus(status) { switchStatus(status) {
status = Number(status) status = Number(status)
switch (status) { switch (status) {
...@@ -26,35 +54,4 @@ export default{ ...@@ -26,35 +54,4 @@ export default{
return '暂无状态' return '暂无状态'
} }
}, },
similar(str1, str2) {
if (!str1 || !str2 || typeof(str1) != 'string' || typeof(str2) != 'string') {
console.error('参数需要是string类型！')
return 0
}
const len1 = str1.length
const len2 = str2.length
const arr = []
for (let i = 0; i <= len1; i++) {
arr[i] = []
arr[i][0] = i
}
for (let i = 0; i <= len2; i++) {
arr[0][i] = i
}
let temp
for (let i = 1; i <= len1; i++) {
for (let j = 1; j <= len2; j++) {
if (str1.charAt(i - 1) == str2.charAt(j - 1)) {
temp = 0
} else {
temp = 1
}
arr[i][j] = Math.min(arr[i - 1][j - 1] + temp, arr[i][j - 1] + 1, arr[i - 1][j] + 1)
}
}
return (1 - arr[len1][len2] / Math.max(len1, len2)).toFixed(3)
}
} }
src/views/main.vue
View file @ b61f1b8c
<template> <template>
<div id="container"> <div id="elevatorMapContainer">
<template v-if="curStreetData.name && curStreet"> <template v-if="curStreetData.name && curStreet">
<Collapse :value="[curStreet]" class="menu" accordion> <Collapse :value="[curStreet]" class="menu" accordion>
<Panel v-for="street in streetList" :key="street" :name="street"> <Panel v-for="street in streetList" :key="street" :name="street">
{{curStreetData.name}}小区列表 {{curStreetData.name}}小区列表
<div slot="content" class="community-list"> <div slot="content" class="community-list">
<div v-for="(item, index) in curStreetData.community" :key="item.name + index" style="display:flex;justify-content:space-between;"> <div v-for="(item, i) in curStreetData.community" :key="item.name + i">
<Button <Button
@click="handleView(item)" @click="handleView(item)"
size="small" size="small"
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
long> long>
{{item.name}} {{item.name}}
</Button> </Button>
<a @click="handleDetail(item)" style="display:block;min-width:5rem;text-align:right;">详情</a> <a @click="handleDetail(item)">详情</a>
</div> </div>
</div> </div>
</Panel> </Panel>
...@@ -27,19 +27,19 @@ ...@@ -27,19 +27,19 @@
<div class="drawer-content"> <div class="drawer-content">
<div> <div>
<p class="title">加装条件</p> <p class="title">加装条件</p>
<div class="condition" :style="switchColor(detailDrawerData.color)"/> <div class="condition" :style="$com.switchColor(detailDrawerData.color)"/>
</div> </div>
<div> <div>
<p class="title">居民意愿度</p> <p class="title">居民意愿度</p>
<!-- <p class="title">加装可能性</p> --> <!-- <p class="title">加装可能性</p> -->
<img v-for="i in switchStarNum(detailDrawerData.intention)" :key="i" class="star" src="@/assets/images/star1.png"/> <img v-for="i in $com.switchStarNum(detailDrawerData.intention)" :key="i" class="star" src="@/assets/images/star1.png"/>
</div> </div>
<div> <div>
<p class="title">加装意愿收集</p> <p class="title">加装意愿收集</p>
<p class="sub-title"><span>已投/应投</span><span>{{Math.round((detailDrawerData.agree + detailDrawerData.disagree) / detailDrawerData.totUnit * 100)}}%</span></p> <p class="sub-title"><span>已投/应投</span><span>{{Math.round((detailDrawerData.agree + detailDrawerData.disagree) / detailDrawerData.totUnit * 100)}}%</span></p>
<img class="bar" :src="require(`@/assets/images/${switchImg((detailDrawerData.agree + detailDrawerData.disagree) / detailDrawerData.totUnit)}.png`)"/> <img class="bar" :src="require(`@/assets/images/${$com.switchImg((detailDrawerData.agree + detailDrawerData.disagree) / detailDrawerData.totUnit)}.png`)"/>
<p class="sub-title"><span>同意/不同意</span><span>{{Math.round(detailDrawerData.ratio * 100)}}%</span></p> <p class="sub-title"><span>同意/不同意</span><span>{{Math.round(detailDrawerData.ratio * 100)}}%</span></p>
<img class="bar" :src="require(`@/assets/images/${switchImg(detailDrawerData.ratio)}.png`)"/> <img class="bar" :src="require(`@/assets/images/${$com.switchImg(detailDrawerData.ratio)}.png`)"/>
</div> </div>
<div> <div>
<p class="title">加装情况</p> <p class="title">加装情况</p>
...@@ -57,72 +57,33 @@ ...@@ -57,72 +57,33 @@
const {AMap} = window const {AMap} = window
import axios from 'axios' import axios from 'axios'
export default { export default {
name: 'Map3D', name: 'PudongElevatorMap',
data() { data() {
return { return {
map: null, map: null,
detailDrawer: false, detailDrawer: false,
detailDrawerData: {}, detailDrawerData: {},
buildingOptions: {
hideWithoutStyle:false,//是否隐藏设定区域外的楼块
areas:[
{ //围栏1
//visible:false,//是否可见
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ff99ff00',//楼顶颜色
color2: 'ff999900',//楼面颜色
path: [
[121.498447,31.217582],
[121.498466,31.218851],
[121.497402,31.218943],
[121.497423,31.217595],
]
},
{
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ffcc0000',//楼顶颜色
color2: 'ffaa0000',//楼面颜色
path: [
[121.497898,31.217932],
[121.498456,31.217945],
[121.498445,31.218445],
[121.49791,31.218376],
]
},
{
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ffffff00',//楼顶颜色
color2: 'ffffcc00',//楼面颜色
path: [
[121.498696,31.218295],
[121.498679,31.217744],
[121.499197,31.217747],
[121.499243,31.218324],
]
},
]
},
mapConfig: { mapConfig: {
resizeEnable: true, resizeEnable: true,
rotateEnable:true, rotateEnable: true,
pitchEnable:true, pitchEnable: true,
showLabel: true, showLabel: true,
zoom: 15, zoom: 15,
pitch:50, pitch: 50,
rotation:45, rotation: 45,
viewMode:'3D',//开启3D视图,默认为关闭 viewMode: '3D', // 开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画 buildingAnimation:true, // 楼块出现是否带动画
expandZoomRange:true, expandZoomRange:true,
zooms: [10,20], zooms: [10,20],
center: [121.544379, 31.221517], // 浦东新区 center: [121.544379, 31.221517], // 浦东新区
showIndoorMap:false, showIndoorMap: false,
// mapStyle:'amap://styles/light', // mapStyle:'amap://styles/light',
features:['bg','road'], features: ['bg','road'],
}, },
streetList: [], streetList: [],
curStreetPolygon: null, curStreetPolygon: null,
curStreet: null, curStreet: null,
markerList: [], markerCollection: [],
detailModal: false, detailModal: false,
columns: [ columns: [
{ {
...@@ -237,7 +198,7 @@ export default { ...@@ -237,7 +198,7 @@ export default {
}, },
], ],
detailData: [], detailData: [],
refer: { streetDic: {
beicai: '北蔡', beicai: '北蔡',
caolu: '曹路', caolu: '曹路',
chuansha: '川沙', chuansha: '川沙',
...@@ -286,141 +247,108 @@ export default { ...@@ -286,141 +247,108 @@ export default {
}, },
methods: { methods: {
initMap(area) { initMap(area) {
this.map = new AMap.Map('container', this.mapConfig) this.map = new AMap.Map('elevatorMapContainer', this.mapConfig)
this.addController() this.addController()
this.initMenu() this.initMenu()
}, },
addController() { // 添加地图控制器
this.map.addControl(new AMap.ControlBar({
showZoomBar: false,
showControlButton: true,
position: {
right: '10px',
top: '10px',
}
}))
},
initMenu() { // 初始化列表菜单 initMenu() { // 初始化列表菜单
const streets = Object.keys(this.refer) const streets = Object.keys(this.streetDic)
if (this.$route.query && this.$route.query.name) { // 判断路由有街镇则显示该街镇列表，没街镇显示所有街镇列表 if (this.$route.query && this.$route.query.name) { // 判断路由有街镇则显示该街镇列表
const streetName = this.$route.query.name const streetName = this.$route.query.name
let result = null const result = streets.find(key => streetName.indexOf(this.streetDic[key]) >= 0) // 取得相符的街镇数据
streets.forEach(street => {
if (streetName.indexOf(this.refer[street]) >= 0) {
result = street
}
})
this.streetList = [result] this.streetList = [result]
this.$nextTick(() => { // 为了展开默认街镇小区列表 this.$nextTick(() => { // 为了展开默认街镇小区列表
this.curStreet = result this.curStreet = result
this.initStreet() this.initStreet()
}) })
} else {
this.streetList = streets
} }
}, },
handleView({name, address, location}) { initStreet() { // 初始化街镇
this.map.setZoomAndCenter(18, location) const streetData = require(`@/mock/${this.curStreet}.js`).default
this.showDetail(null, location, {title: name, content: address}) this.curStreetData = streetData
this.addMarker(name) this.map.setZoomAndCenter(15, streetData.location)
this.highlightArea(streetData)
},
highlightArea(area) { // 高亮区域
if (!area.path || area.path <= 0) return
if (this.curStreetPolygon) { // 先清除已存在的高亮区域
this.map.clearMap()
}
const polygon = new AMap.Polygon({
zIndex: 1,
strokeWeight: 3,
strokeStyle: 'dashed',
path: area.path,
fillOpacity: 0.2,
fillColor: '#80d8ff',
strokeColor: '#0091ea'
}).on('click', e => {
// console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
})
this.curStreetPolygon = polygon
this.map.add([polygon])
}, },
handleDetail({name}) { handleDetail({name}) {
if (!this.buildingData) return
this.detailData = this.buildingData.building.filter(item => { this.detailData = this.buildingData.building.filter(item => {
const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '') const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
return buildingName.indexOf(name) >= 0 || (item.buildingNo + '').indexOf(name) >= 0 return buildingName.indexOf(name) >= 0 || (item.buildingNo + '').indexOf(name) >= 0
}) })
this.detailModal = true this.detailModal = true
}, },
initStreet() { // 初始化街镇 initLayers() { // 配置地图图层信息
const streetData = require(`@/mock/${this.curStreet}.js`).default
this.curStreetData = streetData
this.map.setZoomAndCenter(15, streetData.location)
if (this.curStreetPolygon) {
this.map.clearMap()
}
this.highlightArea(streetData)
},
initLayers() { // 添加基础图层和建筑物图层
if (!this.curStreetData.name) return if (!this.curStreetData.name) return
const communityList = [...this.curStreetData.community] const communityList = [...this.curStreetData.community, ...this.buildingData.community]
if (this.buildingData) {
communityList.push(...this.buildingData.community)
}
const buildingOptions = { const buildingOptions = {
areas: communityList.map(item => { areas: communityList.map(community => {
if (item.type != 'building') { if (community.type != 'building') {
new AMap.Polygon({ new AMap.Polygon({ // 上色小区的底板颜色
zIndex: 10, zIndex: 10,
bubble:false, bubble: false,
fillColor: 'green', fillColor: 'green',
fillOpacity:0.2, fillOpacity: 0.2,
strokeWeight:1, strokeWeight: 1,
path: item.path, path: community.path,
map:this.map map: this.map
}).on('click', e => { }).on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()] // const location = [e.lnglat.getLng(), e.lnglat.getLat()]
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat()) // console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
this.handleView(item) this.handleView(community)
}) })
} }
return { return {
rejectTexture:true,//是否屏蔽自定义地图的纹理 rejectTexture:true, // 是否屏蔽自定义地图的纹理
color1: this.$com.switchBuildingColor(item.level)[0],//楼顶颜色 color1: this.$com.switchBuildingColor(community.level)[0], // 楼顶颜色
color2: this.$com.switchBuildingColor(item.level)[1],//楼面颜色 color2: this.$com.switchBuildingColor(community.level)[1], // 楼面颜色
path: item.path || [] path: community.path || []
} }
}) })
} }
const buildingLayer = new AMap.Buildings({zIndex:130,merge:false,sort:false,zooms:[10,20]}) const buildingLayer = new AMap.Buildings({zIndex: 130, merge: false, sort: false, zooms: [10,20]})
buildingLayer.setStyle(buildingOptions) buildingLayer.setStyle(buildingOptions)
this.map.setLayers([ this.map.setLayers([
new AMap.TileLayer({}), new AMap.TileLayer({}), // 高德默认的地图图层
buildingLayer buildingLayer, // 咱们自定义的建筑物上色图层
]) ])
// this.buildingData.community.forEach(item => {
// this.addPrism(item.path)
// })
// 框起的建筑物区域底板颜色(不写则无底色，不影响建筑颜色)
// new AMap.Polygon({
// bubble:false,
// fillColor: 'green',
// fillOpacity:0.2,
// strokeWeight:1,
// path: buildingOptions.areas[0].path,
// map:this.map
// }).on('click', e => {
// const location = [e.lnglat.getLng(), e.lnglat.getLat()]
// this.map.setZoomAndCenter(18.8, location)
// })
// new AMap.Polygon({
// bubble:true,
// fillOpacity:0.2,
// strokeWeight:1,
// path:this.buildingOptions.areas[1].path,
// map:this.map
// })
},
addPrism(paths, height = 300, color = 'rgba(100,150,230,0.7)') {
const object3d = new AMap.Object3DLayer()
this.map.add(object3d)
const prism = new AMap.Object3D.Prism({
path: paths.map(path => new AMap.LngLat(path[0], path[1])),
height,
color,
})
prism.transparent = true
object3d.add(prism)
return object3d
}, },
addController() { // 添加地图控制器 handleView({name, address, location}) { // 点击列表小区名或者地图小区图块事件
this.map.addControl(new AMap.ControlBar({ this.map.setZoomAndCenter(18, location)
showZoomBar:false, this.addMarker(name)
showControlButton:true, this.showInfoTips(null, location, {title: name, content: address})
position:{
right:'10px',
top:'10px'
}
}))
}, },
addMarker(name) { // 点击小区后展示各楼栋的marker async addMarker(name) { // 点击小区后展示各楼栋的marker
this.map.remove(this.markerList) // 移除之前的marker this.map.remove(this.markerCollection) // 移除之前的marker
if (!this.buildingData) return const markerCollection = []
const markerList = [] const {data} = await axios.get('http://yapi.omniview.pro/mock/279/public/elv/consentRate')
axios.get('http://yapi.omniview.pro/mock/279/public/elv/consentRate').then(res => {
const mock = [{ const mock = [{
'unitNo': '20号', 'unitNo': '20号',
'streetId': '12345', 'streetId': '12345',
...@@ -437,17 +365,22 @@ export default { ...@@ -437,17 +365,22 @@ export default {
}] }]
const communityName = name && (name + '').replace('(补)', '').replace('（补）', '') const communityName = name && (name + '').replace('(补)', '').replace('（补）', '')
const datasource = mock.filter(e => e.sectName.indexOf(communityName) >= 0 || communityName.indexOf(e.sectName) >= 0) // 筛选出返回数据中的相关小区数据 const datasource = mock.filter(e => e.sectName.indexOf(communityName) >= 0 || communityName.indexOf(e.sectName) >= 0) // 筛选出返回数据中的相关小区数据
const initMarker = (item) => { // 配置楼栋的marker this.markerCollection = this.initMarker(name, datasource)
this.map.add(this.markerCollection)
},
initMarker(name, buildingDatas) { // 初始化添加楼栋图标，返回图标集合
const markerCollection = []
const configMarker = item => {
const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '') const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
if (buildingName.indexOf(name) < 0 && (item.buildingNo + '').indexOf(name) < 0) return // （筛选出点击的小区的楼栋）楼栋的小区名和name一致则往下走 if (buildingName.indexOf(name) < 0 && (item.buildingNo + '').indexOf(name) < 0) return // （筛选出点击的小区的楼栋）楼栋的小区名和name一致则往下走
const curObj = datasource.find(e => e.unitNo.indexOf(item.buildingNo) >= 0 || item.buildingNo.indexOf(e.unitNo) >= 0) // 查找出返回数据中的同一幢楼栋数据 const curObj = buildingDatas.find(e => e.unitNo.indexOf(item.buildingNo) >= 0 || item.buildingNo.indexOf(e.unitNo) >= 0) // 查找出返回数据中的同一幢楼栋数据
if (!curObj) return if (!curObj) return
if(item.lon && item.lat && item.intention) { if(item.lon && item.lat && item.intention) {
const marker = new AMap.Marker({ const marker = new AMap.Marker({
position: [item.lon, item.lat], position: [item.lon, item.lat],
icon: new AMap.Icon({ icon: new AMap.Icon({
size: [30, 10], size: [30, 10],
image: require(`@/assets/images/${this.switchImg(curObj.ratio)}.png`), image: require(`@/assets/images/${this.$com.switchImg(curObj.ratio)}.png`),
}), }),
extData: { extData: {
community: item.name, community: item.name,
...@@ -459,71 +392,20 @@ export default { ...@@ -459,71 +392,20 @@ export default {
...curObj ...curObj
}, },
}).on('click', e => { }).on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
this.detailDrawer = true this.detailDrawer = true
this.detailDrawerData = marker.getExtData() this.detailDrawerData = marker.getExtData()
const LENGTH = 0.00015
const {lon, lat} = this.detailDrawerData const {lon, lat} = this.detailDrawerData
const po1 = [ this.showInfoTips(e, [e.lnglat.getLng(), e.lnglat.getLat()], marker.getExtData(), this.addPrism(lon, lat))
Number(lon) + LENGTH,
lat,
]
const po2 = [
lon,
Number(lat) + LENGTH
]
const po3 = [
Number(lon) - LENGTH,
lat,
]
const po4 = [
lon,
Number(lat) - LENGTH
]
const prism = this.addPrism([po1, po2, po3, po4, po1])
this.showDetail(e, location, marker.getExtData(), prism)
}) })
markerList.push(marker) markerCollection.push(marker)
} }
} }
this.buildingData.building.forEach(initMarker) // 遍历楼栋数据 this.buildingData.building.forEach(configMarker) // 遍历楼栋数据逐一设置图标
this.map.add(markerList) return markerCollection
this.markerList = markerList
})
}, },
switchImg(ratio) { showInfoTips(e, location, data, prism = null) { // 地图显示浮窗信息
if (!ratio) ratio = 0
if (ratio < 1) {
ratio = ratio * 100
}
if (ratio <= 10) return 1
if (ratio <= 20) return 2
if (ratio <= 30) return 3
if (ratio <= 40) return 4
if (ratio <= 50) return 5
if (ratio <= 60) return 6
if (ratio <= 70) return 7
if (ratio <= 80) return 8
if (ratio <= 90) return 9
if (ratio <= 100) return 10
},
switchColor(color) {
if (!color) return null
if (color.indexOf('绿') >= 0) return {'background-color': '#8fd618'}
if (color.indexOf('黄') >= 0) return {'background-color': 'gold'}
if (color.indexOf('红') >= 0) return {'background-color': 'red'}
},
switchStarNum(intention) {
if (!intention) return 0
if (intention.indexOf('一') >= 0) return 1
if (intention.indexOf('二') >= 0 || intention.indexOf('两') >= 0) return 2
if (intention.indexOf('三') >= 0) return 3
},
showDetail(e, location, data, prism = null) {
let infoWindow = null let infoWindow = null
if (data.title && data.content) { if (data.title && data.content) { // 展示小区信息
infoWindow = new AMap.InfoWindow({ infoWindow = new AMap.InfoWindow({
content: ` content: `
<div> <div>
...@@ -532,8 +414,8 @@ export default { ...@@ -532,8 +414,8 @@ export default {
</div> </div>
` `
}) })
} else { } else { // 展示楼栋信息
const img = require(`@/assets/images/${this.switchImg(data.ratio)}.png`) const img = require(`@/assets/images/${this.$com.switchImg(data.ratio)}.png`)
infoWindow = new AMap.InfoWindow({ infoWindow = new AMap.InfoWindow({
content: ` content: `
<div> <div>
...@@ -546,28 +428,30 @@ export default { ...@@ -546,28 +428,30 @@ export default {
</div> </div>
` `
}).on('close', e => { }).on('close', e => {
if (prism) { if (!prism) return
prism.clear() prism.clear()
}
}) })
} }
infoWindow.open(this.map, location) infoWindow.open(this.map, location)
}, },
highlightArea(area) { // 高亮区域 addPrism(lon, lat, height = 300, color = 'rgba(100,150,230,0.7)') { // 添加立体遮罩
if (!area.path || area.path <= 0) return const LENGTH = 0.00015
const polygon = new AMap.Polygon({ const po1 = [Number(lon) + LENGTH, lat]
zIndex: 1, const po2 = [lon, Number(lat) + LENGTH]
strokeWeight: 3, const po3 = [Number(lon) - LENGTH, lat]
strokeStyle:'dashed', const po4 = [lon, Number(lat) - LENGTH]
path: area.path, const paths = [po1, po2, po3, po4, po1]
fillOpacity: 0.2,
fillColor: '#80d8ff', const object3d = new AMap.Object3DLayer()
strokeColor: '#0091ea' this.map.add(object3d)
}).on('click', e => { const prism = new AMap.Object3D.Prism({
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat()) path: paths.map(path => new AMap.LngLat(path[0], path[1])),
height,
color,
}) })
this.curStreetPolygon = polygon prism.transparent = true
this.map.add([polygon]) object3d.add(prism)
return object3d
}, },
}, },
computed: { computed: {
...@@ -576,7 +460,7 @@ export default { ...@@ -576,7 +460,7 @@ export default {
}, },
}, },
watch: { watch: {
async curStreet(cur) { async curStreet(cur) { // 监控转换后的路由街镇名来获取匹配数据
if (!cur) return if (!cur) return
const {data} = await axios.get(`${this.$api.BASE_URL}/mock/${cur}-building.json`) const {data} = await axios.get(`${this.$api.BASE_URL}/mock/${cur}-building.json`)
this.buildingData = data || { this.buildingData = data || {
...@@ -590,7 +474,7 @@ export default { ...@@ -590,7 +474,7 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
#container #elevatorMapContainer
width 100% width 100%
height 100% height 100%
resize both resize both
...@@ -602,26 +486,14 @@ export default { ...@@ -602,26 +486,14 @@ export default {
top 1rem top 1rem
left 1rem left 1rem
z-index 100 z-index 100
</style> .community-list
<style lang="stylus"> >div
.amap-logo display flex
.amap-copyright justify-content space-between
display none !important a
.amap-icon display block
img min-width 5rem
width 100% text-align right
height 100%
.menu
.ivu-collapse-content
max-height 80vh
overflow-y auto
overflow-x hidden
padding 0 1rem
.ivu-collapse-content-box
padding 1rem 0
button
text-align left
font-size 1rem
.drawer-content .drawer-content
>div >div
margin-bottom 2rem margin-bottom 2rem
...@@ -658,3 +530,23 @@ export default { ...@@ -658,3 +530,23 @@ export default {
height @width height @width
margin-right 1rem margin-right 1rem
</style> </style>
<style lang="stylus">
.amap-logo
.amap-copyright
display none !important
.amap-icon
img
width 100%
height 100%
.menu
.ivu-collapse-content
max-height 80vh
overflow-y auto
overflow-x hidden
padding 0 1rem
.ivu-collapse-content-box
padding 1rem 0
button
text-align left
font-size 1rem
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment