Skip to content

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

删改代码,添加注释

parent 35728540
Hide 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'
import router from './router'
import common from './util/common'
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'
Vue.config.productionTip = false
Vue.prototype.$com = common
Vue.prototype.$api = api
Vue.component('Button', Button)
Vue.component('Icon', Icon)
Vue.component('Collapse', Collapse)
Vue.component('Panel', Panel)
Vue.component('Modal', Modal)
......
src/util/common.js
View file @ b61f1b8c
......@@ -11,6 +11,34 @@ export default{
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) {
status = Number(status)
switch (status) {
......@@ -26,35 +54,4 @@ export default{
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>
<div id="container">
<div id="elevatorMapContainer">
<template v-if="curStreetData.name && curStreet">
<Collapse :value="[curStreet]" class="menu" accordion>
<Panel v-for="street in streetList" :key="street" :name="street">
{{curStreetData.name}}小区列表
<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
@click="handleView(item)"
size="small"
......@@ -13,7 +13,7 @@
long>
{{item.name}}
</Button>
<a @click="handleDetail(item)" style="display:block;min-width:5rem;text-align:right;">详情</a>
<a @click="handleDetail(item)">详情</a>
</div>
</div>
</Panel>
......@@ -27,19 +27,19 @@
<div class="drawer-content">
<div>
<p class="title">加装条件</p>
<div class="condition" :style="switchColor(detailDrawerData.color)"/>
<div class="condition" :style="$com.switchColor(detailDrawerData.color)"/>
</div>
<div>
<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>
<p class="title">加装意愿收集</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>
<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>
<p class="title">加装情况</p>
......@@ -57,72 +57,33 @@
const {AMap} = window
import axios from 'axios'
export default {
name: 'Map3D',
name: 'PudongElevatorMap',
data() {
return {
map: null,
detailDrawer: false,
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: {
resizeEnable: true,
rotateEnable:true,
pitchEnable:true,
rotateEnable: true,
pitchEnable: true,
showLabel: true,
zoom: 15,
pitch:50,
rotation:45,
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
pitch: 50,
rotation: 45,
viewMode: '3D', // 开启3D视图,默认为关闭
buildingAnimation:true, // 楼块出现是否带动画
expandZoomRange:true,
zooms: [10,20],
center: [121.544379, 31.221517], // 浦东新区
showIndoorMap:false,
showIndoorMap: false,
// mapStyle:'amap://styles/light',
features:['bg','road'],
features: ['bg','road'],
},
streetList: [],
curStreetPolygon: null,
curStreet: null,
markerList: [],
markerCollection: [],
detailModal: false,
columns: [
{
......@@ -237,7 +198,7 @@ export default {
},
],
detailData: [],
refer: {
streetDic: {
beicai: '北蔡',
caolu: '曹路',
chuansha: '川沙',
......@@ -286,244 +247,165 @@ export default {
},
methods: {
initMap(area) {
this.map = new AMap.Map('container', this.mapConfig)
this.map = new AMap.Map('elevatorMapContainer', this.mapConfig)
this.addController()
this.initMenu()
},
addController() { // 添加地图控制器
this.map.addControl(new AMap.ControlBar({
showZoomBar: false,
showControlButton: true,
position: {
right: '10px',
top: '10px',
}
}))
},
initMenu() { // 初始化列表菜单
const streets = Object.keys(this.refer)
if (this.$route.query && this.$route.query.name) { // 判断路由有街镇则显示该街镇列表，没街镇显示所有街镇列表
const streets = Object.keys(this.streetDic)
if (this.$route.query && this.$route.query.name) { // 判断路由有街镇则显示该街镇列表
const streetName = this.$route.query.name
let result = null
streets.forEach(street => {
if (streetName.indexOf(this.refer[street]) >= 0) {
result = street
}
})
const result = streets.find(key => streetName.indexOf(this.streetDic[key]) >= 0) // 取得相符的街镇数据
this.streetList = [result]
this.$nextTick(() => { // 为了展开默认街镇小区列表
this.curStreet = result
this.initStreet()
})
} else {
this.streetList = streets
}
},
handleView({name, address, location}) {
this.map.setZoomAndCenter(18, location)
this.showDetail(null, location, {title: name, content: address})
this.addMarker(name)
initStreet() { // 初始化街镇
const streetData = require(`@/mock/${this.curStreet}.js`).default
this.curStreetData = streetData
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}) {
if (!this.buildingData) return
this.detailData = this.buildingData.building.filter(item => {
const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
return buildingName.indexOf(name) >= 0 || (item.buildingNo + '').indexOf(name) >= 0
})
this.detailModal = true
},
initStreet() { // 初始化街镇
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() { // 添加基础图层和建筑物图层
initLayers() { // 配置地图图层信息
if (!this.curStreetData.name) return
const communityList = [...this.curStreetData.community]
if (this.buildingData) {
communityList.push(...this.buildingData.community)
}
const communityList = [...this.curStreetData.community, ...this.buildingData.community]
const buildingOptions = {
areas: communityList.map(item => {
if (item.type != 'building') {
new AMap.Polygon({
areas: communityList.map(community => {
if (community.type != 'building') {
new AMap.Polygon({ // 上色小区的底板颜色
zIndex: 10,
bubble:false,
bubble: false,
fillColor: 'green',
fillOpacity:0.2,
strokeWeight:1,
path: item.path,
map:this.map
fillOpacity: 0.2,
strokeWeight: 1,
path: community.path,
map: this.map
}).on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
this.handleView(item)
// const location = [e.lnglat.getLng(), e.lnglat.getLat()]
// console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
this.handleView(community)
})
}
return {
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: this.$com.switchBuildingColor(item.level)[0],//楼顶颜色
color2: this.$com.switchBuildingColor(item.level)[1],//楼面颜色
path: item.path || []
rejectTexture:true, // 是否屏蔽自定义地图的纹理
color1: this.$com.switchBuildingColor(community.level)[0], // 楼顶颜色
color2: this.$com.switchBuildingColor(community.level)[1], // 楼面颜色
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)
this.map.setLayers([
new AMap.TileLayer({}),
buildingLayer
new AMap.TileLayer({}), // 高德默认的地图图层
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
handleView({name, address, location}) { // 点击列表小区名或者地图小区图块事件
this.map.setZoomAndCenter(18, location)
this.addMarker(name)
this.showInfoTips(null, location, {title: name, content: address})
},
addController() { // 添加地图控制器
this.map.addControl(new AMap.ControlBar({
showZoomBar:false,
showControlButton:true,
position:{
right:'10px',
top:'10px'
}
}))
async addMarker(name) { // 点击小区后展示各楼栋的marker
this.map.remove(this.markerCollection) // 移除之前的marker
const markerCollection = []
const {data} = await axios.get('http://yapi.omniview.pro/mock/279/public/elv/consentRate')
const mock = [{
'unitNo': '20号',
'streetId': '12345',
'streetName': '街道',
'sectId': '123123',
'sectName': '浦东龙阳花苑',
'unitId': '112',
'unitAddr': '门牌地址',
'totUnit': 33,//应投
'ratio': 0.15233445,//同意率
'agree': 10,//统一
'disagree': 10, //不同意
'status' : '2'
}]
const communityName = name && (name + '').replace('(补)', '').replace('（补）', '')
const datasource = mock.filter(e => e.sectName.indexOf(communityName) >= 0 || communityName.indexOf(e.sectName) >= 0) // 筛选出返回数据中的相关小区数据
this.markerCollection = this.initMarker(name, datasource)
this.map.add(this.markerCollection)
},
addMarker(name) { // 点击小区后展示各楼栋的marker
this.map.remove(this.markerList) // 移除之前的marker
if (!this.buildingData) return
const markerList = []
axios.get('http://yapi.omniview.pro/mock/279/public/elv/consentRate').then(res => {
const mock = [{
'unitNo': '20号',
'streetId': '12345',
'streetName': '街道',
'sectId': '123123',
'sectName': '浦东龙阳花苑',
'unitId': '112',
'unitAddr': '门牌地址',
'totUnit': 33,//应投
'ratio': 0.15233445,//同意率
'agree': 10,//统一
'disagree': 10, //不同意
'status' : '2'
}]
const communityName = name && (name + '').replace('(补)', '').replace('（补）', '')
const datasource = mock.filter(e => e.sectName.indexOf(communityName) >= 0 || communityName.indexOf(e.sectName) >= 0) // 筛选出返回数据中的相关小区数据
const initMarker = (item) => { // 配置楼栋的marker
const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
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) // 查找出返回数据中的同一幢楼栋数据
if (!curObj) return
if(item.lon && item.lat && item.intention) {
const marker = new AMap.Marker({
position: [item.lon, item.lat],
icon: new AMap.Icon({
size: [30, 10],
image: require(`@/assets/images/${this.switchImg(curObj.ratio)}.png`),
}),
extData: {
community: item.name,
buildingNo: item.buildingNo,
intention: item.intention,
lon: item.lon,
lat: item.lat,
color: item.color,
...curObj
},
}).on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
this.detailDrawer = true
this.detailDrawerData = marker.getExtData()
const LENGTH = 0.00015
const {lon, lat} = this.detailDrawerData
const po1 = [
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)
}
initMarker(name, buildingDatas) { // 初始化添加楼栋图标，返回图标集合
const markerCollection = []
const configMarker = item => {
const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
if (buildingName.indexOf(name) < 0 && (item.buildingNo + '').indexOf(name) < 0) return // （筛选出点击的小区的楼栋）楼栋的小区名和name一致则往下走
const curObj = buildingDatas.find(e => e.unitNo.indexOf(item.buildingNo) >= 0 || item.buildingNo.indexOf(e.unitNo) >= 0) // 查找出返回数据中的同一幢楼栋数据
if (!curObj) return
if(item.lon && item.lat && item.intention) {
const marker = new AMap.Marker({
position: [item.lon, item.lat],
icon: new AMap.Icon({
size: [30, 10],
image: require(`@/assets/images/${this.$com.switchImg(curObj.ratio)}.png`),
}),
extData: {
community: item.name,
buildingNo: item.buildingNo,
intention: item.intention,
lon: item.lon,
lat: item.lat,
color: item.color,
...curObj
},
}).on('click', e => {
this.detailDrawer = true
this.detailDrawerData = marker.getExtData()
const {lon, lat} = this.detailDrawerData
this.showInfoTips(e, [e.lnglat.getLng(), e.lnglat.getLat()], marker.getExtData(), this.addPrism(lon, lat))
})
markerCollection.push(marker)
}
this.buildingData.building.forEach(initMarker) // 遍历楼栋数据
this.map.add(markerList)
this.markerList = markerList
})
},
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
this.buildingData.building.forEach(configMarker) // 遍历楼栋数据逐一设置图标
return markerCollection
},
showDetail(e, location, data, prism = null) {
showInfoTips(e, location, data, prism = null) { // 地图显示浮窗信息
let infoWindow = null
if (data.title && data.content) {
if (data.title && data.content) { // 展示小区信息
infoWindow = new AMap.InfoWindow({
content: `
<div>
......@@ -532,8 +414,8 @@ export default {
</div>
`
})
} else {
const img = require(`@/assets/images/${this.switchImg(data.ratio)}.png`)
} else { // 展示楼栋信息
const img = require(`@/assets/images/${this.$com.switchImg(data.ratio)}.png`)
infoWindow = new AMap.InfoWindow({
content: `
<div>
......@@ -546,28 +428,30 @@ export default {
</div>
`
}).on('close', e => {
if (prism) {
prism.clear()
}
if (!prism) return
prism.clear()
})
}
infoWindow.open(this.map, location)
},
highlightArea(area) { // 高亮区域
if (!area.path || area.path <= 0) return
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())
addPrism(lon, lat, height = 300, color = 'rgba(100,150,230,0.7)') { // 添加立体遮罩
const LENGTH = 0.00015
const po1 = [Number(lon) + LENGTH, lat]
const po2 = [lon, Number(lat) + LENGTH]
const po3 = [Number(lon) - LENGTH, lat]
const po4 = [lon, Number(lat) - LENGTH]
const paths = [po1, po2, po3, po4, po1]
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,
})
this.curStreetPolygon = polygon
this.map.add([polygon])
prism.transparent = true
object3d.add(prism)
return object3d
},
},
computed: {
......@@ -576,7 +460,7 @@ export default {
},
},
watch: {
async curStreet(cur) {
async curStreet(cur) { // 监控转换后的路由街镇名来获取匹配数据
if (!cur) return
const {data} = await axios.get(`${this.$api.BASE_URL}/mock/${cur}-building.json`)
this.buildingData = data || {
......@@ -590,7 +474,7 @@ export default {
</script>
<style lang="stylus" scoped>
#container
#elevatorMapContainer
width 100%
height 100%
resize both
......@@ -602,26 +486,14 @@ export default {
top 1rem
left 1rem
z-index 100
</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
.community-list
>div
display flex
justify-content space-between
a
display block
min-width 5rem
text-align right
.drawer-content
>div
margin-bottom 2rem
......@@ -658,3 +530,23 @@ export default {
height @width
margin-right 1rem
</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