Skip to content

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

减少打包体积

parent 77697d69
Hide whitespace changes
Inline Side-by-side
Showing with 654 additions and 653 deletions
src/mock/index.js
View file @ 8910fcab
import caolu from './caolu' import caolu from './caolu'
import caoluBuilding from './caolu-building' // import caoluBuilding from './caolu-building'
import dongming from './dongming' import dongming from './dongming'
import dongmingBuilding from './dongming-building' // import dongmingBuilding from './dongming-building'
import gaodong from './gaodong' import gaodong from './gaodong'
import gaodongBuilding from './gaodong-building' // import gaodongBuilding from './gaodong-building'
import gaoxing from './gaoxing' import gaoxing from './gaoxing'
import gaoxingBuilding from './gaoxing-building' // import gaoxingBuilding from './gaoxing-building'
import hangtou from './hangtou' import hangtou from './hangtou'
import hangtouBuilding from './hangtou-building' // import hangtouBuilding from './hangtou-building'
import hudong from './hudong' import hudong from './hudong'
import hudongBuilding from './hudong-building' // import hudongBuilding from './hudong-building'
import huamu from './huamu' import huamu from './huamu'
import huamuBuilding from './huamu-building' // import huamuBuilding from './huamu-building'
import jinqiao from './jinqiao' import jinqiao from './jinqiao'
import jinqiaoBuilding from './jinqiao-building' // 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'
import lujiazuiBuilding from './lujiazui-building' // import lujiazuiBuilding from './lujiazui-building'
import shuyuan from './shuyuan' import shuyuan from './shuyuan'
import shuyuanBuilding from './shuyuan-building' // import shuyuanBuilding from './shuyuan-building'
import beicai from './beicai' import beicai from './beicai'
import beicaiBuilding from './beicai-building' // import beicaiBuilding from './beicai-building'
import kangqiao from './kangqiao' import kangqiao from './kangqiao'
import kangqiaoBuilding from './kangqiao-building' // import kangqiaoBuilding from './kangqiao-building'
import nanhui from './nanhui' import nanhui from './nanhui'
import nanhuiBuilding from './nanhui-building' // import nanhuiBuilding from './nanhui-building'
import nanmatou from './nanmatou' import nanmatou from './nanmatou'
import nanmatouBuilding from './nanmatou-building' // import nanmatouBuilding from './nanmatou-building'
import nicheng from './nicheng' import nicheng from './nicheng'
import nichengBuilding from './nicheng-building' // import nichengBuilding from './nicheng-building'
import puxing from './puxing' import puxing from './puxing'
import puxingBuilding from './puxing-building' // import puxingBuilding from './puxing-building'
import sanlin from './sanlin' import sanlin from './sanlin'
import sanlinBuilding from './sanlin-building' // import sanlinBuilding from './sanlin-building'
import tangzhen from './tangzhen' import tangzhen from './tangzhen'
import tangzhenBuilding from './tangzhen-building' // import tangzhenBuilding from './tangzhen-building'
import wanxiang from './wanxiang' import wanxiang from './wanxiang'
import wanxiangBuilding from './wanxiang-building' // import wanxiangBuilding from './wanxiang-building'
import weifang from './weifang' import weifang from './weifang'
import weifangBuilding from './weifang-building' // import weifangBuilding from './weifang-building'
import xinchang from './xinchang' import xinchang from './xinchang'
import xinchangBuilding from './xinchang-building' // import xinchangBuilding from './xinchang-building'
import xuanqiao from './xuanqiao' import xuanqiao from './xuanqiao'
import xuanqiaoBuilding from './xuanqiao-building' // import xuanqiaoBuilding from './xuanqiao-building'
import yangjing from './yangjing' import yangjing from './yangjing'
import yangjingBuilding from './yangjing-building' // import yangjingBuilding from './yangjing-building'
import zhangjiang from './zhangjiang' import zhangjiang from './zhangjiang'
import zhangjiangBuilding from './zhangjiang-building' // import zhangjiangBuilding from './zhangjiang-building'
import zhoupu from './zhoupu' import zhoupu from './zhoupu'
import zhoupuBuilding from './zhoupu-building' // import zhoupuBuilding from './zhoupu-building'
import zhuqiao from './zhuqiao' import zhuqiao from './zhuqiao'
import zhuqiaoBuilding from './zhuqiao-building' // import zhuqiaoBuilding from './zhuqiao-building'
import chuansha from './chuansha' import chuansha from './chuansha'
import chuanshaBuilding from './chuansha-building' // import chuanshaBuilding from './chuansha-building'
import datuan from './datuan' import datuan from './datuan'
import datuanBuilding from './datuan-building' // import datuanBuilding from './datuan-building'
import gaoqiao from './gaoqiao' import gaoqiao from './gaoqiao'
import gaoqiaoBuilding from './gaoqiao-building' // import gaoqiaoBuilding from './gaoqiao-building'
import heqing from './heqing' import heqing from './heqing'
import heqingBuilding from './heqing-building' // import heqingBuilding from './heqing-building'
import laogang from './laogang' import laogang from './laogang'
import laogangBuilding from './laogang-building' // import laogangBuilding from './laogang-building'
import shanggang from './shanggang' import shanggang from './shanggang'
import shanggangBuilding from './shanggang-building' // import shanggangBuilding from './shanggang-building'
import tangqiao from './tangqiao' import tangqiao from './tangqiao'
import tangqiaoBuilding from './tangqiao-building' // import tangqiaoBuilding from './tangqiao-building'
import huinan from './huinan' import huinan from './huinan'
import huinanBuilding from './huinan-building' // import huinanBuilding from './huinan-building'
export const mockCommunity = { export const mockCommunity = {
caolu, caolu,
...@@ -107,40 +107,40 @@ export const mockCommunity = { ...@@ -107,40 +107,40 @@ export const mockCommunity = {
huinan, huinan,
} }
export const mockBuilding = { // export const mockBuilding = {
jinyangBuilding, // jinyangBuilding,
yangjingBuilding, // yangjingBuilding,
chuanshaBuilding, // chuanshaBuilding,
caoluBuilding, // caoluBuilding,
jinqiaoBuilding, // jinqiaoBuilding,
sanlinBuilding, // sanlinBuilding,
shanggangBuilding, // shanggangBuilding,
laogangBuilding, // laogangBuilding,
tangqiaoBuilding, // tangqiaoBuilding,
huinanBuilding, // huinanBuilding,
heqingBuilding, // heqingBuilding,
datuanBuilding, // datuanBuilding,
gaoqiaoBuilding, // gaoqiaoBuilding,
zhuqiaoBuilding, // zhuqiaoBuilding,
zhoupuBuilding, // zhoupuBuilding,
zhangjiangBuilding, // zhangjiangBuilding,
tangzhenBuilding, // tangzhenBuilding,
xinchangBuilding, // xinchangBuilding,
xuanqiaoBuilding, // xuanqiaoBuilding,
weifangBuilding, // weifangBuilding,
wanxiangBuilding, // wanxiangBuilding,
puxingBuilding, // puxingBuilding,
nichengBuilding, // nichengBuilding,
nanmatouBuilding, // nanmatouBuilding,
nanhuiBuilding, // nanhuiBuilding,
kangqiaoBuilding, // kangqiaoBuilding,
beicaiBuilding, // beicaiBuilding,
lujiazuiBuilding, // lujiazuiBuilding,
hangtouBuilding, // hangtouBuilding,
gaoxingBuilding, // gaoxingBuilding,
gaodongBuilding, // gaodongBuilding,
hudongBuilding, // hudongBuilding,
dongmingBuilding, // dongmingBuilding,
huamuBuilding, // huamuBuilding,
shuyuanBuilding, // shuyuanBuilding,
} // }
src/router/index.js
View file @ 8910fcab
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') // const Test = () => import('@/views/test.vue')
Vue.use(Router) Vue.use(Router)
...@@ -12,10 +12,10 @@ export default new Router({ ...@@ -12,10 +12,10 @@ export default new Router({
name: 'main', name: 'main',
component: Main, component: Main,
}, },
{ // {
path: '/test', // path: '/test',
name: 'test', // name: 'test',
component: Test, // component: Test,
}, // },
] ]
}) })
src/views/main.vue
View file @ 8910fcab
...@@ -28,7 +28,7 @@ const {AMap} = window ...@@ -28,7 +28,7 @@ const {AMap} = window
const star1 = require('@/assets/images/star1.png') const star1 = require('@/assets/images/star1.png')
const star2 = require('@/assets/images/star2.png') const star2 = require('@/assets/images/star2.png')
const star3 = require('@/assets/images/star3.png') const star3 = require('@/assets/images/star3.png')
import {mockCommunity, mockBuilding} from '@/mock/index.js' import {mockCommunity} from '@/mock/index.js'
export default { export default {
name: 'Map3D', name: 'Map3D',
data() { data() {
...@@ -91,7 +91,6 @@ export default { ...@@ -91,7 +91,6 @@ export default {
features:['bg','road'], features:['bg','road'],
}, },
areaList: mockCommunity, areaList: mockCommunity,
buildingList: mockBuilding,
streetList: [], streetList: [],
curStreetPolygon: null, curStreetPolygon: null,
curStreet: null, curStreet: null,
...@@ -250,10 +249,8 @@ export default { ...@@ -250,10 +249,8 @@ export default {
this.addMarker(name) this.addMarker(name)
}, },
handleDetail({name}) { handleDetail({name}) {
const buildingList = this.buildingList[`${this.curStreet}Building`] if (!this.buildingData) return
if (!buildingList) return this.detailData = this.buildingData.building.filter(item => {
// 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('（补）', '') 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
}) })
...@@ -275,8 +272,8 @@ export default { ...@@ -275,8 +272,8 @@ 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`]) { if (this.buildingData) {
communityList.push(...this.buildingList[`${street}Building`].community) // 添加个别不同色的，手动上色的楼栋 communityList.push(...this.buildingData.community) // 添加个别不同色的，手动上色的楼栋
} }
} else { } else {
keys.forEach(key => { keys.forEach(key => {
...@@ -347,7 +344,7 @@ export default { ...@@ -347,7 +344,7 @@ export default {
}, },
addMarker(name) { addMarker(name) {
this.map.remove(this.markerList) // 移除之前的marker this.map.remove(this.markerList) // 移除之前的marker
if (!this.buildingList[`${this.curStreet}Building`]) return if (!this.buildingData) return
const whichImage = (intention) => { const whichImage = (intention) => {
if (intention.indexOf('一') >= 0) { if (intention.indexOf('一') >= 0) {
return { return {
...@@ -367,7 +364,7 @@ export default { ...@@ -367,7 +364,7 @@ export default {
} }
} }
const markerList = [] const markerList = []
this.buildingList[`${this.curStreet}Building`].building.forEach(item => { this.buildingData.building.forEach(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 if (buildingName.indexOf(name) < 0 && (item.buildingNo + '').indexOf(name) < 0) return
if(item.lon && item.lat && item.intention) { if(item.lon && item.lat && item.intention) {
...@@ -595,6 +592,10 @@ export default { ...@@ -595,6 +592,10 @@ export default {
computed: { computed: {
tableHeight() { tableHeight() {
return screen.height / 2 return screen.height / 2
},
buildingData() {
const data = require(`@/mock/${this.curStreet}-building.js`)
return (data && data.default) || null
} }
} }
} }
......
src/views/test.vue
View file @ 8910fcab
<template> <template>
<div id="container"> <div id="container">
<Collapse v-model="curStreet" @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">
...@@ -19,579 +19,579 @@ ...@@ -19,579 +19,579 @@
</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 :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
</Modal> </Modal> -->
</div> </div>
</template> </template>
<script> // <script>
const {AMap} = window // const {AMap} = window
const star1 = require('@/assets/images/star1.png') // const star1 = require('@/assets/images/star1.png')
const star2 = require('@/assets/images/star2.png') // const star2 = require('@/assets/images/star2.png')
const star3 = require('@/assets/images/star3.png') // const star3 = require('@/assets/images/star3.png')
import {mockCommunity, mockBuilding} from '@/mock/index.js' // import {mockCommunity, mockBuilding} from '@/mock/index.js'
export default { // export default {
name: 'Test', // name: 'Test',
data() { // data() {
return { // return {
map: null, // map: null,
buildingOptions: { // buildingOptions: {
hideWithoutStyle:false,//是否隐藏设定区域外的楼块 // hideWithoutStyle:false,//是否隐藏设定区域外的楼块
areas:[ // areas:[
{ //围栏1 // { //围栏1
//visible:false,//是否可见 // //visible:false,//是否可见
rejectTexture:true,//是否屏蔽自定义地图的纹理 // rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ff99ff00',//楼顶颜色 // color1: 'ff99ff00',//楼顶颜色
color2: 'ff999900',//楼面颜色 // color2: 'ff999900',//楼面颜色
path: [ // path: [
[121.498447,31.217582], // [121.498447,31.217582],
[121.498466,31.218851], // [121.498466,31.218851],
[121.497402,31.218943], // [121.497402,31.218943],
[121.497423,31.217595], // [121.497423,31.217595],
] // ]
}, // },
{ // {
rejectTexture:true,//是否屏蔽自定义地图的纹理 // rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ffcc0000',//楼顶颜色 // color1: 'ffcc0000',//楼顶颜色
color2: 'ffaa0000',//楼面颜色 // color2: 'ffaa0000',//楼面颜色
path: [ // path: [
[121.497898,31.217932], // [121.497898,31.217932],
[121.498456,31.217945], // [121.498456,31.217945],
[121.498445,31.218445], // [121.498445,31.218445],
[121.49791,31.218376], // [121.49791,31.218376],
] // ]
}, // },
{ // {
rejectTexture:true,//是否屏蔽自定义地图的纹理 // rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: 'ffffff00',//楼顶颜色 // color1: 'ffffff00',//楼顶颜色
color2: 'ffffcc00',//楼面颜色 // color2: 'ffffcc00',//楼面颜色
path: [ // path: [
[121.498696,31.218295], // [121.498696,31.218295],
[121.498679,31.217744], // [121.498679,31.217744],
[121.499197,31.217747], // [121.499197,31.217747],
[121.499243,31.218324], // [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:0, // pitch:0,
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'],
}, // },
areaList: mockCommunity, // areaList: mockCommunity,
buildingList: mockBuilding, // buildingList: mockBuilding,
streetList: [], // streetList: [],
curStreetPolygon: null, // curStreetPolygon: null,
curStreet: null, // curStreet: null,
markerList: [], // markerList: [],
detailModal: false, // detailModal: false,
columns: [ // columns: [
{ // {
title: '小区', // title: '小区',
key: 'name', // key: 'name',
minWidth: 100, // minWidth: 100,
fixed: 'left', // fixed: 'left',
align: 'center', // align: 'center',
}, // },
{ // {
title: '楼栋号', // title: '楼栋号',
key: 'buildingNo', // key: 'buildingNo',
minWidth: 100, // minWidth: 100,
fixed: 'left', // fixed: 'left',
align: 'center', // align: 'center',
}, // },
{ // {
title: '房屋性质', // title: '房屋性质',
key: 'type', // key: 'type',
minWidth: 100, // minWidth: 100,
align: 'center', // align: 'center',
}, // },
{ // {
title: '房龄', // title: '房龄',
key: 'age', // key: 'age',
minWidth: 100, // minWidth: 100,
align: 'center', // align: 'center',
}, // },
{ // {
title: '层高', // title: '层高',
key: 'high', // key: 'high',
minWidth: 100, // minWidth: 100,
align: 'center', // align: 'center',
}, // },
{ // {
title: '4层以上是否有70岁以上老人', // title: '4层以上是否有70岁以上老人',
key: 'hasOld', // key: 'hasOld',
minWidth: 130, // minWidth: 130,
align: 'center', // align: 'center',
}, // },
{ // {
title: '4层以上是否有行动不便的残障人员', // title: '4层以上是否有行动不便的残障人员',
key: 'hasDisabled', // key: 'hasDisabled',
minWidth: 150, // minWidth: 150,
align: 'center', // align: 'center',
}, // },
{ // {
title: '是否已有业主发起加梯动员', // title: '是否已有业主发起加梯动员',
key: 'hasMobilizatin', // key: 'hasMobilizatin',
minWidth: 130, // minWidth: 130,
align: 'center', // align: 'center',
}, // },
{ // {
title: '楼内邻里关系是否和睦', // title: '楼内邻里关系是否和睦',
key: 'hasPeace', // key: 'hasPeace',
minWidth: 130, // minWidth: 130,
align: 'center', // align: 'center',
}, // },
{ // {
title: '楼内业主自住率是否高于80%', // title: '楼内业主自住率是否高于80%',
key: 'hasSelf', // key: 'hasSelf',
minWidth: 130, // minWidth: 130,
align: 'center', // align: 'center',
}, // },
{ // {
title: '一楼是否非居', // title: '一楼是否非居',
key: 'hasNonliving', // key: 'hasNonliving',
minWidth: 130, // minWidth: 130,
align: 'center', // align: 'center',
}, // },
{ // {
title: '是否有地下层', // title: '是否有地下层',
key: 'hasUnderground', // key: 'hasUnderground',
minWidth: 130, // minWidth: 130,
align: 'center', // align: 'center',
}, // },
{ // {
title: '占用车道', // title: '占用车道',
key: 'hasLane', // key: 'hasLane',
minWidth: 100, // minWidth: 100,
align: 'center', // align: 'center',
}, // },
{ // {
title: '占用绿化', // title: '占用绿化',
key: 'hasGreening', // key: 'hasGreening',
minWidth: 100, // minWidth: 100,
align: 'center', // align: 'center',
}, // },
{ // {
title: '占用车位', // title: '占用车位',
key: 'hasParking', // key: 'hasParking',
minWidth: 100, // minWidth: 100,
align: 'center', // align: 'center',
}, // },
{ // {
title: '楼间距', // title: '楼间距',
key: 'spacing', // key: 'spacing',
minWidth: 100, // minWidth: 100,
align: 'center', // align: 'center',
}, // },
{ // {
title: '连廊长度', // title: '连廊长度',
key: 'corridorLength', // key: 'corridorLength',
minWidth: 100, // minWidth: 100,
align: 'center', // align: 'center',
}, // },
{ // {
title: '居民意愿', // title: '居民意愿',
key: 'intention', // key: 'intention',
minWidth: 100, // minWidth: 100,
align: 'center', // align: 'center',
}, // },
], // ],
detailData: [], // detailData: [],
} // }
}, // },
mounted() { // mounted() {
this.$nextTick(this.initMap) // this.$nextTick(this.initMap)
}, // },
methods: { // methods: {
initMap(area) { // initMap(area) {
this.map = new AMap.Map('container', this.mapConfig) // this.map = new AMap.Map('container', this.mapConfig)
// this.initLayers() // // this.initLayers()
this.addController() // this.addController()
// this.addMarker() // // this.addMarker()
this.addEvents() // this.addEvents()
this.highlightPudong() // this.highlightPudong()
this.initMenu() // this.initMenu()
}, // },
initMenu() { // initMenu() {
const streets = Object.keys(this.areaList) // const streets = Object.keys(this.areaList)
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 // let result = null
streets.forEach(street => { // streets.forEach(street => {
if (streetName.indexOf(this.areaList[street].name) >= 0) { // if (streetName.indexOf(this.areaList[street].name) >= 0) {
result = street // result = street
} // }
}) // })
this.streetList = [result] // this.streetList = [result]
this.$nextTick(() => { // 为了展开默认街镇小区列表 // this.$nextTick(() => { // 为了展开默认街镇小区列表
this.curStreet = result // this.curStreet = result
this.handleSelect([this.curStreet]) // this.handleSelect([this.curStreet])
}) // })
} else { // } else {
this.streetList = streets // 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) // this.addMarker(name)
}, // },
handleDetail({name}) { // handleDetail({name}) {
if (!this.buildingList[`${this.curStreet}Building`]) return // if (!this.buildingList[`${this.curStreet}Building`]) return
this.detailData = this.buildingList[`${this.curStreet}Building`].building.filter(item => item.name.indexOf(name) >= 0) // this.detailData = this.buildingList[`${this.curStreet}Building`].building.filter(item => item.name.indexOf(name) >= 0)
this.detailModal = true // this.detailModal = true
}, // },
handleSelect(key) { // handleSelect(key) {
if (!key || key.length <= 0) return // if (!key || key.length <= 0) return
this.map.setZoomAndCenter(15, this.areaList[key[0]].location) // this.map.setZoomAndCenter(15, this.areaList[key[0]].location)
if (this.curStreetPolygon) { // if (this.curStreetPolygon) {
// this.map.remove(this.curStreetPolygon) // 移除之前的街镇区域底色 // // this.map.remove(this.curStreetPolygon) // 移除之前的街镇区域底色
this.map.clearMap() // this.map.clearMap()
} // }
this.initLayers(key) // this.initLayers(key)
this.highlightArea(this.areaList[key[0]]) // this.highlightArea(this.areaList[key[0]])
}, // },
initLayers(street = null) { // 添加基础图层和建筑物图层 // initLayers(street = null) { // 添加基础图层和建筑物图层
const keys = Object.keys(this.areaList) // const keys = Object.keys(this.areaList)
if (keys.length <= 0) return // if (keys.length <= 0) return
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`]) { // if (this.buildingList[`${street}Building`]) {
communityList.push(...this.buildingList[`${street}Building`].community) // 添加个别不同色的，手动上色的楼栋 // 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)
}) // })
} // }
const buildingOptions = { // const buildingOptions = {
areas: communityList.map(item => { // areas: communityList.map(item => {
if (item.type != 'building') { // if (item.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: item.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(item)
}) // })
} // }
return { // return {
rejectTexture:true,//是否屏蔽自定义地图的纹理 // rejectTexture:true,//是否屏蔽自定义地图的纹理
color1: this.$com.switchBuildingColor(item.level)[0],//楼顶颜色 // color1: this.$com.switchBuildingColor(item.level)[0],//楼顶颜色
color2: this.$com.switchBuildingColor(item.level)[1],//楼面颜色 // color2: this.$com.switchBuildingColor(item.level)[1],//楼面颜色
path: item.path || [] // path: item.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
]) // ])
// 框起的建筑物区域底板颜色(不写则无底色，不影响建筑颜色) // // 框起的建筑物区域底板颜色(不写则无底色，不影响建筑颜色)
// new AMap.Polygon({ // // new AMap.Polygon({
// bubble:false, // // bubble:false,
// fillColor: 'green', // // fillColor: 'green',
// fillOpacity:0.2, // // fillOpacity:0.2,
// strokeWeight:1, // // strokeWeight:1,
// path: buildingOptions.areas[0].path, // // path: buildingOptions.areas[0].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()]
// this.map.setZoomAndCenter(18.8, location) // // this.map.setZoomAndCenter(18.8, location)
// }) // // })
// new AMap.Polygon({ // // new AMap.Polygon({
// bubble:true, // // bubble:true,
// fillOpacity:0.2, // // fillOpacity:0.2,
// strokeWeight:1, // // strokeWeight:1,
// path:this.buildingOptions.areas[1].path, // // path:this.buildingOptions.areas[1].path,
// map:this.map // // map:this.map
// }) // // })
}, // },
addController() { // 添加地图控制器 // addController() { // 添加地图控制器
this.map.addControl(new AMap.ControlBar({ // this.map.addControl(new AMap.ControlBar({
showZoomBar:false, // showZoomBar:false,
showControlButton:true, // showControlButton:true,
position:{ // position:{
right:'10px', // right:'10px',
top:'10px' // top:'10px'
} // }
})) // }))
}, // },
addMarker(name) { // addMarker(name) {
this.map.remove(this.markerList) // 移除之前的marker // this.map.remove(this.markerList) // 移除之前的marker
if (!this.buildingList[`${this.curStreet}Building`]) return // if (!this.buildingList[`${this.curStreet}Building`]) return
const whichImage = (intention) => { // const whichImage = (intention) => {
if (intention.indexOf('一') >= 0) { // if (intention.indexOf('一') >= 0) {
return { // return {
src: star1, // src: star1,
size: [10, 15], // size: [10, 15],
} // }
} else if (intention.indexOf('二') >= 0 || intention.indexOf('两') >= 0) { // } else if (intention.indexOf('二') >= 0 || intention.indexOf('两') >= 0) {
return { // return {
src: star2, // src: star2,
size: [15, 15], // size: [15, 15],
} // }
} else if (intention.indexOf('三') >= 0) { // } else if (intention.indexOf('三') >= 0) {
return { // return {
src: star3, // src: star3,
size: [20, 15], // size: [20, 15],
} // }
} // }
} // }
const markerList = [] // const markerList = []
this.buildingList[`${this.curStreet}Building`].building.forEach(item => { // this.buildingList[`${this.curStreet}Building`].building.forEach(item => {
if(item.name.indexOf(name) >= 0 && item.lon && item.lat && item.intention) { // if(item.name.indexOf(name) >= 0 && item.lon && item.lat && item.intention) {
const image = whichImage(item.intention) // const image = whichImage(item.intention)
const style = { // const style = {
img:image.src, // img:image.src,
size:image.size,//可见区域的大小 // size:image.size,//可见区域的大小
fitZoom:18,//最合适的级别 // fitZoom:18,//最合适的级别
scaleFactor:2,//地图放大一级的缩放比例系数 // scaleFactor:2,//地图放大一级的缩放比例系数
maxScale:1.4,//最大放大比例 // maxScale:1.4,//最大放大比例
minScale:0.8//最小放大比例 // minScale:0.8//最小放大比例
} // }
const marker = new AMap.ElasticMarker({ // const marker = new AMap.ElasticMarker({
position: [item.lon, item.lat], // position: [item.lon, item.lat],
zooms:[16,20], // zooms:[16,20],
extData: { // extData: {
title: item.buildingNo, // title: item.buildingNo,
content: `居民意愿度:${item.intention}` // content: `居民意愿度:${item.intention}`
}, // },
styles:[ // styles:[
{ // {
icon:{ // icon:{
ancher:[0,30],//锚点 // ancher:[0,30],//锚点
...style, // ...style,
} // }
}, // },
{ // {
icon:{ // icon:{
ancher:[0,45],//锚点 // ancher:[0,45],//锚点
...style, // ...style,
} // }
}, // },
{ // {
icon:{ // icon:{
ancher:[0,60],//锚点 // ancher:[0,60],//锚点
...style, // ...style,
} // }
}, // },
{ // {
icon:{ // icon:{
ancher:[0,80],//锚点 // ancher:[0,80],//锚点
...style, // ...style,
} // }
}, // },
{ // {
icon:{ // icon:{
ancher:[0,100],//锚点 // ancher:[0,100],//锚点
...style, // ...style,
} // }
} // }
], // ],
zoomStyleMapping: { // zoomStyleMapping: {
16:0, // 16:0,
17:1, // 17:1,
18:2, // 18:2,
19:3, // 19:3,
20:4, // 20:4,
} // }
}).on('click', e => { // }).on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()] // const location = [e.lnglat.getLng(), e.lnglat.getLat()]
this.showDetail(e, location, marker.getExtData()) // this.showDetail(e, location, marker.getExtData())
}) // })
markerList.push(marker) // markerList.push(marker)
} // }
}) // })
this.map.add(markerList) // this.map.add(markerList)
this.markerList = markerList // this.markerList = markerList
// new AMap.Marker({ // // new AMap.Marker({
// map: this.map, // // map: this.map,
// position: [121.498973,31.218018], // // position: [121.498973,31.218018],
// extData: { // // extData: {
// title: '测试点击', // // title: '测试点击',
// content: '测试额外附加数据', // // content: '测试额外附加数据',
// }, // // },
// icon: new AMap.Icon({ // // icon: new AMap.Icon({
// size: new AMap.Size(30, 30), //图标大小 // // size: new AMap.Size(30, 30), //图标大小
// image: require('@/assets/images/attorney.png'), // // image: require('@/assets/images/attorney.png'),
// // imageOffset: new AMap.Pixel(0, -60) // // // imageOffset: new AMap.Pixel(0, -60)
// }) // // })
// }).on('click', e => { // // }).on('click', e => {
// const location = [e.lnglat.getLng(), e.lnglat.getLat()] // // const location = [e.lnglat.getLng(), e.lnglat.getLat()]
// this.showDetail(e, location, marker.getExtData()) // // this.showDetail(e, location, marker.getExtData())
// }) // // })
}, // },
showDetail(e, location, data) { // showDetail(e, location, data) {
// TODO // // TODO
const infoWindow = new AMap.InfoWindow({ // const infoWindow = new AMap.InfoWindow({
content: ` // content: `
<div> // <div>
<b>${data.title}</b> // <b>${data.title}</b>
<p>${data.content || '暂无其他信息'}</p> // <p>${data.content || '暂无其他信息'}</p>
</div> // </div>
` // `
}) // })
infoWindow.open(this.map, location) // infoWindow.open(this.map, location)
}, // },
addEvents() { // addEvents() {
this.map.on('click', e => { // this.map.on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()] // const location = [e.lnglat.getLng(), e.lnglat.getLat()]
// this.map.setZoomAndCenter(18.8, location) // // this.map.setZoomAndCenter(18.8, location)
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat()) // console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
}) // })
}, // },
highlightArea(area) { // highlightArea(area) {
if (!area.path || area.path <= 0) return // if (!area.path || area.path <= 0) return
const polygon = new AMap.Polygon({ // const polygon = new AMap.Polygon({
zIndex: 1, // zIndex: 1,
strokeWeight: 3, // strokeWeight: 3,
strokeStyle:'dashed', // strokeStyle:'dashed',
path: area.path, // path: area.path,
fillOpacity: 0.2, // fillOpacity: 0.2,
fillColor: '#80d8ff', // fillColor: '#80d8ff',
strokeColor: '#0091ea' // strokeColor: '#0091ea'
}).on('click', e => { // }).on('click', e => {
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat()) // console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
}) // })
this.curStreetPolygon = polygon // this.curStreetPolygon = polygon
// const outer = [ // // 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),
// 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 holes = [area.path]
// const pathArray = [ // // const pathArray = [
// outer // // outer
// ] // // ]
// pathArray.push.apply(pathArray,holes) // // pathArray.push.apply(pathArray,holes)
// const polygon1 = new AMap.Polygon( { // // const polygon1 = new AMap.Polygon( {
// pathL:pathArray, // // pathL:pathArray,
// //线条颜色，使用16进制颜色代码赋值。默认值为#006600 // // //线条颜色，使用16进制颜色代码赋值。默认值为#006600
// strokeColor: 'rgb(20,164,173)', // // strokeColor: 'rgb(20,164,173)',
// strokeWeight: 4, // // strokeWeight: 4,
// //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 // // //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// strokeOpacity:0.5, // // strokeOpacity:0.5,
// //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00 // // //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
// fillColor: 'rgba(255,255,255,0.3)', // // fillColor: 'rgba(255,255,255,0.3)',
// //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 // // //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// fillOpacity: 1, // // fillOpacity: 1,
// //轮廓线样式，实线:solid，虚线:dashed // // //轮廓线样式，实线:solid，虚线:dashed
// strokeStyle:'dashed', // // strokeStyle:'dashed',
// /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在 // // /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
// ie9+浏览器有效 取值： // // ie9+浏览器有效 取值：
// 实线：[0,0,0] // // 实线：[0,0,0]
// 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线 // // 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
// 点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 // // 点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
// 线和10个像素的空白 （如此反复）组成的虚线*/ // // 线和10个像素的空白 （如此反复）组成的虚线*/
// strokeDasharray:[10,2,10] // // strokeDasharray:[10,2,10]
// }) // // })
// polygon1.setPath(pathArray) // // polygon1.setPath(pathArray)
// this.map.add(polygon1) // // this.map.add(polygon1)
this.map.add([polygon]) // this.map.add([polygon])
}, // },
highlightPudong() { // highlightPudong() {
// new AMap.DistrictSearch({ // // new AMap.DistrictSearch({
// level: 'district', // // level: 'district',
// subdistric: 1, // // subdistric: 1,
// }).search('浦东新区', (status, result) => { // // }).search('浦东新区', (status, result) => {
// console.log('---浦东新区街镇---', result.districtList[0].districtList) // // console.log('---浦东新区街镇---', result.districtList[0].districtList)
// }) // // })
// 给浦东新区添加蓝色遮罩 // // 给浦东新区添加蓝色遮罩
// new AMap.DistrictSearch({ // // new AMap.DistrictSearch({
// level: 'district', // // level: 'district',
// extensions: 'all', // // extensions: 'all',
// subdistric: 1, // // subdistric: 1,
// }).search('浦东新区', (staus, result) => { // // }).search('浦东新区', (staus, result) => {
// var bounds = result.districtList[0].boundaries // // var bounds = result.districtList[0].boundaries
// var polygon = new AMap.Polygon({ // // var polygon = new AMap.Polygon({
// strokeWeight: 1, // // strokeWeight: 1,
// path: bounds[0], // // path: bounds[0],
// fillOpacity: 0.4, // // fillOpacity: 0.4,
// fillColor: '#80d8ff', // // fillColor: '#80d8ff',
// strokeColor: '#0091ea' // // strokeColor: '#0091ea'
// }) // // })
// this.map.add([polygon]) // // this.map.add([polygon])
// }) // // })
// 只显示浦东新区，其他置灰 // // 只显示浦东新区，其他置灰
// new AMap.DistrictSearch({ // // new AMap.DistrictSearch({
// extensions:'all', // // extensions:'all',
// subdistrict:0 // // subdistrict:0
// }).search('浦东新区',(status,result) => { // // }).search('浦东新区',(status,result) => {
// // 外多边形坐标数组和内多边形坐标数组 // // // 外多边形坐标数组和内多边形坐标数组
// const outer = [ // // 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),
// 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 holes = result.districtList[0].boundaries
// const pathArray = [ // // const pathArray = [
// outer // // outer
// ] // // ]
// pathArray.push.apply(pathArray,holes) // // pathArray.push.apply(pathArray,holes)
// const polygon = new AMap.Polygon( { // // const polygon = new AMap.Polygon( {
// pathL:pathArray, // // pathL:pathArray,
// //线条颜色，使用16进制颜色代码赋值。默认值为#006600 // // //线条颜色，使用16进制颜色代码赋值。默认值为#006600
// strokeColor: 'rgb(20,164,173)', // // strokeColor: 'rgb(20,164,173)',
// strokeWeight: 4, // // strokeWeight: 4,
// //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 // // //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// strokeOpacity:0.5, // // strokeOpacity:0.5,
// //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00 // // //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
// fillColor: 'rgba(255,255,255,0.3)', // // fillColor: 'rgba(255,255,255,0.3)',
// //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9 // // //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
// fillOpacity: 1, // // fillOpacity: 1,
// //轮廓线样式，实线:solid，虚线:dashed // // //轮廓线样式，实线:solid，虚线:dashed
// strokeStyle:'dashed', // // strokeStyle:'dashed',
// /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在 // // /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
// ie9+浏览器有效 取值： // // ie9+浏览器有效 取值：
// 实线：[0,0,0] // // 实线：[0,0,0]
// 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线 // // 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
// 点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 // // 点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
// 线和10个像素的空白 （如此反复）组成的虚线*/ // // 线和10个像素的空白 （如此反复）组成的虚线*/
// strokeDasharray:[10,2,10] // // strokeDasharray:[10,2,10]
// }) // // })
// polygon.setPath(pathArray) // // polygon.setPath(pathArray)
// this.map.add(polygon) // // this.map.add(polygon)
// }) // // })
}, // },
}, // },
computed: { // computed: {
tableHeight() { // tableHeight() {
return screen.height / 2 // return screen.height / 2
} // }
} // }
} // }
</script> // </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
#container #container
......
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