【add】增加点位信息
This commit is contained in:
parent
c895d830b0
commit
490d38ddfa
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
<script>
|
||||
import { ms3dConfig } from '@/config/mapConfig'
|
||||
import { mapState } from 'vuex'
|
||||
const mapLayerTypeToPointIcon = {
|
||||
cems: require('@/assets/images/map/points/点位-CEMS.png'),
|
||||
sdjcy: require('@/assets/images/map/points/点位-深度检测仪.png'),
|
||||
|
|
@ -32,26 +33,45 @@ export default {
|
|||
this.setVisibility(layerType, show)
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
cems: state => state.map.cems,
|
||||
sdjcy: state => state.map.sdjcy,
|
||||
zkz: state => state.map.zkz,
|
||||
gbz: state => state.map.gbz,
|
||||
ssc: state => state.map.ssc,
|
||||
shisc: state => state.map.shisc,
|
||||
wz: state => state.map.wz,
|
||||
jkd: state => state.map.jkd,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//创建三维地球场景
|
||||
initMap () {
|
||||
this.map = new mars3d.Map(this.$refs.mapRef, ms3dConfig)
|
||||
this.map.on("load", () => {
|
||||
Object.keys(mapLayerTypeToPointIcon).forEach(layerType => {
|
||||
this.layerCreator(layerType) // 创建cems检测图层
|
||||
this.layerCreator(layerType)
|
||||
})
|
||||
|
||||
this.addDataByLayerType('cems', [
|
||||
{
|
||||
longitude: 114.116195,
|
||||
latitude: 36.555232
|
||||
}
|
||||
])
|
||||
window.test = this
|
||||
this.map.on(mars3d.EventType.click, function (event) {
|
||||
console.log('单击了地图对象', event)
|
||||
})
|
||||
this.addPoints()
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
addPoints () {
|
||||
this.addDataByLayerType('cems', this.cems)
|
||||
this.addDataByLayerType('sdjcy', this.sdjcy)
|
||||
this.addDataByLayerType('zkz', this.zkz)
|
||||
this.addDataByLayerType('gbz', this.gbz)
|
||||
this.addDataByLayerType('ssc', this.ssc)
|
||||
this.addDataByLayerType('shisc', this.shisc)
|
||||
this.addDataByLayerType('wz', this.wz)
|
||||
this.addDataByLayerType('jkd', this.jkd)
|
||||
},
|
||||
|
||||
/**
|
||||
* 图层构造器
|
||||
* @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } layerType 图层名称
|
||||
|
|
@ -59,7 +79,7 @@ export default {
|
|||
layerCreator (layerType) {
|
||||
if (!this.layerMap.has(layerType)) {
|
||||
const graphicLayer = new mars3d.layer.GraphicLayer({
|
||||
clustering: {
|
||||
/*clustering: {
|
||||
enabled: true,
|
||||
pixelRange: 20,
|
||||
minimumClusterSize: 2,
|
||||
|
|
@ -67,21 +87,21 @@ export default {
|
|||
style: {
|
||||
|
||||
}
|
||||
},
|
||||
},*/
|
||||
allowDrillPick: true, // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
|
||||
flyTo: true
|
||||
flyTo: false
|
||||
})
|
||||
this.map.addLayer(graphicLayer)
|
||||
graphicLayer.on(mars3d.EventType.click, ({ graphic }) => {
|
||||
const position = graphic.positionShow
|
||||
this.map.flyToPoint(position, {
|
||||
/*this.map.flyToPoint(position, {
|
||||
radius: 5000, // 距离目标点的距离
|
||||
duration: 4,
|
||||
complete: function (e) {
|
||||
// 飞行完成回调方法
|
||||
// graphic.openPopup()
|
||||
}
|
||||
})
|
||||
})*/
|
||||
this.$emit('pointClick', { layerType, data: graphic.attr })
|
||||
})
|
||||
this.layerMap.set(layerType, graphicLayer)
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
123123123
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Test"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
export const ms3dConfig = {
|
||||
"scene": {
|
||||
"center": {
|
||||
"lat": 36.555232,
|
||||
"lng": 114.116195,
|
||||
"alt": 45187,
|
||||
"lat": 36.543132,
|
||||
"lng": 114.110195,
|
||||
"alt": 2187,
|
||||
"heading": 0,
|
||||
"pitch": -85
|
||||
"pitch": -60
|
||||
},
|
||||
"scene3DOnly": false,
|
||||
"shadows": false,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ export default [
|
|||
label: '监控点',
|
||||
icon: '',
|
||||
selectedIcon: '',
|
||||
count: 0,
|
||||
count: 4,
|
||||
selected: true,
|
||||
id: 'jkd'
|
||||
},
|
||||
|
|
@ -11,7 +11,7 @@ export default [
|
|||
label: '微站',
|
||||
icon: '',
|
||||
selectedIcon: '',
|
||||
count: 0,
|
||||
count: 1,
|
||||
selected: true,
|
||||
id: 'wz'
|
||||
},
|
||||
|
|
@ -19,7 +19,7 @@ export default [
|
|||
label: '深度检测仪',
|
||||
icon: '',
|
||||
selectedIcon: '',
|
||||
count: 0,
|
||||
count: 1,
|
||||
selected: true,
|
||||
id: 'sdjcy'
|
||||
},
|
||||
|
|
@ -28,7 +28,7 @@ export default [
|
|||
icon: '',
|
||||
selectedIcon: '',
|
||||
count: 0,
|
||||
selected: true,
|
||||
selected: false,
|
||||
id: 'zkz'
|
||||
},
|
||||
{
|
||||
|
|
@ -36,7 +36,7 @@ export default [
|
|||
icon: '',
|
||||
selectedIcon: '',
|
||||
count: 0,
|
||||
selected: true,
|
||||
selected: false,
|
||||
id: 'gbz'
|
||||
},
|
||||
{
|
||||
|
|
@ -44,7 +44,7 @@ export default [
|
|||
icon: '',
|
||||
selectedIcon: '',
|
||||
count: 0,
|
||||
selected: true,
|
||||
selected: false,
|
||||
id: 'ssc'
|
||||
},
|
||||
{
|
||||
|
|
@ -52,14 +52,14 @@ export default [
|
|||
icon: '',
|
||||
selectedIcon: '',
|
||||
count: 0,
|
||||
selected: true,
|
||||
selected: false,
|
||||
id: 'shisc'
|
||||
},
|
||||
{
|
||||
label: 'CEMS',
|
||||
icon: '',
|
||||
selectedIcon: '',
|
||||
count: 0,
|
||||
count: 1,
|
||||
selected: true,
|
||||
id: 'cems'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
<!-- 中间内容-->
|
||||
<div class="center-content">
|
||||
<Map />
|
||||
<Map @pointClick="pointClick" />
|
||||
<div class="container"></div>
|
||||
<img class="center-bg" :src="centerBg" />
|
||||
</div>
|
||||
|
|
@ -120,7 +120,6 @@
|
|||
<script>
|
||||
import mapFilters from "@/config/mapFilters";
|
||||
const centerBg = require('@/assets/peakCoalImages/center/center-content-bg.png')
|
||||
import Test from "@/components/Test";
|
||||
export default {
|
||||
name: "PeakCoalView",
|
||||
components: {},
|
||||
|
|
@ -147,15 +146,16 @@ export default {
|
|||
e.stopPropagation()
|
||||
this.getAutoStyle()
|
||||
}, false)
|
||||
this.$open(Test, {}, {
|
||||
title: '测试',
|
||||
width: 1920,
|
||||
onClose () {
|
||||
console.log(1);
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 图层构造器
|
||||
* @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪) zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
|
||||
* @param { object } data 图层类型
|
||||
*/
|
||||
pointClick (layerType, data) {
|
||||
// todo
|
||||
},
|
||||
getAutoStyle() {
|
||||
const {scale, origin} = this.getScale()
|
||||
this.autoStyle = {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
export const state = {
|
||||
cems: [
|
||||
{
|
||||
longitude: 114.116195,
|
||||
latitude: 36.555232
|
||||
}
|
||||
],
|
||||
sdjcy: [
|
||||
{
|
||||
longitude: 114.116195,
|
||||
latitude: 36.555232
|
||||
}
|
||||
],
|
||||
zkz: [],
|
||||
gbz: [],
|
||||
ssc: [],
|
||||
shisc: [],
|
||||
wz: [
|
||||
{
|
||||
longitude: 114.116195,
|
||||
latitude: 36.555232
|
||||
},
|
||||
],
|
||||
jkd: [
|
||||
{
|
||||
longitude: 114.116195,
|
||||
latitude: 36.555232
|
||||
},
|
||||
{
|
||||
longitude: 114.116195,
|
||||
latitude: 36.555232
|
||||
},
|
||||
{
|
||||
longitude: 114.116195,
|
||||
latitude: 36.555232
|
||||
},
|
||||
{
|
||||
longitude: 114.116195,
|
||||
latitude: 36.555232
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue