Skip to content

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

增加曹路 金桥楼栋数据

parent c158d5af
Show whitespace changes
Inline Side-by-side
Showing with 35966 additions and 53 deletions
src/mock/caolu-building.js 0 → 100644
View file @ 05ed529a
This source diff could not be displayed because it is too large. You can view the blob instead.
src/mock/caolu.js
View file @ 05ed529a
...@@ -49,7 +49,7 @@ export default { ...@@ -49,7 +49,7 @@ export default {
[121.646363, 31.29713] [121.646363, 31.29713]
], ],
'community': [{ 'community': [{
name: '民风小区', name: '川沙路326弄',
address: '川沙路326弄', address: '川沙路326弄',
level: 2, level: 2,
location: [121.666008, 31.279523], location: [121.666008, 31.279523],
...@@ -199,7 +199,7 @@ export default { ...@@ -199,7 +199,7 @@ export default {
}, { }, {
'name': '银丰苑', 'name': '银丰苑',
'address': '银峰路549弄1-171号', 'address': '银峰路549弄1-171号',
'level': 2, 'level': 1,
'location': [121.68779, 31.267045], 'location': [121.68779, 31.267045],
'path': [ 'path': [
[121.688748, 31.268906], [121.688748, 31.268906],
...@@ -283,7 +283,7 @@ export default { ...@@ -283,7 +283,7 @@ export default {
[121.666823, 31.275305] [121.666823, 31.275305]
] ]
}, { }, {
name: '顾路阳光苑南区', name: '民耀路268弄',
address: '民耀路268弄1-34号', address: '民耀路268弄1-34号',
level: 1, level: 1,
location: [121.652693, 31.272165], location: [121.652693, 31.272165],
...@@ -343,7 +343,7 @@ export default { ...@@ -343,7 +343,7 @@ export default {
[121.65355, 31.275371] [121.65355, 31.275371]
] ]
}, { }, {
'name': '民同路10弄', 'name': '民同10弄',
'address': '民同路10弄1-6号', 'address': '民同路10弄1-6号',
'level': 1, 'level': 1,
'location': [121.650247, 31.274278], 'location': [121.650247, 31.274278],
...@@ -355,7 +355,7 @@ export default { ...@@ -355,7 +355,7 @@ export default {
[121.650771, 31.274374] [121.650771, 31.274374]
] ]
}, { }, {
name: '阳光苑1期至3期', name: '民同路40弄',
address: '民同路40弄', address: '民同路40弄',
level: 1, level: 1,
location: [121.650688, 31.273385], location: [121.650688, 31.273385],
...@@ -374,7 +374,7 @@ export default { ...@@ -374,7 +374,7 @@ export default {
[121.649847, 31.2739] [121.649847, 31.2739]
] ]
}, { }, {
name: '顾路阳光苑-北区', name: '民耀路98弄',
address: '民耀路98弄1-27号民耀路96、100号', address: '民耀路98弄1-27号民耀路96、100号',
level: 1, level: 1,
location: [121.65162, 31.274128], location: [121.65162, 31.274128],
......
src/mock/index.js
View file @ 05ed529a
import caolu from './caolu' import caolu from './caolu'
import caoluBuilding from './caolu-building'
import dongming from './dongming' import dongming from './dongming'
import gaodong from './gaodong' import gaodong from './gaodong'
import gaoxing from './gaoxing' import gaoxing from './gaoxing'
...@@ -6,6 +7,7 @@ import hangtou from './hangtou' ...@@ -6,6 +7,7 @@ import hangtou from './hangtou'
import hudong from './hudong' import hudong from './hudong'
import huamu from './huamu' import huamu from './huamu'
import jinqiao from './jinqiao' import jinqiao from './jinqiao'
import jinqiaoBuilding from './jinqiao-building'
import jinyang from './jinyang' import jinyang from './jinyang'
import jinyangBuilding from './jinyang-building' import jinyangBuilding from './jinyang-building'
import lujiazui from './lujiazui' import lujiazui from './lujiazui'
...@@ -79,4 +81,6 @@ export const mockBuilding = { ...@@ -79,4 +81,6 @@ export const mockBuilding = {
jinyangBuilding, jinyangBuilding,
yangjingBuilding, yangjingBuilding,
chuanshaBuilding, chuanshaBuilding,
caoluBuilding,
jinqiaoBuilding,
} }
src/mock/jinqiao-building.js 0 → 100644
View file @ 05ed529a
This source diff could not be displayed because it is too large. You can view the blob instead.
src/mock/jinqiao.js
View file @ 05ed529a
...@@ -141,7 +141,7 @@ export default { ...@@ -141,7 +141,7 @@ export default {
[121.588871, 31.283549] [121.588871, 31.283549]
], ],
'community': [{ 'community': [{
'name': '张桥小区(佳林路)', 'name': '张桥小区',
'address': '佳林路962弄1-12号', 'address': '佳林路962弄1-12号',
'level': 2, 'level': 2,
'location': [121.611623, 31.264485], 'location': [121.611623, 31.264485],
...@@ -169,13 +169,18 @@ export default { ...@@ -169,13 +169,18 @@ export default {
}, { }, {
'name': '永宁路136弄', 'name': '永宁路136弄',
'address': '永宁路136弄', 'address': '永宁路136弄',
'level': 2, 'level': 3,
'location': [121.609949, 31.265870], 'location': [121.609849,31.266232],
'path': [], 'path': [
[121.609977,31.265773],
[121.610384,31.266146],
[121.609743,31.266751],
[121.609322,31.266429],
],
}, { }, {
'name': '永建路86弄小区', 'name': '永建路86弄',
'address': '永建路86弄1-35号', 'address': '永建路86弄1-35号',
'level': 3, 'level': 2,
'location': [121.615862, 31.263585], 'location': [121.615862, 31.263585],
'path': [ 'path': [
[121.616596, 31.264696], [121.616596, 31.264696],
...@@ -191,21 +196,25 @@ export default { ...@@ -191,21 +196,25 @@ export default {
[121.616596, 31.264696] [121.616596, 31.264696]
] ]
}, { }, {
'name': '永宁路122弄小区', 'name': '永宁路122弄',
'address': '浦东永宁路122弄', 'address': '浦东永宁路122弄',
'level': 2, 'level': 2,
'location': [121.611175, 31.266957], 'location': [121.611175, 31.266957],
'path': [ 'path': [
[121.611294, 31.267317], // [121.611294, 31.267317],
[121.611581, 31.266932], // [121.611581, 31.266932],
[121.611073, 31.266609], // [121.611073, 31.266609],
[121.610754, 31.266957], // [121.610754, 31.266957],
[121.611294, 31.267317] // [121.611294, 31.267317]
[121.610788,31.26697],
[121.611092,31.26662],
[121.611623,31.266957],
[121.611327,31.267333],
] ]
}, { }, {
name: '佳虹小区2期', name: '佳虹小区2期',
address: '永业路188弄1-16号', address: '永业路188弄1-16号',
level: 3, level: 1,
location: [121.615809, 31.266854], location: [121.615809, 31.266854],
path: [ path: [
[121.616591, 31.266715], [121.616591, 31.266715],
...@@ -243,14 +252,14 @@ export default { ...@@ -243,14 +252,14 @@ export default {
[121.614611, 31.266765] [121.614611, 31.266765]
] ]
}, { }, {
name: '金浦小区(金桥路)', name: '金浦小区',
address: '金桥路2552弄', address: '金桥路2552弄',
level: 2, level: 2,
location: [ 121.602448, 31.234428 ], location: [ 121.602448, 31.234428 ],
path: path:
[ [ 121.602684, 31.233716 ], [ [ 121.602684, 31.233716 ],
[ 121.602543, 31.233776 ], [ 121.602543, 31.233776 ],
[ 121.601809, 31.233891 ], [121.601806,31.233886],
[ 121.601322, 31.234546 ], [ 121.601322, 31.234546 ],
[ 121.601277, 31.234643 ], [ 121.601277, 31.234643 ],
[ 121.601986, 31.234916 ], [ 121.601986, 31.234916 ],
...@@ -262,7 +271,7 @@ export default { ...@@ -262,7 +271,7 @@ export default {
}, { }, {
name: '三桥小区北区', name: '三桥小区北区',
address: '金桥路3299弄', address: '金桥路3299弄',
level: 3, level: 2,
location: [121.607794, 31.223276], location: [121.607794, 31.223276],
path: [ path: [
[121.607369, 31.22352], [121.607369, 31.22352],
...@@ -275,14 +284,13 @@ export default { ...@@ -275,14 +284,13 @@ export default {
}, { }, {
name: '三桥小区南区', name: '三桥小区南区',
address: '金桥路3379弄', address: '金桥路3379弄',
level: 3, level: 2,
location: [121.608724, 31.221391], location: [121.608724, 31.221391],
path: [ path: [
[121.608287, 31.221735], [121.608158,31.221643],
[121.608818, 31.221908], [121.608405,31.220808],
[121.609191, 31.221053], [121.609006,31.221],
[121.60858, 31.220899], [121.608668,31.221799],
[121.608287, 31.221735]
] ]
}, { }, {
'name': '金舍苑', 'name': '金舍苑',
...@@ -318,7 +326,7 @@ export default { ...@@ -318,7 +326,7 @@ export default {
[121.610413, 31.261459] [121.610413, 31.261459]
] ]
}, { }, {
'name': '金石苑(佳高路)', 'name': '金石苑',
'address': '杨高北路5291弄1-30号', 'address': '杨高北路5291弄1-30号',
'level': 2, 'level': 2,
'location': [121.606535, 31.264609], 'location': [121.606535, 31.264609],
...@@ -340,19 +348,19 @@ export default { ...@@ -340,19 +348,19 @@ export default {
[121.607277, 31.263272] [121.607277, 31.263272]
] ]
}, { }, {
name: '阳光欧洲城金色米兰苑', name: '金色米兰苑',
address: '佳乐路255弄1-53号', address: '佳乐路255弄1-53号',
level: 2, level: 2,
location: [121.61519, 31.269524], location: [121.61519, 31.269524],
path: [ path: [
[121.61354, 31.27024], [121.61354, 31.27024],
[121.616576, 31.27019], [121.616576, 31.27019],
[121.616622, 31.2701], [121.616623,31.270096],
[121.616624, 31.268635], [121.616657,31.268637],
[121.616528, 31.268589], [121.616528, 31.268589],
[121.615924, 31.268633], [121.615924, 31.268633],
[121.615557, 31.268695], [121.615557, 31.268695],
[121.614495, 31.268878], [121.61451,31.268849],
[121.614453, 31.26891], [121.614453, 31.26891],
[121.614455, 31.269241], [121.614455, 31.269241],
[121.614224, 31.269241], [121.614224, 31.269241],
...@@ -363,8 +371,8 @@ export default { ...@@ -363,8 +371,8 @@ export default {
[121.61354, 31.27024] [121.61354, 31.27024]
] ]
}, { }, {
name: '永业小区南区', name: '永业路42弄、94弄',
address: '佳林路', address: '永业路42弄、94弄',
level: 2, level: 2,
location: [121.614423, 31.264846], location: [121.614423, 31.264846],
path: [ path: [
...@@ -398,7 +406,7 @@ export default { ...@@ -398,7 +406,7 @@ export default {
[121.614625, 31.266108] [121.614625, 31.266108]
] ]
}, { }, {
'name': '永建路152弄小区', 'name': '永建路152弄',
'address': '永建路152弄1-6号', 'address': '永建路152弄1-6号',
'level': 3, 'level': 3,
'location': [121.616155, 31.264658], 'location': [121.616155, 31.264658],
...@@ -410,9 +418,9 @@ export default { ...@@ -410,9 +418,9 @@ export default {
[121.615734, 31.264578] [121.615734, 31.264578]
] ]
}, { }, {
name: '永业小区北区', name: '佳虹路50弄、佳林路919弄',
address: '佳虹路50弄1-30号', address: '佳虹路50弄1-30号',
level: 3, level: 2,
location: [121.61312, 31.266007], location: [121.61312, 31.266007],
path: [ path: [
[121.61197, 31.265369], [121.61197, 31.265369],
......
src/router/index.js
View file @ 05ed529a
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
const Main = () => import('@/views/main.vue') const Main = () => import('@/views/main.vue')
const Test = () => import('@/views/test.vue')
Vue.use(Router) Vue.use(Router)
...@@ -9,7 +10,12 @@ export default new Router({ ...@@ -9,7 +10,12 @@ export default new Router({
{ {
path: '/', path: '/',
name: 'main', name: 'main',
component: Main component: Main,
} },
{
path: '/test',
name: 'test',
component: Test,
},
] ]
}) })
src/util/common.js
View file @ 05ed529a
...@@ -11,4 +11,35 @@ export default{ ...@@ -11,4 +11,35 @@ 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 @ 05ed529a
...@@ -4,15 +4,6 @@ ...@@ -4,15 +4,6 @@
<Panel v-for="street in streetList" :key="street" :name="street"> <Panel v-for="street in streetList" :key="street" :name="street">
{{areaList[street].name}}小区列表 {{areaList[street].name}}小区列表
<div slot="content" class="community-list"> <div slot="content" class="community-list">
<!-- <Button
v-for="(item, index) in areaList[street].community"
:key="item.name + index"
@click="handleView(item)"
size="small"
type="text"
long>
{{item.name}}
</Button> -->
<div v-for="(item, index) in areaList[street].community" :key="item.name + index" style="display:flex;justify-content:space-between;"> <div v-for="(item, index) in areaList[street].community" :key="item.name + index" style="display:flex;justify-content:space-between;">
<Button <Button
@click="handleView(item)" @click="handleView(item)"
...@@ -27,7 +18,7 @@ ...@@ -27,7 +18,7 @@
</Panel> </Panel>
</Collapse> </Collapse>
<Modal v-model="detailModal" width="90%" :footer-hide="true"> <Modal v-model="detailModal" width="90%" :footer-hide="true">
<Table :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/> <Table v-if="detailModal" :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
</Modal> </Modal>
</div> </div>
</template> </template>
...@@ -110,7 +101,7 @@ export default { ...@@ -110,7 +101,7 @@ export default {
{ {
title: '小区', title: '小区',
key: 'name', key: 'name',
minWidth: 100, minWidth: 150,
fixed: 'left', fixed: 'left',
align: 'center', align: 'center',
}, },
...@@ -259,8 +250,13 @@ export default { ...@@ -259,8 +250,13 @@ export default {
this.addMarker(name) this.addMarker(name)
}, },
handleDetail({name}) { handleDetail({name}) {
if (!this.buildingList[`${this.curStreet}Building`]) return const buildingList = this.buildingList[`${this.curStreet}Building`]
this.detailData = this.buildingList[`${this.curStreet}Building`].building.filter(item => item.name.indexOf(name) >= 0) if (!buildingList) return
// this.detailData = buildingList.building.filter(item => item.name.indexOf(name) >= 0)
this.detailData = buildingList.building.filter(item => {
const buildingName = item.name && item.name.replace('(补)', '').replace('（补）', '')
return buildingName.indexOf(name) >= 0
})
this.detailModal = true this.detailModal = true
}, },
handleSelect(key) { handleSelect(key) {
......
src/views/test.vue 0 → 100644
View file @ 05ed529a
<template>
<div id="container">
<Collapse v-model="curStreet" @on-change="handleSelect" class="menu" accordion>
<Panel v-for="street in streetList" :key="street" :name="street">
{{areaList[street].name}}小区列表
<div slot="content" class="community-list">
<div v-for="(item, index) in areaList[street].community" :key="item.name + index" style="display:flex;justify-content:space-between;">
<Button
@click="handleView(item)"
size="small"
type="text"
long>
{{item.name}}
</Button>
<a @click="handleDetail(item)" style="display:block;min-width:5rem;text-align:right;">详情</a>
</div>
</div>
</Panel>
</Collapse>
<Modal v-model="detailModal" width="90%" :footer-hide="true">
<Table :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
</Modal>
</div>
</template>
<script>
const {AMap} = window
const star1 = require('@/assets/images/star1.png')
const star2 = require('@/assets/images/star2.png')
const star3 = require('@/assets/images/star3.png')
import {mockCommunity, mockBuilding} from '@/mock/index.js'
export default {
name: 'Test',
data() {
return {
map: null,
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,
showLabel: true,
zoom: 15,
pitch:0,
rotation:45,
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
zooms: [10,20],
center: [121.544379, 31.221517], // 浦东新区
showIndoorMap:false,
// mapStyle:'amap://styles/light',
features:['bg','road'],
},
areaList: mockCommunity,
buildingList: mockBuilding,
streetList: [],
curStreetPolygon: null,
curStreet: null,
markerList: [],
detailModal: false,
columns: [
{
title: '小区',
key: 'name',
minWidth: 100,
fixed: 'left',
align: 'center',
},
{
title: '楼栋号',
key: 'buildingNo',
minWidth: 100,
fixed: 'left',
align: 'center',
},
{
title: '房屋性质',
key: 'type',
minWidth: 100,
align: 'center',
},
{
title: '房龄',
key: 'age',
minWidth: 100,
align: 'center',
},
{
title: '层高',
key: 'high',
minWidth: 100,
align: 'center',
},
{
title: '4层以上是否有70岁以上老人',
key: 'hasOld',
minWidth: 130,
align: 'center',
},
{
title: '4层以上是否有行动不便的残障人员',
key: 'hasDisabled',
minWidth: 150,
align: 'center',
},
{
title: '是否已有业主发起加梯动员',
key: 'hasMobilizatin',
minWidth: 130,
align: 'center',
},
{
title: '楼内邻里关系是否和睦',
key: 'hasPeace',
minWidth: 130,
align: 'center',
},
{
title: '楼内业主自住率是否高于80%',
key: 'hasSelf',
minWidth: 130,
align: 'center',
},
{
title: '一楼是否非居',
key: 'hasNonliving',
minWidth: 130,
align: 'center',
},
{
title: '是否有地下层',
key: 'hasUnderground',
minWidth: 130,
align: 'center',
},
{
title: '占用车道',
key: 'hasLane',
minWidth: 100,
align: 'center',
},
{
title: '占用绿化',
key: 'hasGreening',
minWidth: 100,
align: 'center',
},
{
title: '占用车位',
key: 'hasParking',
minWidth: 100,
align: 'center',
},
{
title: '楼间距',
key: 'spacing',
minWidth: 100,
align: 'center',
},
{
title: '连廊长度',
key: 'corridorLength',
minWidth: 100,
align: 'center',
},
{
title: '居民意愿',
key: 'intention',
minWidth: 100,
align: 'center',
},
],
detailData: [],
}
},
mounted() {
this.$nextTick(this.initMap)
},
methods: {
initMap(area) {
this.map = new AMap.Map('container', this.mapConfig)
// this.initLayers()
this.addController()
// this.addMarker()
this.addEvents()
this.highlightPudong()
this.initMenu()
},
initMenu() {
const streets = Object.keys(this.areaList)
if (this.$route.query && this.$route.query.name) { // 判断路由有街镇则显示该街镇列表，没街镇显示所有街镇列表
const streetName = this.$route.query.name
let result = null
streets.forEach(street => {
if (streetName.indexOf(this.areaList[street].name) >= 0) {
result = street
}
})
this.streetList = [result]
this.$nextTick(() => { // 为了展开默认街镇小区列表
this.curStreet = result
this.handleSelect([this.curStreet])
})
} else {
this.streetList = streets
}
},
handleView({name, address, location}) {
this.map.setZoomAndCenter(18, location)
this.showDetail(null, location, {title: name, content: address})
this.addMarker(name)
},
handleDetail({name}) {
if (!this.buildingList[`${this.curStreet}Building`]) return
this.detailData = this.buildingList[`${this.curStreet}Building`].building.filter(item => item.name.indexOf(name) >= 0)
this.detailModal = true
},
handleSelect(key) {
if (!key || key.length <= 0) return
this.map.setZoomAndCenter(15, this.areaList[key[0]].location)
if (this.curStreetPolygon) {
// this.map.remove(this.curStreetPolygon) // 移除之前的街镇区域底色
this.map.clearMap()
}
this.initLayers(key)
this.highlightArea(this.areaList[key[0]])
},
initLayers(street = null) { // 添加基础图层和建筑物图层
const keys = Object.keys(this.areaList)
if (keys.length <= 0) return
const communityList = []
if (street) {
communityList.push(...this.areaList[street].community)
if (this.buildingList[`${street}Building`]) {
communityList.push(...this.buildingList[`${street}Building`].community) // 添加个别不同色的，手动上色的楼栋
}
} else {
keys.forEach(key => {
communityList.push(...this.areaList[key].community)
})
}
const buildingOptions = {
areas: communityList.map(item => {
if (item.type != 'building') {
new AMap.Polygon({
zIndex: 10,
bubble:false,
fillColor: 'green',
fillOpacity:0.2,
strokeWeight:1,
path: item.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)
})
}
return {
rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: this.$com.switchBuildingColor(item.level)[0],//楼顶颜色
color2: this.$com.switchBuildingColor(item.level)[1],//楼面颜色
path: item.path || []
}
})
}
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.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
// })
},
addController() { // 添加地图控制器
this.map.addControl(new AMap.ControlBar({
showZoomBar:false,
showControlButton:true,
position:{
right:'10px',
top:'10px'
}
}))
},
addMarker(name) {
this.map.remove(this.markerList) // 移除之前的marker
if (!this.buildingList[`${this.curStreet}Building`]) return
const whichImage = (intention) => {
if (intention.indexOf('一') >= 0) {
return {
src: star1,
size: [10, 15],
}
} else if (intention.indexOf('二') >= 0 || intention.indexOf('两') >= 0) {
return {
src: star2,
size: [15, 15],
}
} else if (intention.indexOf('三') >= 0) {
return {
src: star3,
size: [20, 15],
}
}
}
const markerList = []
this.buildingList[`${this.curStreet}Building`].building.forEach(item => {
if(item.name.indexOf(name) >= 0 && item.lon && item.lat && item.intention) {
const image = whichImage(item.intention)
const style = {
img:image.src,
size:image.size,//可见区域的大小
fitZoom:18,//最合适的级别
scaleFactor:2,//地图放大一级的缩放比例系数
maxScale:1.4,//最大放大比例
minScale:0.8//最小放大比例
}
const marker = new AMap.ElasticMarker({
position: [item.lon, item.lat],
zooms:[16,20],
extData: {
title: item.buildingNo,
content: `居民意愿度:${item.intention}`
},
styles:[
{
icon:{
ancher:[0,30],//锚点
...style,
}
},
{
icon:{
ancher:[0,45],//锚点
...style,
}
},
{
icon:{
ancher:[0,60],//锚点
...style,
}
},
{
icon:{
ancher:[0,80],//锚点
...style,
}
},
{
icon:{
ancher:[0,100],//锚点
...style,
}
}
],
zoomStyleMapping: {
16:0,
17:1,
18:2,
19:3,
20:4,
}
}).on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
this.showDetail(e, location, marker.getExtData())
})
markerList.push(marker)
}
})
this.map.add(markerList)
this.markerList = markerList
// new AMap.Marker({
// map: this.map,
// position: [121.498973,31.218018],
// extData: {
// title: '测试点击',
// content: '测试额外附加数据',
// },
// icon: new AMap.Icon({
// size: new AMap.Size(30, 30), //图标大小
// image: require('@/assets/images/attorney.png'),
// // imageOffset: new AMap.Pixel(0, -60)
// })
// }).on('click', e => {
// const location = [e.lnglat.getLng(), e.lnglat.getLat()]
// this.showDetail(e, location, marker.getExtData())
// })
},
showDetail(e, location, data) {
// TODO
const infoWindow = new AMap.InfoWindow({
content: `
<div>
<b>${data.title}</b>
<p>${data.content || '暂无其他信息'}</p>
</div>
`
})
infoWindow.open(this.map, location)
},
addEvents() {
this.map.on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
// this.map.setZoomAndCenter(18.8, location)
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
})
},
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())
})
this.curStreetPolygon = polygon
// const outer = [
// new AMap.LngLat(-360,90,true),
// new AMap.LngLat(-360,-90,true),
// new AMap.LngLat(360,-90,true),
// new AMap.LngLat(360,90,true),
// ]
// const holes = [area.path]
// const pathArray = [
// outer
// ]
// pathArray.push.apply(pathArray,holes)
// const polygon1 = new AMap.Polygon( {
// pathL:pathArray,
// //线条颜色，使用16进制颜色代码赋值。默认值为#006600
// strokeColor: 'rgb(20,164,173)',
// strokeWeight: 4,
// //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// strokeOpacity:0.5,
// //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
// fillColor: 'rgba(255,255,255,0.3)',
// //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// fillOpacity: 1,
// //轮廓线样式，实线:solid，虚线:dashed
// strokeStyle:'dashed',
// /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
// ie9+浏览器有效 取值：
// 实线：[0,0,0]
// 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
// 点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
// 线和10个像素的空白 （如此反复）组成的虚线*/
// strokeDasharray:[10,2,10]
// })
// polygon1.setPath(pathArray)
// this.map.add(polygon1)
this.map.add([polygon])
},
highlightPudong() {
// new AMap.DistrictSearch({
// level: 'district',
// subdistric: 1,
// }).search('浦东新区', (status, result) => {
// console.log('---浦东新区街镇---', result.districtList[0].districtList)
// })
// 给浦东新区添加蓝色遮罩
// new AMap.DistrictSearch({
// level: 'district',
// extensions: 'all',
// subdistric: 1,
// }).search('浦东新区', (staus, result) => {
// var bounds = result.districtList[0].boundaries
// var polygon = new AMap.Polygon({
// strokeWeight: 1,
// path: bounds[0],
// fillOpacity: 0.4,
// fillColor: '#80d8ff',
// strokeColor: '#0091ea'
// })
// this.map.add([polygon])
// })
// 只显示浦东新区，其他置灰
// new AMap.DistrictSearch({
// extensions:'all',
// subdistrict:0
// }).search('浦东新区',(status,result) => {
// // 外多边形坐标数组和内多边形坐标数组
// const outer = [
// new AMap.LngLat(-360,90,true),
// new AMap.LngLat(-360,-90,true),
// new AMap.LngLat(360,-90,true),
// new AMap.LngLat(360,90,true),
// ]
// const holes = result.districtList[0].boundaries
// const pathArray = [
// outer
// ]
// pathArray.push.apply(pathArray,holes)
// const polygon = new AMap.Polygon( {
// pathL:pathArray,
// //线条颜色，使用16进制颜色代码赋值。默认值为#006600
// strokeColor: 'rgb(20,164,173)',
// strokeWeight: 4,
// //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// strokeOpacity:0.5,
// //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
// fillColor: 'rgba(255,255,255,0.3)',
// //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// fillOpacity: 1,
// //轮廓线样式，实线:solid，虚线:dashed
// strokeStyle:'dashed',
// /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
// ie9+浏览器有效 取值：
// 实线：[0,0,0]
// 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
// 点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
// 线和10个像素的空白 （如此反复）组成的虚线*/
// strokeDasharray:[10,2,10]
// })
// polygon.setPath(pathArray)
// this.map.add(polygon)
// })
},
},
computed: {
tableHeight() {
return screen.height / 2
}
}
}
</script>
<style lang="stylus" scoped>
#container
width 100%
height 100%
resize both
position relative
cursor auto
.menu
position absolute
width 18%
text-align left
top 1rem
left 1rem
z-index 100
max-height 90vh
overflow-y auto
</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