Skip to content

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

完善金杨街镇数据

parent 96eb6ce4
Hide whitespace changes
Inline Side-by-side
Showing with 72229 additions and 302 deletions
index.html
View file @ be76af1e
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
font-size: 1.6vh; font-size: 1.6vh;
} }
</style> </style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=ee2b5d5c0c44c768f1d2593eb4a7dfa6&plugin=Map3D,AMap.DistrictSearch,AMap.ControlBar"></script> <script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=ee2b5d5c0c44c768f1d2593eb4a7dfa6&plugin=Map3D,AMap.DistrictSearch,AMap.ControlBar,ElasticMarker"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/main.js
View file @ be76af1e
...@@ -5,7 +5,7 @@ import Vue from 'vue' ...@@ -5,7 +5,7 @@ import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import common from './util/common' import common from './util/common'
import {Icon, Button, Collapse, Panel} from 'view-design' import {Icon, Button, Collapse, Panel, Modal, Table} 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
...@@ -14,6 +14,8 @@ Vue.component('Button', Button) ...@@ -14,6 +14,8 @@ Vue.component('Button', Button)
Vue.component('Icon', Icon) 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('Table', Table)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
......
src/mock/index.js
View file @ be76af1e
...@@ -7,6 +7,7 @@ import hudong from './hudong' ...@@ -7,6 +7,7 @@ import hudong from './hudong'
import huamu from './huamu' import huamu from './huamu'
import jinqiao from './jinqiao' import jinqiao from './jinqiao'
import jinyang from './jinyang' import jinyang from './jinyang'
import jinyangBuilding from './jinyang-building'
import lujiazui from './lujiazui' import lujiazui from './lujiazui'
import shuyuan from './shuyuan' import shuyuan from './shuyuan'
import beicai from './beicai' import beicai from './beicai'
...@@ -26,7 +27,7 @@ import zhangjiang from './zhangjiang' ...@@ -26,7 +27,7 @@ import zhangjiang from './zhangjiang'
import zhoupu from './zhoupu' import zhoupu from './zhoupu'
import zhuqiao from './zhuqiao' import zhuqiao from './zhuqiao'
export default { export const mockCommunity = {
caolu, caolu,
dongming, dongming,
gaodong, gaodong,
...@@ -55,3 +56,7 @@ export default { ...@@ -55,3 +56,7 @@ export default {
zhoupu, zhoupu,
zhuqiao, zhuqiao,
} }
export const mockBuilding = {
jinyangBuilding,
}
src/mock/jinyang-building.js 0 → 100644
View file @ be76af1e
This source diff could not be displayed because it is too large. You can view the blob instead.
src/mock/jinyang.js
View file @ be76af1e
...@@ -152,7 +152,7 @@ export default { ...@@ -152,7 +152,7 @@ export default {
}, { }, {
'name': '始信北苑', 'name': '始信北苑',
'address': '栖山路1636弄1-35号', 'address': '栖山路1636弄1-35号',
'level': 3, 'level': 1,
'location': [121.568141, 31.257815], 'location': [121.568141, 31.257815],
'path': [ 'path': [
[121.56812, 31.256573], [121.56812, 31.256573],
...@@ -182,7 +182,7 @@ export default { ...@@ -182,7 +182,7 @@ export default {
}, { }, {
'name': '黄山一村', 'name': '黄山一村',
'address': '博山东路440弄1-50号', 'address': '博山东路440弄1-50号',
'level': 3, 'level': 2,
'location': [121.568601, 31.252048], 'location': [121.568601, 31.252048],
'path': [ 'path': [
[121.567285, 31.251935], [121.567285, 31.251935],
...@@ -240,22 +240,7 @@ export default { ...@@ -240,22 +240,7 @@ export default {
[121.566188, 31.243942], [121.566188, 31.243942],
[121.564493, 31.242436] [121.564493, 31.242436]
] ]
}, { },{
'name': '大桥花苑',
'address': '居家桥路151弄11-33号',
'level': 1,
'location': [121.5621, 31.260843],
'path': [
[121.561441, 31.260174],
[121.56113, 31.260603],
[121.561634, 31.260859],
[121.561676, 31.260941],
[121.562733, 31.261531],
[121.56304, 31.261059],
[121.56189, 31.260388],
[121.561441, 31.260174]
]
}, {
name: '罗山四村北区', name: '罗山四村北区',
address: '万德路45弄1-18号', address: '万德路45弄1-18号',
level: 3, level: 3,
...@@ -317,7 +302,7 @@ export default { ...@@ -317,7 +302,7 @@ export default {
[121.57402, 31.26034] [121.57402, 31.26034]
] ]
}, { }, {
'name': '蝶恋园', 'name': '蝶恋苑',
'address': '栖山路1899弄1-49号', 'address': '栖山路1899弄1-49号',
'level': 3, 'level': 3,
'location': [121.572371, 31.262355], 'location': [121.572371, 31.262355],
...@@ -366,7 +351,7 @@ export default { ...@@ -366,7 +351,7 @@ export default {
}, { }, {
'name': '上泰花苑', 'name': '上泰花苑',
'address': '张杨路2855弄1-51号', 'address': '张杨路2855弄1-51号',
'level': 3, 'level': 1,
'location': [121.563419, 31.246141], 'location': [121.563419, 31.246141],
'path': [ 'path': [
[121.562211, 31.246069], [121.562211, 31.246069],
...@@ -402,7 +387,7 @@ export default { ...@@ -402,7 +387,7 @@ export default {
[121.582441, 31.252501] [121.582441, 31.252501]
] ]
}, { }, {
'name': '栖山路一八六一弄', 'name': '栖山路1861弄',
'address': '栖山路1861弄1-34号', 'address': '栖山路1861弄1-34号',
'level': 3, 'level': 3,
'location': [121.570679, 31.261471], 'location': [121.570679, 31.261471],
...@@ -632,7 +617,7 @@ export default { ...@@ -632,7 +617,7 @@ export default {
}, { }, {
'name': '金杨九街坊', 'name': '金杨九街坊',
'address': '金杨路685弄1-57号', 'address': '金杨路685弄1-57号',
'level': 3, 'level': 2,
'location': [121.581557, 31.253448], 'location': [121.581557, 31.253448],
'path': [ 'path': [
[121.584561, 31.255095], [121.584561, 31.255095],
...@@ -705,7 +690,7 @@ export default { ...@@ -705,7 +690,7 @@ export default {
}, { }, {
name: '金樟花苑', name: '金樟花苑',
address: '栖山路1555弄1-34号', address: '栖山路1555弄1-34号',
level: 1, level: 2,
location: [121.564975, 31.258681], location: [121.564975, 31.258681],
path: [ path: [
[121.565303, 31.259174], [121.565303, 31.259174],
...@@ -754,7 +739,7 @@ export default { ...@@ -754,7 +739,7 @@ export default {
}, { }, {
name: '罗山二村', name: '罗山二村',
address: '德平路24弄15-31号', address: '德平路24弄15-31号',
level: 3, level: 2,
location: [121.556887, 31.253225], location: [121.556887, 31.253225],
path: [ path: [
[121.557909, 31.252971], [121.557909, 31.252971],
...@@ -780,77 +765,23 @@ export default { ...@@ -780,77 +765,23 @@ export default {
[121.557909, 31.252971] [121.557909, 31.252971]
] ]
}, { }, {
'name': '罗山三村', 'name': '罗山三1村',
'address': '博山东路111弄1-20号', address: '栖山路1088弄1-34号',
'level': 2, level: 3,
'location': [121.55955, 31.252983], location: [ 121.559568, 31.252905 ],
'path': [ path:
[121.558381, 31.252818], [ [ 121.558612, 31.253022 ],
[121.55836, 31.252836], [ 121.558707, 31.252963 ],
[121.558354, 31.252853], [ 121.558974, 31.253147 ],
[121.558354, 31.252872], [ 121.559164, 31.253278 ],
[121.558364, 31.252888], [ 121.559508, 31.253459 ],
[121.558596, 31.253022], [ 121.559465, 31.253674 ],
[121.558609, 31.253029], [ 121.559747, 31.253866 ],
[121.558628, 31.253029], [ 121.560718, 31.252948 ],
[121.558646, 31.253022], [ 121.560014, 31.252488 ],
[121.558675, 31.253008], [ 121.559272, 31.252027 ],
[121.558696, 31.253001], [ 121.558365, 31.252857 ],
[121.558709, 31.253001], [ 121.558612, 31.253022 ] ]
[121.558721, 31.253006],
[121.558729, 31.253012],
[121.558907, 31.253131],
[121.559131, 31.253275],
[121.55946, 31.25349],
[121.559473, 31.253507],
[121.559477, 31.253523],
[121.559477, 31.253532],
[121.55945, 31.253664],
[121.559457, 31.253687],
[121.559469, 31.253706],
[121.559721, 31.253875],
[121.559737, 31.253877],
[121.559755, 31.253875],
[121.559791, 31.253854],
[121.559928, 31.253721],
[121.560665, 31.253008],
[121.560731, 31.252954],
[121.560739, 31.252951],
[121.560751, 31.252952],
[121.560762, 31.252957],
[121.560775, 31.252961],
[121.561443, 31.253398],
[121.561475, 31.253416],
[121.561498, 31.253419],
[121.561525, 31.253419],
[121.561554, 31.253406],
[121.561911, 31.253099],
[121.562499, 31.252461],
[121.563215, 31.251647],
[121.563696, 31.251105],
[121.564336, 31.250377],
[121.564345, 31.250359],
[121.564345, 31.250336],
[121.564334, 31.25032],
[121.56431, 31.250302],
[121.564167, 31.250202],
[121.563907, 31.250028],
[121.563416, 31.249748],
[121.563105, 31.249524],
[121.562539, 31.249171],
[121.562486, 31.249152],
[121.562449, 31.249146],
[121.562394, 31.249142],
[121.562346, 31.249142],
[121.562311, 31.249146],
[121.562285, 31.249152],
[121.562053, 31.249373],
[121.561525, 31.249854],
[121.560909, 31.250422],
[121.559627, 31.251614],
[121.559296, 31.251991],
[121.558381, 31.252818]
]
}, { }, {
'name': '金芙苑', 'name': '金芙苑',
'address': '枣庄路769弄1-10号', 'address': '枣庄路769弄1-10号',
...@@ -909,7 +840,7 @@ export default { ...@@ -909,7 +840,7 @@ export default {
[121.562731, 31.242613] [121.562731, 31.242613]
] ]
}, { }, {
name: '仁和花苑(德平路)', name: '仁和花苑',
address: '德平路730弄1-23号', address: '德平路730弄1-23号',
level: 3, level: 3,
location: [ 121.564508, 31.244579 ], location: [ 121.564508, 31.244579 ],
...@@ -931,7 +862,7 @@ export default { ...@@ -931,7 +862,7 @@ export default {
}, { }, {
'name': '黄山始信苑', 'name': '黄山始信苑',
'address': '枣庄路212弄1-38号', 'address': '枣庄路212弄1-38号',
'level': 3, 'level': 2,
'location': [121.57045, 31.2562], 'location': [121.57045, 31.2562],
'path': [ 'path': [
[121.570013, 31.253879], [121.570013, 31.253879],
...@@ -1095,7 +1026,7 @@ export default { ...@@ -1095,7 +1026,7 @@ export default {
[121.573993, 31.240016] [121.573993, 31.240016]
] ]
}, { }, {
'name': '金杨路750弄小区(金杨路)', 'name': '金杨路750弄小区',
'address': '金杨路750弄29-69号', 'address': '金杨路750弄29-69号',
'level': 3, 'level': 3,
'location': [121.584756, 31.251909], 'location': [121.584756, 31.251909],
...@@ -1156,31 +1087,21 @@ export default { ...@@ -1156,31 +1087,21 @@ export default {
[121.573004, 31.248406] [121.573004, 31.248406]
] ]
}, { }, {
'name': '六街坊小区', name: '金杨新村六街坊',
'address': '梅花路768弄1-30号', address: '灵山路2000弄1-39号',
'level': 2, level: 2,
'location': [121.554057, 31.20863], location: [ 121.57434, 31.24232 ],
'path': [ path:
[121.555052, 31.20801], [ [ 121.574577, 31.241515 ],
[121.553854, 31.207801], [ 121.574157, 31.241303 ],
[121.553685, 31.208504], [ 121.573208, 31.242698 ],
[121.553098, 31.208397], [ 121.574513, 31.243338 ],
[121.553042, 31.208436], [ 121.575482, 31.241933 ],
[121.552992, 31.208449], [ 121.574577, 31.241515 ] ]
[121.552844, 31.209136],
[121.553704, 31.209217],
[121.554357, 31.209278],
[121.554611, 31.209284],
[121.5547, 31.209265],
[121.554771, 31.2092],
[121.554799, 31.209159],
[121.55495, 31.208576],
[121.555052, 31.20801]
]
}, { }, {
name: '陆家嘴新景园1期', name: '陆家嘴新景园1期',
address: '云山路1050弄1-15号', address: '云山路1050弄1-15号',
level: 1, level: 3,
location: [121.571909, 31.248612], location: [121.571909, 31.248612],
path: [ path: [
[121.571904, 31.247828], [121.571904, 31.247828],
...@@ -1241,7 +1162,7 @@ export default { ...@@ -1241,7 +1162,7 @@ export default {
[121.574249, 31.247029] [121.574249, 31.247029]
] ]
}, { }, {
'name': '金芝苑(枣庄路)', 'name': '金芝苑',
'address': '枣庄路853弄1-24号', 'address': '枣庄路853弄1-24号',
'level': 3, 'level': 3,
'location': [121.582986, 31.249211], 'location': [121.582986, 31.249211],
...@@ -1290,80 +1211,24 @@ export default { ...@@ -1290,80 +1211,24 @@ export default {
[121.58633, 31.248674], [121.58633, 31.248674],
[121.586788, 31.248273] [121.586788, 31.248273]
] ]
}, { },{
'name': '罗山三村', name: '罗山三2村',
'address': '博山东路111弄1-20号', address: '博山东路',
'level': 2, level: 2,
'location': [121.55955, 31.252983], location: [ 121.561984, 31.251126 ],
'path': [ path:
[121.558381, 31.252818], [ [ 121.559648, 31.251609 ],
[121.55836, 31.252836], [ 121.559878, 31.251919 ],
[121.558354, 31.252853], [ 121.560403, 31.252348 ],
[121.558354, 31.252872], [ 121.56108, 31.252734 ],
[121.558364, 31.252888], [ 121.561831, 31.253155 ],
[121.558596, 31.253022], [ 121.562648, 31.25227 ],
[121.558609, 31.253029], [ 121.564332, 31.250357 ],
[121.558628, 31.253029], [ 121.562536, 31.249186 ],
[121.558646, 31.253022], [ 121.562301, 31.249162 ],
[121.558675, 31.253008], [ 121.559648, 31.251609 ] ]
[121.558696, 31.253001], }, {
[121.558709, 31.253001], 'name': '罗山一村',
[121.558721, 31.253006],
[121.558729, 31.253012],
[121.558907, 31.253131],
[121.559131, 31.253275],
[121.55946, 31.25349],
[121.559473, 31.253507],
[121.559477, 31.253523],
[121.559477, 31.253532],
[121.55945, 31.253664],
[121.559457, 31.253687],
[121.559469, 31.253706],
[121.559721, 31.253875],
[121.559737, 31.253877],
[121.559755, 31.253875],
[121.559791, 31.253854],
[121.559928, 31.253721],
[121.560665, 31.253008],
[121.560731, 31.252954],
[121.560739, 31.252951],
[121.560751, 31.252952],
[121.560762, 31.252957],
[121.560775, 31.252961],
[121.561443, 31.253398],
[121.561475, 31.253416],
[121.561498, 31.253419],
[121.561525, 31.253419],
[121.561554, 31.253406],
[121.561911, 31.253099],
[121.562499, 31.252461],
[121.563215, 31.251647],
[121.563696, 31.251105],
[121.564336, 31.250377],
[121.564345, 31.250359],
[121.564345, 31.250336],
[121.564334, 31.25032],
[121.56431, 31.250302],
[121.564167, 31.250202],
[121.563907, 31.250028],
[121.563416, 31.249748],
[121.563105, 31.249524],
[121.562539, 31.249171],
[121.562486, 31.249152],
[121.562449, 31.249146],
[121.562394, 31.249142],
[121.562346, 31.249142],
[121.562311, 31.249146],
[121.562285, 31.249152],
[121.562053, 31.249373],
[121.561525, 31.249854],
[121.560909, 31.250422],
[121.559627, 31.251614],
[121.559296, 31.251991],
[121.558381, 31.252818]
]
}, {
'name': '罗山一村(栖山路)',
'address': '龙居路30弄2-32号', 'address': '龙居路30弄2-32号',
'level': 1, 'level': 1,
'location': [121.558473, 31.254496], 'location': [121.558473, 31.254496],
...@@ -1417,46 +1282,7 @@ export default { ...@@ -1417,46 +1282,7 @@ export default {
[121.56599, 31.248373] [121.56599, 31.248373]
] ]
}, { }, {
'name': '金杨新村五街坊', 'name': '银山小区',
'address': '金杨路308弄之1-52号',
'level': 2,
'location': [121.577386, 31.245434],
'path': [
[121.57944, 31.244427],
[121.579538, 31.244006],
[121.579321, 31.243886],
[121.579512, 31.243549],
[121.577379, 31.242542],
[121.577202, 31.242479],
[121.577077, 31.242544],
[121.576314, 31.243612],
[121.576857, 31.24392],
[121.576314, 31.244699],
[121.57613, 31.244917],
[121.576018, 31.245359],
[121.575283, 31.245526],
[121.575043, 31.245424],
[121.574194, 31.246668],
[121.574198, 31.246758],
[121.574239, 31.246814],
[121.57434, 31.246873],
[121.574848, 31.246986],
[121.578417, 31.247729],
[121.578579, 31.24773],
[121.578698, 31.247704],
[121.578832, 31.247642],
[121.57907, 31.247421],
[121.579622, 31.246824],
[121.579606, 31.246752],
[121.578928, 31.246615],
[121.579149, 31.245752],
[121.579098, 31.2456],
[121.57923, 31.245119],
[121.579304, 31.244869],
[121.57944, 31.244427]
]
}, {
'name': '银山小区(银山路)',
'address': '银山路200弄之1-71号', 'address': '银山路200弄之1-71号',
'level': 3, 'level': 3,
'location': [121.580653, 31.243379], 'location': [121.580653, 31.243379],
...@@ -1509,40 +1335,32 @@ export default { ...@@ -1509,40 +1335,32 @@ export default {
[121.589696, 31.249566] [121.589696, 31.249566]
] ]
}, { }, {
'name': '梅园三街坊', name: '金杨新村三街坊',
'address': '商城路1025弄-1-29号附近', address: '枣庄路658弄1-56号',
'level': 2, level: 2,
'location': [121.524249, 31.234401], location: [ 121.577974, 31.250455 ],
'path': [ path:
[121.524081, 31.234806], [ [ 121.578322, 31.248367 ],
[121.52411, 31.234847], [ 121.5776, 31.249096 ],
[121.524371, 31.234941], [ 121.576666, 31.25003 ],
[121.525251, 31.235245], [ 121.575784, 31.250903 ],
[121.525616, 31.234676], [ 121.575647, 31.251037 ],
[121.526249, 31.23491], [ 121.575842, 31.251199 ],
[121.526478, 31.234427], [ 121.57599, 31.251314 ],
[121.526501, 31.23436], [ 121.576458, 31.251653 ],
[121.526493, 31.234315], [ 121.576839, 31.251971 ],
[121.526474, 31.234276], [ 121.577088, 31.252215 ],
[121.526412, 31.234229], [ 121.577304, 31.252447 ],
[121.525379, 31.233739], [ 121.578121, 31.25187 ],
[121.524488, 31.23331], [ 121.578725, 31.251454 ],
[121.523727, 31.232954], [ 121.579185, 31.251129 ],
[121.523651, 31.232965], [ 121.579982, 31.250567 ],
[121.523564, 31.233012], [ 121.580249, 31.250307 ],
[121.523513, 31.233068], [ 121.57971, 31.249754 ],
[121.523484, 31.233135], [ 121.57963, 31.249609 ],
[121.523027, 31.234142], [ 121.579199, 31.24916 ],
[121.522666, 31.23489], [ 121.579297, 31.249053 ],
[121.522431, 31.235377], [ 121.578322, 31.248367 ] ]
[121.52244, 31.235453],
[121.522496, 31.235522],
[121.522558, 31.235559],
[121.523508, 31.235875],
[121.523974, 31.234919],
[121.524025, 31.234805],
[121.524081, 31.234806]
]
}, { }, {
'name': '罗山八村', 'name': '罗山八村',
'address': '德平路215弄1-59号', 'address': '德平路215弄1-59号',
...@@ -1597,7 +1415,7 @@ export default { ...@@ -1597,7 +1415,7 @@ export default {
[121.563556, 31.251426] [121.563556, 31.251426]
] ]
}, { }, {
'name': '寺前浜小区(团林路)', 'name': '寺前浜小区',
'address': '浦东大道2639弄1-36号', 'address': '浦东大道2639弄1-36号',
'level': 1, 'level': 1,
'location': [121.567991, 31.265056], 'location': [121.567991, 31.265056],
...@@ -1689,7 +1507,7 @@ export default { ...@@ -1689,7 +1507,7 @@ export default {
}, { }, {
'name': '香山新村西南街坊', 'name': '香山新村西南街坊',
'address': '德平路1134弄54号', 'address': '德平路1134弄54号',
'level': 1, 'level': 3,
'location': [121.568808, 31.238865], 'location': [121.568808, 31.238865],
'path': [ 'path': [
[121.568554, 31.237417], [121.568554, 31.237417],
......
src/views/main.vue
View file @ be76af1e
<template> <template>
<div id="container"> <div id="container">
<Collapse @on-change="handleSelect" class="menu" accordion> <Collapse v-model="curStreet" @on-change="handleSelect" class="menu" accordion>
<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 <!-- <Button
v-for="(item, index) in areaList[street].community" v-for="(item, index) in areaList[street].community"
:key="item.name + index" :key="item.name + index"
@click="handleView(item)" @click="handleView(item)"
...@@ -12,17 +12,32 @@ ...@@ -12,17 +12,32 @@
type="text" type="text"
long> long>
{{item.name}} {{item.name}}
</Button> </Button> -->
<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> </div>
</Panel> </Panel>
</Collapse> </Collapse>
<Modal v-model="detailModal" width="90%" :footer-hide="true">
<Table :columns="columns" :data="detailData" size="small" max-height="500"/>
</Modal>
</div> </div>
</template> </template>
<script> <script>
const {AMap} = window const {AMap} = window
import axios from 'axios' const star1 = require('@/assets/images/star1.png')
import mock from '@/mock/index.js' const star2 = require('@/assets/images/star2.png')
const star3 = require('@/assets/images/star3.png')
import {mockCommunity, mockBuilding} from '@/mock/index.js'
export default { export default {
name: 'Map3D', name: 'Map3D',
data() { data() {
...@@ -84,13 +99,109 @@ export default { ...@@ -84,13 +99,109 @@ export default {
// mapStyle:'amap://styles/light', // mapStyle:'amap://styles/light',
features:['bg','road'], features:['bg','road'],
}, },
areaList: mock, areaList: mockCommunity,
buildingList: mockBuilding,
streetList: [], streetList: [],
curStreetPolygon: null, curStreetPolygon: null,
curStreet: null,
markerList: [],
detailModal: false,
columns: [
{
title: '小区',
key: 'name',
minWidth: 50,
},
{
title: '楼栋号',
key: 'buildingNo',
minWidth: 50,
},
{
title: '房屋性质',
key: 'type',
minWidth: 50,
},
{
title: '房龄',
key: 'age',
minWidth: 50,
},
{
title: '层高',
key: 'high',
minWidth: 50,
},
{
title: '4层以上是否有70岁以上老人',
key: 'hasOld',
minWidth: 50,
},
{
title: '4层以上是否有行动不便的残障人员',
key: 'hasDisabled',
minWidth: 50,
},
{
title: '是否已有业主发起加梯动员',
key: 'hasMobilization',
minWidth: 50,
},
{
title: '楼内邻里关系是否和睦',
key: 'hasPeace',
minWidth: 50,
},
{
title: '楼内业主自住率是否高于80%',
key: 'hasSelf',
minWidth: 50,
},
{
title: '一楼是否非居',
key: 'hasNonliving',
minWidth: 50,
},
{
title: '是否有地下层',
key: 'hasUnderground',
minWidth: 50,
},
{
title: '占用车道',
key: 'hasLane',
minWidth: 50,
},
{
title: '占用绿化',
key: 'hasGreening',
minWidth: 50,
},
{
title: '占用车位',
key: 'hasParking',
minWidth: 50,
},
{
title: '楼间距',
key: 'spacing',
minWidth: 50,
},
{
title: '连廊长度',
key: 'corridorLength',
minWidth: 50,
},
{
title: '居民意愿',
key: 'intention',
minWidth: 50,
},
],
detailData: [],
} }
}, },
mounted() { mounted() {
this.streetList = Object.keys(mock)
this.$nextTick(this.initMap) this.$nextTick(this.initMap)
}, },
methods: { methods: {
...@@ -101,10 +212,36 @@ export default { ...@@ -101,10 +212,36 @@ export default {
// this.addMarker() // this.addMarker()
this.addEvents() this.addEvents()
this.highlightPudong() 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}) { handleView({name, address, location}) {
this.map.setZoomAndCenter(18, location) this.map.setZoomAndCenter(18, location)
this.showDetail(null, location, {title: name, content: address}) 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) { handleSelect(key) {
if (!key || key.length <= 0) return if (!key || key.length <= 0) return
...@@ -122,6 +259,9 @@ export default { ...@@ -122,6 +259,9 @@ export default {
const communityList = [] const communityList = []
if (street) { if (street) {
communityList.push(...this.areaList[street].community) communityList.push(...this.areaList[street].community)
if (this.buildingList[`${street}Building`]) {
communityList.push(...this.buildingList[`${street}Building`].community) // 添加个别不同色的，手动上色的楼栋
}
} else { } else {
keys.forEach(key => { keys.forEach(key => {
communityList.push(...this.areaList[key].community) communityList.push(...this.areaList[key].community)
...@@ -140,8 +280,9 @@ export default { ...@@ -140,8 +280,9 @@ export default {
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(location) console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
this.map.setZoomAndCenter(18.8, location) this.map.setZoomAndCenter(18.8, location)
this.handleView(item)
this.showDetail(e, location, {title: item.name, content: item.address}) this.showDetail(e, location, {title: item.name, content: item.address})
}) })
} }
...@@ -190,23 +331,110 @@ export default { ...@@ -190,23 +331,110 @@ export default {
} }
})) }))
}, },
addMarker() { addMarker(name) {
new AMap.Marker({ this.map.remove(this.markerList) // 移除之前的marker
map: this.map, if (!this.buildingList[`${this.curStreet}Building`]) return
position: [121.498973,31.218018], const whichImage = (intention) => {
extData: { if (intention.indexOf('一') >= 0) {
title: '测试点击', return {
content: '测试额外附加数据', src: star1,
}, size: [10, 15],
icon: new AMap.Icon({ }
size: new AMap.Size(30, 30), //图标大小 } else if (intention.indexOf('二') >= 0 || intention.indexOf('两') >= 0) {
image: require('@/assets/images/attorney.png'), return {
// imageOffset: new AMap.Pixel(0, -60) src: star2,
}) size: [15, 15],
}).on('click', e => { }
const location = [e.lnglat.getLng(), e.lnglat.getLat()] } else if (intention.indexOf('三') >= 0) {
this.showDetail(e, location, marker.getExtData()) 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) { showDetail(e, location, data) {
// TODO // TODO
...@@ -237,8 +465,46 @@ export default { ...@@ -237,8 +465,46 @@ export default {
fillOpacity: 0.2, fillOpacity: 0.2,
fillColor: '#80d8ff', fillColor: '#80d8ff',
strokeColor: '#0091ea' strokeColor: '#0091ea'
}).on('click', e => {
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
}) })
this.curStreetPolygon = polygon 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]) this.map.add([polygon])
}, },
highlightPudong() { highlightPudong() {
...@@ -321,13 +587,13 @@ export default { ...@@ -321,13 +587,13 @@ export default {
position relative position relative
.menu .menu
position absolute position absolute
width 15% width 18%
text-align left text-align left
top 1rem top 1rem
left 1rem left 1rem
z-index 100 z-index 100
max-height 80vh // max-height 90vh
overflow-y auto // overflow-y auto
</style> </style>
<style lang="stylus"> <style lang="stylus">
.amap-logo .amap-logo
...@@ -339,7 +605,7 @@ export default { ...@@ -339,7 +605,7 @@ export default {
height 100% height 100%
.menu .menu
.ivu-collapse-content .ivu-collapse-content
max-height 60vh max-height 80vh
overflow-y auto overflow-y auto
overflow-x hidden overflow-x hidden
padding 0 1rem padding 0 1rem
......
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