417 lines
16 KiB
JavaScript
417 lines
16 KiB
JavaScript
const img1 = require('../../../assets/map/index/dianwei.png')
|
|
const img2 = require('../../../assets/map/index/gongsidianwei.png')
|
|
const cameraImg = require('../../../assets/map/index/camera.png')
|
|
const Cesium = window.Cesium
|
|
const img0_0 = require('../../../assets/map/gangkou_index/point/ico1.png')
|
|
const img0_1 = require('../../../assets/map/gangkou_index/point/ico2.png')
|
|
const img0_2 = require('../../../assets/map/gangkou_index/point/ico3.png')
|
|
|
|
const img1_0 = require('../../../assets/map/gangkou_index/point/ico4.png')
|
|
const img1_1 = require('../../../assets/map/gangkou_index/point/ico5.png')
|
|
const img1_2 = require('../../../assets/map/gangkou_index/point/ico6.png')
|
|
const img1_3 = require('../../../assets/map/gangkou_index/point/ico7.png')
|
|
const img1_4 = require('../../../assets/map/gangkou_index/point/ico8.png')
|
|
const img1_5 = require('../../../assets/map/gangkou_index/point/ico32.png')
|
|
|
|
const img2_0 = require('../../../assets/map/gangkou_index/point/ico9.png')
|
|
const img2_1 = require('../../../assets/map/gangkou_index/point/ico10.png')
|
|
const img2_2 = require('../../../assets/map/gangkou_index/point/ico11.png')
|
|
const img2_3 = require('../../../assets/map/gangkou_index/point/ico12.png')
|
|
const img2_4 = require('../../../assets/map/gangkou_index/point/ico13.png')
|
|
const img2_5 = require('../../../assets/map/gangkou_index/point/ico14.png')
|
|
const img2_6 = require('../../../assets/map/gangkou_index/point/ico15.png')
|
|
const img2_7 = require('../../../assets/map/gangkou_index/point/ico16.png')
|
|
const cfd_img2_8 = require('../../../assets/map/gangkou_index/point/cfd_ico3.png')
|
|
|
|
const img3_0 = require('../../../assets/map/gangkou_index/point/ico17.png')
|
|
const cfd_img3_0 = require('../../../assets/map/gangkou_index/point/cfd_ico3.png')
|
|
const img3_1 = require('../../../assets/map/gangkou_index/point/ico19.png')
|
|
// const img3_2 = require('../../../assets/map/gangkou_index/point/ico19.png')
|
|
// const img3_3 = require('../../../assets/map/gangkou_index/point/ico20.png')
|
|
|
|
const img4_0 = require('../../../assets/map/gangkou_index/point/ico21.png')
|
|
const img4_0_1 = require('../../../assets/map/gangkou_index/point/icon27.png')
|
|
const img4_0_2 = require('../../../assets/map/gangkou_index/point/icon28.png')
|
|
const img4_0_3 = require('../../../assets/map/gangkou_index/point/icon29.png')
|
|
const img4_1 = require('../../../assets/map/gangkou_index/point/ico22.png')
|
|
|
|
const cfd_img1_0 = require('../../../assets/map/gangkou_index/point/ico21.png')
|
|
const cfd_img1_0_1 = require('../../../assets/map/gangkou_index/point/icon27.png')
|
|
const cfd_img1_0_2 = require('../../../assets/map/gangkou_index/point/icon28.png')
|
|
const cfd_img1_0_3 = require('../../../assets/map/gangkou_index/point/icon29.png')
|
|
|
|
const img5_0 = require('../../../assets/map/gangkou_index/point/ico26.png')
|
|
|
|
const img6_0 = require('../../../assets/map/gangkou_index/point/ico30.png')
|
|
const img6_1 = require('../../../assets/map/gangkou_index/point/ico31.png')
|
|
const img6_1_online = require('../../../assets/map/gangkou_index/point/ico31_online.png')
|
|
const img6_1_offline = require('../../../assets/map/gangkou_index/point/ico31_offline.png')
|
|
|
|
const img7_0 = require('../../../assets/map/gangkou_index/point/ico26.png')
|
|
|
|
const img8_0 = require('../../../assets/map/gangkou_index/point/ico23.png')
|
|
const img8_1 = require('../../../assets/map/gangkou_index/point/ico24.png')
|
|
const img8_2 = require('../../../assets/map/gangkou_index/point/ico25.png')
|
|
const img8_3 = require('../../../assets/map/gangkou_index/point/ico26.png')
|
|
const GGimg1 = require('../../../assets/map/gangkou_index/point/ico1.png')
|
|
const GGimg2 = require('../../../assets/map/gangkou_index/point/ico2.png')
|
|
|
|
const imgMap = {
|
|
img0_0, img0_1, img0_2,
|
|
img1_0, img1_1, img1_2, img1_3, img1_4, img1_5,
|
|
img2_0, img2_1, img2_2, img2_3, img2_4, img2_5, img2_6, img2_7, cfd_img2_8,
|
|
cfd_img3_0, img3_0, img3_1,
|
|
img4_0, img4_0_1, img4_0_2, img4_0_3, img4_1,
|
|
img5_0,
|
|
img6_0, img6_1,
|
|
img7_0,
|
|
img8_0, img8_1, img8_2, img8_3,
|
|
cfd_img1_0, cfd_img1_0_1, cfd_img1_0_2, cfd_img1_0_3,
|
|
img6_1_online, img6_1_offline
|
|
}
|
|
export { imgMap }
|
|
|
|
import './PolylineTrailLinkMaterialProperty'
|
|
import loadMapBox from './mapbox'
|
|
import loadMapBoxCfd from './mapboxCfd'
|
|
import loadMapBoxCzks from './mapboxCzks'
|
|
import loadCmtMapBox from './mapboxCmt'
|
|
|
|
const polygonMap = {
|
|
'00003': loadMapBox,
|
|
'00002': loadMapBoxCzks,
|
|
'00005': loadCmtMapBox,
|
|
'00004': loadMapBoxCfd
|
|
}
|
|
|
|
export default class DragEntity {
|
|
constructor(val) {
|
|
this.viewer = val.viewer
|
|
this.id = []
|
|
}
|
|
|
|
addEntity(value) {
|
|
let billboard = {}
|
|
let labelText = value.MAP_POINT_NAME.length > 5 ? value.MAP_POINT_NAME.substring(0, 5) + '...' : value.MAP_POINT_NAME
|
|
let labelPixelOffset = new Cesium.Cartesian2(0, -55)
|
|
if (value.point_type === '港口') {
|
|
billboard = {
|
|
image: img1,
|
|
height: 62,
|
|
width: 40,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
labelText = value.MAP_POINT_NAME
|
|
labelPixelOffset = new Cesium.Cartesian2(0, -75)
|
|
}
|
|
if (value.point_type === '分公司') {
|
|
billboard = {
|
|
image: img2,
|
|
height: 40,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
}
|
|
if (value.point_type.indexOf('标记点') !== -1) {
|
|
console.info('====')
|
|
console.info(value)
|
|
console.info('====')
|
|
if (value.label == '人员' && value.corpInfoId == '035958e685cf4850bc40151c5e0617a6') {
|
|
billboard = {
|
|
image: GGimg1,
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else if (value.label == '车辆' && value.corpInfoId == '035958e685cf4850bc40151c5e0617a6') {
|
|
billboard = {
|
|
image: GGimg2,
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else if (value.label == '摄像头' && value.corpInfoId == '035958e685cf4850bc40151c5e0617a6') {
|
|
billboard = {
|
|
image: imgMap['img0_2' ],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else if (value.label == '摄像头') {
|
|
billboard = {
|
|
image: imgMap['img0_2' ],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else if (value.label == '人员闸机') {
|
|
billboard = {
|
|
image: imgMap['img0_0' ],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else if (value.label == '车辆闸机') {
|
|
billboard = {
|
|
image: imgMap['img0_1' ],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else {
|
|
billboard = {
|
|
image: imgMap['img' + value.icon_type],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
}
|
|
}
|
|
// 曹妃甸使用
|
|
if (value.gangkou === '00004') {
|
|
if (value.label === '人员定位') {
|
|
if (value.color === 'red') {
|
|
billboard = {
|
|
image: imgMap['cfd_img' + value.icon_type + '_1'],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else if (value.color === 'orange') {
|
|
billboard = {
|
|
image: imgMap['cfd_img' + value.icon_type + '_2'],
|
|
// image: imgMap['img' + value.type + '_1'],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else if (value.color === 'yellow') {
|
|
billboard = {
|
|
image: imgMap['cfd_img' + value.icon_type + '_3'],
|
|
// image: imgMap['img' + value.type + '_1'],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else {
|
|
billboard = {
|
|
image: imgMap['cfd_img' + value.icon_type],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
}
|
|
} else if (value.icon_type === '2_8') {
|
|
billboard = {
|
|
image: imgMap['cfd_img' + value.icon_type],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else if (value.icon_type === '3_0') {
|
|
billboard = {
|
|
image: imgMap['cfd_img' + value.icon_type],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else {
|
|
billboard = {
|
|
image: imgMap['img' + value.icon_type],
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
}
|
|
}
|
|
if (value.gangkou === '00004' && value.label === '车辆定位') {
|
|
billboard = {
|
|
image: img4_1,
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
} else if (value.gangkou === '00004' && value.label === '摄像头') {
|
|
billboard = {
|
|
image: img5_0,
|
|
height: 36,
|
|
width: 30,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
}
|
|
}
|
|
new Cesium.PinBuilder()
|
|
return new Cesium.Entity({
|
|
id: value.id,
|
|
name: value.name,
|
|
position: Cesium.Cartesian3.fromDegrees(value.position.x, value.position.y),
|
|
billboard: billboard,
|
|
label: {
|
|
text: labelText,
|
|
font: '13px sans-serif',
|
|
pixelOffset: labelPixelOffset,
|
|
showBackground: true,
|
|
// 地图上扎点的名字背景色
|
|
// eslint-disable-next-line new-cap
|
|
backgroundColor: new Cesium.Color.fromCssColorString('rgba(20, 58, 142, 1)'),
|
|
backgroundPadding: new Cesium.Cartesian2(7, 5),
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
},
|
|
monitoItems: {
|
|
data: value
|
|
}
|
|
})
|
|
}
|
|
|
|
addPolygon(id, type) {
|
|
if (!polygonMap[id]) return
|
|
const loadMapBoxObj = polygonMap[id]()
|
|
if (type === 'wall') {
|
|
const loadMapBoxItem = loadMapBoxObj['wallList']
|
|
for (let i = 0; i < loadMapBoxItem.length; i++) {
|
|
this.addWall(this.formatPolygon(loadMapBoxItem[i]))
|
|
}
|
|
return
|
|
}
|
|
// 循环获取所有颜色
|
|
for (const loadMapBoxKey in loadMapBoxObj) {
|
|
// 获取每种颜色
|
|
const loadMapBoxItem = loadMapBoxObj[loadMapBoxKey]
|
|
if (loadMapBoxKey === 'wallList') continue
|
|
// 循环每种颜色里每一块创建多边形
|
|
for (let i = 0; i < loadMapBoxItem.length; i++) {
|
|
this.addFourColorDiagram(this.formatPolygon(loadMapBoxItem[i]), loadMapBoxItem[i])
|
|
}
|
|
}
|
|
}
|
|
|
|
formatPolygon(item) {
|
|
const latitudeAndLongitude = []
|
|
item.position.forEach(item => {
|
|
latitudeAndLongitude.push(item.x)
|
|
latitudeAndLongitude.push(item.y)
|
|
})
|
|
return latitudeAndLongitude
|
|
}
|
|
|
|
addFourColorDiagram(latitudeAndLongitude, item) {
|
|
const id = Cesium.createGuid()
|
|
this.id.push({
|
|
id,
|
|
key: 'FourColorDiagram'
|
|
})
|
|
const target = new Cesium.Entity({
|
|
id,
|
|
polygon: {
|
|
hierarchy: Cesium.Cartesian3.fromDegreesArray(latitudeAndLongitude),
|
|
extrudedHeight: item.stretchHeight,
|
|
height: item.height,
|
|
// eslint-disable-next-line new-cap
|
|
material: new Cesium.Color.fromCssColorString(item.color),
|
|
outline: !!item.strokeColor,
|
|
// eslint-disable-next-line new-cap
|
|
outlineColor: new Cesium.Color.fromCssColorString(item.strokeColor)
|
|
}
|
|
})
|
|
this.viewer.entities.add(target)
|
|
}
|
|
addWall(latitudeAndLongitude) {
|
|
const id = Cesium.createGuid()
|
|
this.id.push({
|
|
id,
|
|
key: 'Wall'
|
|
})
|
|
const target = new Cesium.Entity({
|
|
id,
|
|
wall: {
|
|
positions: Cesium.Cartesian3.fromDegreesArray(latitudeAndLongitude),
|
|
material: new Cesium.PolylineTrailLinkMaterialProperty({
|
|
color: Cesium.Color.fromBytes(201, 118, 243).withAlpha(0.5),
|
|
duration: 2000
|
|
}, this.viewer),
|
|
maximumHeights: new Array(latitudeAndLongitude.length).fill(40),
|
|
minimumHeights: new Array(latitudeAndLongitude.length).fill(0)
|
|
}
|
|
})
|
|
this.viewer.entities.add(target)
|
|
}
|
|
|
|
removeFourColorDiagram() {
|
|
for (let i = 0; i < this.id.length; i++) {
|
|
if (this.id[i].key === 'FourColorDiagram') {
|
|
this.viewer.entities.removeById(this.id[i].id)
|
|
this.id.splice(i, 1)
|
|
i--
|
|
}
|
|
}
|
|
}
|
|
|
|
removeWall() {
|
|
for (let i = 0; i < this.id.length; i++) {
|
|
if (this.id[i].key === 'Wall') {
|
|
this.viewer.entities.removeById(this.id[i].id)
|
|
this.id.splice(i, 1)
|
|
i--
|
|
}
|
|
}
|
|
}
|
|
|
|
delEntity(point) {
|
|
this.viewer.entities.remove(point)
|
|
}
|
|
}
|
|
|