Skip to content

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

减少打包体积

parent 77697d69
Show 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 caoluBuilding from './caolu-building'
// import caoluBuilding from './caolu-building'
import dongming from './dongming'
import dongmingBuilding from './dongming-building'
// import dongmingBuilding from './dongming-building'
import gaodong from './gaodong'
import gaodongBuilding from './gaodong-building'
// import gaodongBuilding from './gaodong-building'
import gaoxing from './gaoxing'
import gaoxingBuilding from './gaoxing-building'
// import gaoxingBuilding from './gaoxing-building'
import hangtou from './hangtou'
import hangtouBuilding from './hangtou-building'
// import hangtouBuilding from './hangtou-building'
import hudong from './hudong'
import hudongBuilding from './hudong-building'
// import hudongBuilding from './hudong-building'
import huamu from './huamu'
import huamuBuilding from './huamu-building'
// import huamuBuilding from './huamu-building'
import jinqiao from './jinqiao'
import jinqiaoBuilding from './jinqiao-building'
// import jinqiaoBuilding from './jinqiao-building'
import jinyang from './jinyang'
import jinyangBuilding from './jinyang-building'
// import jinyangBuilding from './jinyang-building'
import lujiazui from './lujiazui'
import lujiazuiBuilding from './lujiazui-building'
// import lujiazuiBuilding from './lujiazui-building'
import shuyuan from './shuyuan'
import shuyuanBuilding from './shuyuan-building'
// import shuyuanBuilding from './shuyuan-building'
import beicai from './beicai'
import beicaiBuilding from './beicai-building'
// import beicaiBuilding from './beicai-building'
import kangqiao from './kangqiao'
import kangqiaoBuilding from './kangqiao-building'
// import kangqiaoBuilding from './kangqiao-building'
import nanhui from './nanhui'
import nanhuiBuilding from './nanhui-building'
// import nanhuiBuilding from './nanhui-building'
import nanmatou from './nanmatou'
import nanmatouBuilding from './nanmatou-building'
// import nanmatouBuilding from './nanmatou-building'
import nicheng from './nicheng'
import nichengBuilding from './nicheng-building'
// import nichengBuilding from './nicheng-building'
import puxing from './puxing'
import puxingBuilding from './puxing-building'
// import puxingBuilding from './puxing-building'
import sanlin from './sanlin'
import sanlinBuilding from './sanlin-building'
// import sanlinBuilding from './sanlin-building'
import tangzhen from './tangzhen'
import tangzhenBuilding from './tangzhen-building'
// import tangzhenBuilding from './tangzhen-building'
import wanxiang from './wanxiang'
import wanxiangBuilding from './wanxiang-building'
// import wanxiangBuilding from './wanxiang-building'
import weifang from './weifang'
import weifangBuilding from './weifang-building'
// import weifangBuilding from './weifang-building'
import xinchang from './xinchang'
import xinchangBuilding from './xinchang-building'
// import xinchangBuilding from './xinchang-building'
import xuanqiao from './xuanqiao'
import xuanqiaoBuilding from './xuanqiao-building'
// import xuanqiaoBuilding from './xuanqiao-building'
import yangjing from './yangjing'
import yangjingBuilding from './yangjing-building'
// import yangjingBuilding from './yangjing-building'
import zhangjiang from './zhangjiang'
import zhangjiangBuilding from './zhangjiang-building'
// import zhangjiangBuilding from './zhangjiang-building'
import zhoupu from './zhoupu'
import zhoupuBuilding from './zhoupu-building'
// import zhoupuBuilding from './zhoupu-building'
import zhuqiao from './zhuqiao'
import zhuqiaoBuilding from './zhuqiao-building'
// import zhuqiaoBuilding from './zhuqiao-building'
import chuansha from './chuansha'
import chuanshaBuilding from './chuansha-building'
// import chuanshaBuilding from './chuansha-building'
import datuan from './datuan'
import datuanBuilding from './datuan-building'
// import datuanBuilding from './datuan-building'
import gaoqiao from './gaoqiao'
import gaoqiaoBuilding from './gaoqiao-building'
// import gaoqiaoBuilding from './gaoqiao-building'
import heqing from './heqing'
import heqingBuilding from './heqing-building'
// import heqingBuilding from './heqing-building'
import laogang from './laogang'
import laogangBuilding from './laogang-building'
// import laogangBuilding from './laogang-building'
import shanggang from './shanggang'
import shanggangBuilding from './shanggang-building'
// import shanggangBuilding from './shanggang-building'
import tangqiao from './tangqiao'
import tangqiaoBuilding from './tangqiao-building'
// import tangqiaoBuilding from './tangqiao-building'
import huinan from './huinan'
import huinanBuilding from './huinan-building'
// import huinanBuilding from './huinan-building'
export const mockCommunity = {
caolu,
......@@ -107,40 +107,40 @@ export const mockCommunity = {
huinan,
}
export const mockBuilding = {
jinyangBuilding,
yangjingBuilding,
chuanshaBuilding,
caoluBuilding,
jinqiaoBuilding,
sanlinBuilding,
shanggangBuilding,
laogangBuilding,
tangqiaoBuilding,
huinanBuilding,
heqingBuilding,
datuanBuilding,
gaoqiaoBuilding,
zhuqiaoBuilding,
zhoupuBuilding,
zhangjiangBuilding,
tangzhenBuilding,
xinchangBuilding,
xuanqiaoBuilding,
weifangBuilding,
wanxiangBuilding,
puxingBuilding,
nichengBuilding,
nanmatouBuilding,
nanhuiBuilding,
kangqiaoBuilding,
beicaiBuilding,
lujiazuiBuilding,
hangtouBuilding,
gaoxingBuilding,
gaodongBuilding,
hudongBuilding,
dongmingBuilding,
huamuBuilding,
shuyuanBuilding,
}
// export const mockBuilding = {
// jinyangBuilding,
// yangjingBuilding,
// chuanshaBuilding,
// caoluBuilding,
// jinqiaoBuilding,
// sanlinBuilding,
// shanggangBuilding,
// laogangBuilding,
// tangqiaoBuilding,
// huinanBuilding,
// heqingBuilding,
// datuanBuilding,
// gaoqiaoBuilding,
// zhuqiaoBuilding,
// zhoupuBuilding,
// zhangjiangBuilding,
// tangzhenBuilding,
// xinchangBuilding,
// xuanqiaoBuilding,
// weifangBuilding,
// wanxiangBuilding,
// puxingBuilding,
// nichengBuilding,
// nanmatouBuilding,
// nanhuiBuilding,
// kangqiaoBuilding,
// beicaiBuilding,
// lujiazuiBuilding,
// hangtouBuilding,
// gaoxingBuilding,
// gaodongBuilding,
// hudongBuilding,
// dongmingBuilding,
// huamuBuilding,
// shuyuanBuilding,
// }
src/router/index.js
View file @ 8910fcab
import Vue from 'vue'
import Router from 'vue-router'
const Main = () => import('@/views/main.vue')
const Test = () => import('@/views/test.vue')
// const Test = () => import('@/views/test.vue')
Vue.use(Router)
......@@ -12,10 +12,10 @@ export default new Router({
name: 'main',
component: Main,
},
{
path: '/test',
name: 'test',
component: Test,
},
// {
// path: '/test',
// name: 'test',
// component: Test,
// },
]
})
src/views/main.vue
View file @ 8910fcab
......@@ -28,7 +28,7 @@ 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'
import {mockCommunity} from '@/mock/index.js'
export default {
name: 'Map3D',
data() {
......@@ -91,7 +91,6 @@ export default {
features:['bg','road'],
},
areaList: mockCommunity,
buildingList: mockBuilding,
streetList: [],
curStreetPolygon: null,
curStreet: null,
......@@ -250,10 +249,8 @@ export default {
this.addMarker(name)
},
handleDetail({name}) {
const buildingList = this.buildingList[`${this.curStreet}Building`]
if (!buildingList) return
// this.detailData = buildingList.building.filter(item => item.name.indexOf(name) >= 0)
this.detailData = buildingList.building.filter(item => {
if (!this.buildingData) return
this.detailData = this.buildingData.building.filter(item => {
const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
return buildingName.indexOf(name) >= 0 || (item.buildingNo + '').indexOf(name) >= 0
})
......@@ -275,8 +272,8 @@ export default {
const communityList = []
if (street) {
communityList.push(...this.areaList[street].community)
if (this.buildingList[`${street}Building`]) {
communityList.push(...this.buildingList[`${street}Building`].community) // 添加个别不同色的，手动上色的楼栋
if (this.buildingData) {
communityList.push(...this.buildingData.community) // 添加个别不同色的，手动上色的楼栋
}
} else {
keys.forEach(key => {
......@@ -347,7 +344,7 @@ export default {
},
addMarker(name) {
this.map.remove(this.markerList) // 移除之前的marker
if (!this.buildingList[`${this.curStreet}Building`]) return
if (!this.buildingData) return
const whichImage = (intention) => {
if (intention.indexOf('一') >= 0) {
return {
......@@ -367,7 +364,7 @@ export default {
}
}
const markerList = []
this.buildingList[`${this.curStreet}Building`].building.forEach(item => {
this.buildingData.building.forEach(item => {
const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
if (buildingName.indexOf(name) < 0 && (item.buildingNo + '').indexOf(name) < 0) return
if(item.lon && item.lat && item.intention) {
......@@ -595,6 +592,10 @@ export default {
computed: {
tableHeight() {
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>
<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">
{{areaList[street].name}}小区列表
<div slot="content" class="community-list">
......@@ -19,579 +19,579 @@
</Collapse>
<Modal v-model="detailModal" width="90%" :footer-hide="true">
<Table :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
</Modal>
</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
])
// <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
// // 框起的建筑物区域底板颜色(不写则无底色，不影响建筑颜色)
// // 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)
// // 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)
// })
// 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({
// // 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
// // 只显示浦东新区，其他置灰
// // 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>
// // 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
......
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