Skip to content

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

曹路小区上色

parent db24a635
Expand all Show whitespace changes
Inline Side-by-side
Showing with 881 additions and 88 deletions
.gitignore
View file @ c304ac41
.DS_Store .DS_Store
node_modules/ node_modules/
/dist/ /dist/
/crawler/
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
......
config/index.js
View file @ c304ac41
...@@ -10,7 +10,15 @@ module.exports = { ...@@ -10,7 +10,15 @@ module.exports = {
// Paths // Paths
assetsSubDirectory: 'static', assetsSubDirectory: 'static',
assetsPublicPath: '/', assetsPublicPath: '/',
proxyTable: {}, proxyTable: {
"/api": {
target: "http://www.gaode.com/service/poiInfo",
changeOrigin:true,
pathRewrite:{
'^/api':''
}
},
},
// Various Dev Server settings // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST host: 'localhost', // can be overwritten by process.env.HOST
......
package-lock.json
View file @ c304ac41
...@@ -267,6 +267,16 @@ ...@@ -267,6 +267,16 @@
} }
} }
}, },
"adler-32": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/adler-32/download/adler-32-1.2.0.tgz",
"integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
"dev": true,
"requires": {
"exit-on-epipe": "~1.0.1",
"printj": "~1.1.0"
}
},
"ajv": { "ajv": {
"version": "5.5.2", "version": "5.5.2",
"resolved": "https://registry.npm.taobao.org/ajv/download/ajv-5.5.2.tgz", "resolved": "https://registry.npm.taobao.org/ajv/download/ajv-5.5.2.tgz",
...@@ -516,6 +526,38 @@ ...@@ -516,6 +526,38 @@
"postcss-value-parser": "^3.2.3" "postcss-value-parser": "^3.2.3"
} }
}, },
"axios": {
"version": "0.19.0",
"resolved": "https://registry.npm.taobao.org/axios/download/axios-0.19.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.19.0.tgz",
"integrity": "sha1-jgm/89kSLhM/e4EByPvdAO09Krg=",
"requires": {
"follow-redirects": "1.5.10",
"is-buffer": "^2.0.2"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz",
"integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
"requires": {
"debug": "=3.1.0"
}
},
"is-buffer": {
"version": "2.0.4",
"resolved": "https://registry.npm.taobao.org/is-buffer/download/is-buffer-2.0.4.tgz",
"integrity": "sha1-PlcvI8hBGlz9lVfISeNmXgspBiM="
}
}
},
"babel-code-frame": { "babel-code-frame": {
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz", "resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
...@@ -1889,6 +1931,18 @@ ...@@ -1889,6 +1931,18 @@
"lazy-cache": "^1.0.3" "lazy-cache": "^1.0.3"
} }
}, },
"cfb": {
"version": "1.1.3",
"resolved": "https://registry.npm.taobao.org/cfb/download/cfb-1.1.3.tgz",
"integrity": "sha1-Bd5oFiWcjovDJxOrqQVgjuOF32Y=",
"dev": true,
"requires": {
"adler-32": "~1.2.0",
"commander": "^2.16.0",
"crc-32": "~1.2.0",
"printj": "~1.1.2"
}
},
"chalk": { "chalk": {
"version": "2.4.2", "version": "2.4.2",
"resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1573282949696&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz", "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1573282949696&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz",
...@@ -2087,6 +2141,24 @@ ...@@ -2087,6 +2141,24 @@
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true "dev": true
}, },
"codepage": {
"version": "1.14.0",
"resolved": "https://registry.npm.taobao.org/codepage/download/codepage-1.14.0.tgz",
"integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
"dev": true,
"requires": {
"commander": "~2.14.1",
"exit-on-epipe": "~1.0.1"
},
"dependencies": {
"commander": {
"version": "2.14.1",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.14.1.tgz",
"integrity": "sha1-IjUSPjevjKPGXfRbAm29NXsBuao=",
"dev": true
}
}
},
"collection-visit": { "collection-visit": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/collection-visit/download/collection-visit-1.0.0.tgz", "resolved": "https://registry.npm.taobao.org/collection-visit/download/collection-visit-1.0.0.tgz",
...@@ -2357,6 +2429,16 @@ ...@@ -2357,6 +2429,16 @@
} }
} }
}, },
"crc-32": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/crc-32/download/crc-32-1.2.0.tgz",
"integrity": "sha1-yy224puIUI4y2d0OwWk+e0Ghggg=",
"dev": true,
"requires": {
"exit-on-epipe": "~1.0.1",
"printj": "~1.1.0"
}
},
"create-ecdh": { "create-ecdh": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npm.taobao.org/create-ecdh/download/create-ecdh-4.0.3.tgz", "resolved": "https://registry.npm.taobao.org/create-ecdh/download/create-ecdh-4.0.3.tgz",
...@@ -4194,6 +4276,12 @@ ...@@ -4194,6 +4276,12 @@
"strip-eof": "^1.0.0" "strip-eof": "^1.0.0"
} }
}, },
"exit-on-epipe": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/exit-on-epipe/download/exit-on-epipe-1.0.1.tgz",
"integrity": "sha1-C92S6H1ShdJn2qgXHQ6wYVlolpI=",
"dev": true
},
"expand-brackets": { "expand-brackets": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npm.taobao.org/expand-brackets/download/expand-brackets-2.1.4.tgz", "resolved": "https://registry.npm.taobao.org/expand-brackets/download/expand-brackets-2.1.4.tgz",
...@@ -4657,6 +4745,12 @@ ...@@ -4657,6 +4745,12 @@
"integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=", "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
"dev": true "dev": true
}, },
"frac": {
"version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/frac/download/frac-1.1.2.tgz",
"integrity": "sha1-PXT39keMiKG1AgMG10fcYxPHTQs=",
"dev": true
},
"fragment-cache": { "fragment-cache": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npm.taobao.org/fragment-cache/download/fragment-cache-0.2.1.tgz", "resolved": "https://registry.npm.taobao.org/fragment-cache/download/fragment-cache-0.2.1.tgz",
...@@ -6914,8 +7008,7 @@ ...@@ -6914,8 +7008,7 @@
"ms": { "ms": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz", "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
"dev": true
}, },
"multicast-dns": { "multicast-dns": {
"version": "6.2.3", "version": "6.2.3",
...@@ -7081,6 +7174,16 @@ ...@@ -7081,6 +7174,16 @@
} }
} }
}, },
"node-xlsx": {
"version": "0.15.0",
"resolved": "https://registry.npm.taobao.org/node-xlsx/download/node-xlsx-0.15.0.tgz",
"integrity": "sha1-HxsNetzlxwboa/2WpaoABb+KncM=",
"dev": true,
"requires": {
"buffer-from": "^1.1.0",
"xlsx": "^0.14.1"
}
},
"normalize-package-data": { "normalize-package-data": {
"version": "2.5.0", "version": "2.5.0",
"resolved": "https://registry.npm.taobao.org/normalize-package-data/download/normalize-package-data-2.5.0.tgz", "resolved": "https://registry.npm.taobao.org/normalize-package-data/download/normalize-package-data-2.5.0.tgz",
...@@ -9993,6 +10096,12 @@ ...@@ -9993,6 +10096,12 @@
"utila": "~0.4" "utila": "~0.4"
} }
}, },
"printj": {
"version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/printj/download/printj-1.1.2.tgz",
"integrity": "sha1-2Q3rKXWoufYA+zoclOP0xTx4oiI=",
"dev": true
},
"private": { "private": {
"version": "0.1.8", "version": "0.1.8",
"resolved": "https://registry.npm.taobao.org/private/download/private-0.1.8.tgz", "resolved": "https://registry.npm.taobao.org/private/download/private-0.1.8.tgz",
...@@ -11165,6 +11274,15 @@ ...@@ -11165,6 +11274,15 @@
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
"dev": true "dev": true
}, },
"ssf": {
"version": "0.10.2",
"resolved": "https://registry.npm.taobao.org/ssf/download/ssf-0.10.2.tgz",
"integrity": "sha1-ZbK0/N/ZZ7yOg4OkE0kAmJMRWXY=",
"dev": true,
"requires": {
"frac": "~1.1.2"
}
},
"ssri": { "ssri": {
"version": "5.3.0", "version": "5.3.0",
"resolved": "https://registry.npm.taobao.org/ssri/download/ssri-5.3.0.tgz", "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-5.3.0.tgz",
...@@ -12728,6 +12846,21 @@ ...@@ -12728,6 +12846,21 @@
"safe-buffer": "~5.1.0" "safe-buffer": "~5.1.0"
} }
}, },
"xlsx": {
"version": "0.14.5",
"resolved": "https://registry.npm.taobao.org/xlsx/download/xlsx-0.14.5.tgz",
"integrity": "sha1-NjfpFNeRvcpzgoFuFz99cl7Q4NI=",
"dev": true,
"requires": {
"adler-32": "~1.2.0",
"cfb": "^1.1.2",
"codepage": "~1.14.0",
"commander": "~2.17.1",
"crc-32": "~1.2.0",
"exit-on-epipe": "~1.0.1",
"ssf": "~0.10.2"
}
},
"xtend": { "xtend": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz", "resolved": "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz",
......
package.json
View file @ c304ac41
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"build": "node build/build.js" "build": "node build/build.js"
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"view-design": "^4.0.2", "view-design": "^4.0.2",
"vue": "^2.5.2", "vue": "^2.5.2",
...@@ -40,6 +41,7 @@ ...@@ -40,6 +41,7 @@
"friendly-errors-webpack-plugin": "^1.6.1", "friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1", "html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2", "node-notifier": "^5.1.2",
"node-xlsx": "^0.15.0",
"optimize-css-assets-webpack-plugin": "^3.2.0", "optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0", "ora": "^1.2.0",
"portfinder": "^1.0.13", "portfinder": "^1.0.13",
......
src/main.js
View file @ c304ac41
...@@ -4,11 +4,17 @@ import 'babel-polyfill' ...@@ -4,11 +4,17 @@ import 'babel-polyfill'
import Vue from 'vue' import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import {Button} from 'view-design' import common from './util/common'
import {Dropdown, DropdownMenu, DropdownItem, Icon, Button} 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
Vue.use(Button) Vue.prototype.$com = common
Vue.component('Dropdown', Dropdown)
Vue.component('DropdownMenu', DropdownMenu)
Vue.component('DropdownItem', DropdownItem)
Vue.component('Button', Button)
Vue.component('Icon', Icon)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
......
src/mock/caolu.js 0 → 100644
View file @ c304ac41
This diff is collapsed.
src/util/common.js 0 → 100644
View file @ c304ac41
export default{
switchBuildingColor(level) {
switch (level) {
case 1:
return ['ff99ff00', 'ff999900']
case 2:
return ['ffffff00', 'ffffcc00']
case 3:
return ['ffcc0000', 'ffaa0000']
default:
return []
}
},
}
src/views/main.vue
View file @ c304ac41
<template> <template>
<div id="container"/> <div id="container">
<Dropdown class="dropdown" >
<Button type="primary" icon="ios-arrow-down">小区列表</Button>
<DropdownMenu class="dropdown-menu" slot="list">
<DropdownItem @click.native="handleSelect(item)" v-for="item in area.community" :key="item.name">{{item.name}}</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</template> </template>
<script> <script>
const {AMap} = window const {AMap} = window
import axios from 'axios'
import caolu from '@/mock/caolu.js'
export default { export default {
name: 'Map3D', name: 'Map3D',
data() { data() {
...@@ -48,37 +57,7 @@ export default { ...@@ -48,37 +57,7 @@ export default {
}, },
] ]
}, },
buildingOptions2: { mapConfig: {
hideWithoutStyle:false,//是否隐藏设定区域外的楼块
areas:[
{ //围栏1
// visible:false,//是否可见
rejectTexture:false,//是否屏蔽自定义地图的纹理
color1: 'ffffff00',//楼顶颜色
color2: 'ffffcc00',//楼面颜色
path: [
[121.666232,31.28054],
[121.667163,31.279096],
[121.66531,31.278672],
[121.6651,31.279373],
[121.665428,31.279536],
[121.665146,31.280012],
]
},
]
},
}
},
mounted() {
this.$nextTick(this.initMap)
},
methods: {
initMap() {
const buildingLayer = new AMap.Buildings({zIndex:130,merge:false,sort:false,zooms:[17,20]})
buildingLayer.setStyle(this.buildingOptions)
this.map = new AMap.Map('container', {
resizeEnable: true, resizeEnable: true,
rotateEnable:true, rotateEnable:true,
pitchEnable:true, pitchEnable:true,
...@@ -90,40 +69,78 @@ export default { ...@@ -90,40 +69,78 @@ export default {
buildingAnimation:true,//楼块出现是否带动画 buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true, expandZoomRange:true,
// zooms:[17,20], // zooms:[17,20],
zooms: [10,20], zooms: [15,20],
// center:[121.497915,31.218138], // 黄浦 // center:[121.497915,31.218138], // 黄浦
// center: [121.558,31.0727], //航头镇 // center: [121.558,31.0727], //航头镇
// center: [121.502, 31.1956], //南码头 // center: [121.502, 31.1956], //南码头
// center: [121.656, 31.2937], // 曹路 center: [121.656, 31.2937], // 曹路
center: [121.666008,31.279523], // 曹路 - 民风小区
showIndoorMap:false, showIndoorMap:false,
// mapStyle:'amap://styles/light', // mapStyle:'amap://styles/light',
features:['bg','point','road'], features:['bg','point','road'],
layers:[ },
new AMap.TileLayer({}), area: caolu,
buildingLayer
]
})
this.map.addControl(new AMap.ControlBar({
showZoomBar:false,
showControlButton:true,
position:{
right:'10px',
top:'10px'
} }
})) },
mounted() {
this.$nextTick(this.initMap)
},
methods: {
initMap() {
this.map = new AMap.Map('container', this.mapConfig)
this.highlightArea(caolu)
this.initLayers(caolu)
this.addController()
this.addMarker()
this.addEvents()
this.highlightPudong()
},
handleSelect({name, address, location}) {
this.map.setZoomAndCenter(18, location)
this.showDetail(null, location, {title: name, content: address})
},
initLayers(area) { // 添加基础图层和建筑物图层
const buildingOptions = {
areas: area.community.map(item => {
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:this.buildingOptions.areas[0].path, path: item.path,
map:this.map map:this.map
}).on('click', e => {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
this.map.setZoomAndCenter(18.8, location)
this.showDetail(e, location, {title: item.name, content: item.address})
}) })
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({ // new AMap.Polygon({
// bubble:true, // bubble:true,
// fillOpacity:0.2, // fillOpacity:0.2,
...@@ -131,12 +148,19 @@ export default { ...@@ -131,12 +148,19 @@ export default {
// path:this.buildingOptions.areas[1].path, // path:this.buildingOptions.areas[1].path,
// map:this.map // map:this.map
// }) // })
this.map.on('click', e => { },
const location = [e.lnglat.getLng(), e.lnglat.getLat()] addController() { // 添加地图控制器
this.map.setZoomAndCenter(18.8, location) this.map.addControl(new AMap.ControlBar({
console.log(e, e.lnglat.getLng() + ',' + e.lnglat.getLat()) showZoomBar:false,
}) showControlButton:true,
const marker = new AMap.Marker({ position:{
right:'10px',
top:'10px'
}
}))
},
addMarker() {
new AMap.Marker({
map: this.map, map: this.map,
position: [121.498973,31.218018], position: [121.498973,31.218018],
extData: { extData: {
...@@ -148,20 +172,50 @@ export default { ...@@ -148,20 +172,50 @@ export default {
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 => {
marker.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())
}) })
},
const searcher = new AMap.DistrictSearch({ showDetail(e, location, data) {
level: 'district', // TODO
subdistric: 1, 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, e.lnglat.getLng() + ',' + e.lnglat.getLat())
}) })
searcher.search('浦东新区', (status, result) => { },
console.log('---浦东新区街镇---', result.districtList[0].districtList) highlightArea(area) {
const polygon = new AMap.Polygon({
strokeWeight: 3,
strokeStyle:'dashed',
path: area.path,
fillOpacity: 0.2,
fillColor: '#80d8ff',
strokeColor: '#0091ea'
}) })
this.map.add([polygon])
},
highlightPudong() {
// new AMap.DistrictSearch({
// level: 'district',
// subdistric: 1,
// }).search('浦东新区', (status, result) => {
// console.log('---浦东新区街镇---', result.districtList[0].districtList)
// })
// 给浦东新区添加蓝色遮罩
// new AMap.DistrictSearch({ // new AMap.DistrictSearch({
// level: 'district', // level: 'district',
// extensions: 'all', // extensions: 'all',
...@@ -221,18 +275,6 @@ export default { ...@@ -221,18 +275,6 @@ export default {
// this.map.add(polygon) // this.map.add(polygon)
// }) // })
}, },
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)
},
}, },
} }
</script> </script>
...@@ -242,6 +284,12 @@ export default { ...@@ -242,6 +284,12 @@ export default {
width 100% width 100%
height 100% height 100%
resize both resize both
position relative
.dropdown
position absolute
top 2rem
left 2rem
z-index 100
</style> </style>
<style lang="stylus"> <style lang="stylus">
.amap-logo .amap-logo
......
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