|
|
@ -1,7 +1,7 @@ |
|
|
|
/** |
|
|
|
* 创建、删除各种标绘元素 |
|
|
|
*/ |
|
|
|
import earthUtils from "@/utils/earthMap/earth" |
|
|
|
import earthUtils from '@/utils/earthMap/earth'; |
|
|
|
|
|
|
|
// 位置
|
|
|
|
interface Position { |
|
|
@ -19,33 +19,33 @@ interface Position { |
|
|
|
* @param name 监控点名称 |
|
|
|
* @param customProp 自定义数据 (JSON) |
|
|
|
*/ |
|
|
|
export const addMonitorPin = (pos: number[], name = "0", customProp = ""): unknown => { |
|
|
|
export const addMonitorPin = (pos: number[], name = '0', customProp = ''): unknown => { |
|
|
|
const pin = new window.XE.Obj.Pin(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
xbsjType: "Pin", |
|
|
|
xbsjType: 'Pin', |
|
|
|
name: `jkd_${name}`, |
|
|
|
position: pos, |
|
|
|
customProp: customProp, |
|
|
|
// imageUrl: "./assets/image/camera.png",
|
|
|
|
imageUrl: " ", |
|
|
|
imageUrl: ' ', |
|
|
|
far: 2000, //最远可视距离
|
|
|
|
near: 1, |
|
|
|
pinBuilder: { |
|
|
|
// extText: "相机名称",
|
|
|
|
extText: JSON.parse(customProp).labelName, |
|
|
|
extTextFont: "34px 楷体", |
|
|
|
extTextFont: '34px 楷体', |
|
|
|
extTextPixelOffset: [20, -45], |
|
|
|
fillColor: [1, 1, 1, 0.9], |
|
|
|
outlineColor: [0, 0, 0, 0.9] |
|
|
|
} |
|
|
|
outlineColor: [0, 0, 0, 0.9], |
|
|
|
}, |
|
|
|
}; |
|
|
|
pin.xbsjFromJSON(objConfig); |
|
|
|
//移入移出事件
|
|
|
|
pin.onmouseover = () => { |
|
|
|
window.$earth.czm.viewer._container.style.cursor = "pointer"; |
|
|
|
window.$earth.czm.viewer._container.style.cursor = 'pointer'; |
|
|
|
}; |
|
|
|
pin.onmouseout = () => { |
|
|
|
window.$earth.czm.viewer._container.style.cursor = "default"; |
|
|
|
window.$earth.czm.viewer._container.style.cursor = 'default'; |
|
|
|
}; |
|
|
|
|
|
|
|
//方案二 监听相机与监控点的距离 显示/隐藏图案
|
|
|
@ -63,7 +63,6 @@ export const addMonitorPin = (pos: number[], name = "0", customProp = ""): unkno |
|
|
|
// });
|
|
|
|
// console.log(pin);
|
|
|
|
|
|
|
|
|
|
|
|
//方案三 监听相机的高度 显示/隐藏图案
|
|
|
|
// window.XE.MVVM.watch(window.$earth.camera, 'position', (res :any) => {
|
|
|
|
// // [2.114222042695852, 0.6632251044444447, 10000000]
|
|
|
@ -79,7 +78,7 @@ export const addMonitorPin = (pos: number[], name = "0", customProp = ""): unkno |
|
|
|
// });
|
|
|
|
|
|
|
|
return pin; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* 创建视域 |
|
|
@ -108,18 +107,17 @@ export const addViewShed = (pos: number[], rot: number[], near = 1, far = 200, f |
|
|
|
// }
|
|
|
|
// viewShed.xbsjFromJSON(objConfig);
|
|
|
|
// console.log('viewShed',viewShed);
|
|
|
|
viewShed.name = "视域分析" |
|
|
|
viewShed.position = pos |
|
|
|
viewShed.rotation = rot |
|
|
|
viewShed.fovH = window.Cesium.Math.toRadians(fovH) |
|
|
|
viewShed.fovV = window.Cesium.Math.toRadians(fovV) |
|
|
|
viewShed.far = far |
|
|
|
viewShed.near = near |
|
|
|
viewShed.name = '视域分析'; |
|
|
|
viewShed.position = pos; |
|
|
|
viewShed.rotation = rot; |
|
|
|
viewShed.fovH = window.Cesium.Math.toRadians(fovH); |
|
|
|
viewShed.fovV = window.Cesium.Math.toRadians(fovV); |
|
|
|
viewShed.far = far; |
|
|
|
viewShed.near = near; |
|
|
|
viewShed.show = true; |
|
|
|
viewShed.ref = "viewshed"; |
|
|
|
viewShed.ref = 'viewshed'; |
|
|
|
return viewShed; |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* 创建视频融合 |
|
|
@ -133,8 +131,8 @@ export const addViewShed = (pos: number[], rot: number[], near = 1, far = 200, f |
|
|
|
export const addCameraVideo = (videoUrl: string, pos: number[], rot: number[], fovH: number, fovV: number, near_far = [1, 169.4]): unknown => { |
|
|
|
const cameraVideo = new window.XE.Obj.CameraVideo(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
xbsjType: "CameraVideo", |
|
|
|
name: "视频融合", |
|
|
|
xbsjType: 'CameraVideo', |
|
|
|
name: '视频融合', |
|
|
|
videoUrl: videoUrl, |
|
|
|
position: pos, |
|
|
|
rotation: rot, |
|
|
@ -142,41 +140,44 @@ export const addCameraVideo = (videoUrl: string, pos: number[], rot: number[], f |
|
|
|
fovV: fovV, |
|
|
|
far: near_far[1], |
|
|
|
near: near_far[0], |
|
|
|
showHelper: false |
|
|
|
} |
|
|
|
showHelper: false, |
|
|
|
}; |
|
|
|
cameraVideo.xbsjFromJSON(objConfig); |
|
|
|
return cameraVideo; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
//创建模型气泡窗
|
|
|
|
export const addGeoPin = (pos: Position = { |
|
|
|
// 经度
|
|
|
|
longitude: 0, |
|
|
|
// 纬度
|
|
|
|
latitude: 0, |
|
|
|
// 高度
|
|
|
|
height: 0, |
|
|
|
}, lab = { |
|
|
|
// 高
|
|
|
|
height: 100, |
|
|
|
// 纬度
|
|
|
|
width: 150, |
|
|
|
// 高度
|
|
|
|
fontSize: 25, |
|
|
|
}, content = ''): any => { |
|
|
|
|
|
|
|
export const addGeoPin = ( |
|
|
|
pos: Position = { |
|
|
|
// 经度
|
|
|
|
longitude: 0, |
|
|
|
// 纬度
|
|
|
|
latitude: 0, |
|
|
|
// 高度
|
|
|
|
height: 0, |
|
|
|
}, |
|
|
|
lab = { |
|
|
|
// 高
|
|
|
|
height: 100, |
|
|
|
// 纬度
|
|
|
|
width: 150, |
|
|
|
// 高度
|
|
|
|
fontSize: 25, |
|
|
|
}, |
|
|
|
content = '' |
|
|
|
): any => { |
|
|
|
const geoPin = new window.XE.Obj.Plots.GeoPin(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
xbsjType: "GeoPin", |
|
|
|
name: "气泡窗", |
|
|
|
xbsjType: 'GeoPin', |
|
|
|
name: '气泡窗', |
|
|
|
position: [pos.longitude, pos.latitude, pos.height], |
|
|
|
labmodel: [lab.height, lab.width, lab.fontSize], |
|
|
|
far: 1073741824, |
|
|
|
innerHTML: pinName(lab, content) |
|
|
|
} |
|
|
|
innerHTML: pinName(lab, content), |
|
|
|
}; |
|
|
|
geoPin.xbsjFromJSON(objConfig); |
|
|
|
return geoPin; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
//修改气泡窗名称
|
|
|
|
// export function pinName ( name: string = '', img: any = `${require('@/assets/image/dialog.png')}`)
|
|
|
@ -197,33 +198,28 @@ export function pinName(labmodel: any, name = '', img: any = `${require('@/asset |
|
|
|
<div style="display:table;height:85%;width:100%"> |
|
|
|
<span style="display:table-cell;text-align:center;vertical-align:middle;font-size:${labmodel.fontSize}px;color:rgba(154,205,255,0.9)">${name}</span> |
|
|
|
</div> |
|
|
|
</div>` |
|
|
|
|
|
|
|
</div>`;
|
|
|
|
} |
|
|
|
|
|
|
|
//创建3DTiles
|
|
|
|
export const addTileset = (): void => { |
|
|
|
const tileset = new window.XE.Obj.Tileset(window.$earth) |
|
|
|
const tileset = new window.XE.Obj.Tileset(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
ref: "bim_indoor", |
|
|
|
ref: 'bim_indoor', |
|
|
|
czmObject: { |
|
|
|
xbsjType: "Tileset", |
|
|
|
name: "indoor", |
|
|
|
xbsjPosition: [ |
|
|
|
1.9637768112887974, |
|
|
|
0.576622643409596, |
|
|
|
0.2 |
|
|
|
], |
|
|
|
xbsjType: 'Tileset', |
|
|
|
name: 'indoor', |
|
|
|
xbsjPosition: [1.9637768112887974, 0.576622643409596, 0.2], |
|
|
|
xbsjUseOriginTransform: false, |
|
|
|
url: "./assets/3dtiles/D/indoor/tileset.json", |
|
|
|
} |
|
|
|
} |
|
|
|
url: './assets/3dtiles/D/indoor/tileset.json', |
|
|
|
}, |
|
|
|
}; |
|
|
|
tileset.xbsjFromJSON(objConfig); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
//创建漫游路径
|
|
|
|
export const addRoamPath = (param: any): unknown => { |
|
|
|
let { pathname, positions, rotations, currentspeed, alwaysalongthepath, loopplay } = param |
|
|
|
let { pathname, positions, rotations, currentspeed, alwaysalongthepath, loopplay } = param; |
|
|
|
|
|
|
|
positions = JSON.parse(positions); |
|
|
|
rotations = JSON.parse(rotations); |
|
|
@ -231,7 +227,7 @@ export const addRoamPath = (param: any): unknown => { |
|
|
|
loopplay = loopplay == 1 ? true : false; |
|
|
|
const path = new window.XE.Obj.Path(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
xbsjType: "Path", |
|
|
|
xbsjType: 'Path', |
|
|
|
name: pathname, |
|
|
|
positions, |
|
|
|
rotations, |
|
|
@ -240,33 +236,42 @@ export const addRoamPath = (param: any): unknown => { |
|
|
|
playing: true, |
|
|
|
loopPlay: loopplay, |
|
|
|
alwaysAlongThePath: alwaysalongthepath, |
|
|
|
} |
|
|
|
}; |
|
|
|
path.xbsjFromJSON(objConfig); |
|
|
|
path.cameraAttached = true; |
|
|
|
path.currentShow = false; |
|
|
|
return path; |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
//创建指向箭头
|
|
|
|
export const addArrow = (positions: Array<Array<number>>, imgUrl = "./assets/image/arrow.png") => { |
|
|
|
const road = new window.XE.Obj.Road(window.$earth) |
|
|
|
export const addArrow = (positions: Array<Array<number>>, imgUrl = './assets/image/arrow.png') => { |
|
|
|
const road = new window.XE.Obj.Road(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
xbsjType: "Road", |
|
|
|
name: "arrow", |
|
|
|
xbsjType: 'Road', |
|
|
|
name: 'arrow', |
|
|
|
positions: positions, |
|
|
|
width: 5, |
|
|
|
imageUrl: imgUrl |
|
|
|
} |
|
|
|
imageUrl: imgUrl, |
|
|
|
}; |
|
|
|
road.xbsjFromJSON(objConfig); |
|
|
|
return road |
|
|
|
} |
|
|
|
return road; |
|
|
|
}; |
|
|
|
|
|
|
|
//创建视频图元
|
|
|
|
export const addCustomPrimitive = (lon: number, lat: number, height: number, imgUrl: string, rt = [0, 0, 0], id = '', pathId = '', deviceUid = '', scale = [1, 5, 4]) => { |
|
|
|
export const addCustomPrimitive = ( |
|
|
|
lon: number, |
|
|
|
lat: number, |
|
|
|
height: number, |
|
|
|
imgUrl: string, |
|
|
|
rt = [0, 0, 0], |
|
|
|
id = '', |
|
|
|
pathId = '', |
|
|
|
deviceUid = '', |
|
|
|
scale = [1, 5, 4] |
|
|
|
) => { |
|
|
|
const cp = new window.XE.Obj.CustomPrimitive(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
xbsjType: "CustomPrimitive", |
|
|
|
xbsjType: 'CustomPrimitive', |
|
|
|
position: [window.Cesium.Math.toRadians(lon), window.Cesium.Math.toRadians(lat), height], |
|
|
|
rotation: rt, |
|
|
|
scale, |
|
|
@ -275,15 +280,15 @@ export const addCustomPrimitive = (lon: number, lat: number, height: number, img |
|
|
|
indices: [0, 1, 2, 0, 2, 3], |
|
|
|
renderState: { |
|
|
|
cull: { |
|
|
|
enabled: true |
|
|
|
enabled: true, |
|
|
|
}, |
|
|
|
polygonOffset: {}, |
|
|
|
scissorTest: { |
|
|
|
rectangle: {} |
|
|
|
rectangle: {}, |
|
|
|
}, |
|
|
|
depthRange: {}, |
|
|
|
depthTest: { |
|
|
|
enabled: true |
|
|
|
enabled: true, |
|
|
|
}, |
|
|
|
colorMask: {}, |
|
|
|
depthMask: false, |
|
|
@ -294,13 +299,13 @@ export const addCustomPrimitive = (lon: number, lat: number, height: number, img |
|
|
|
equationAlpha: 32774, |
|
|
|
functionSourceRgb: 770, |
|
|
|
functionDestinationRgb: 771, |
|
|
|
functionDestinationAlpha: 771 |
|
|
|
functionDestinationAlpha: 771, |
|
|
|
}, |
|
|
|
stencilTest: { |
|
|
|
frontOperation: {}, |
|
|
|
backOperation: {} |
|
|
|
backOperation: {}, |
|
|
|
}, |
|
|
|
sampleCoverage: {} |
|
|
|
sampleCoverage: {}, |
|
|
|
}, |
|
|
|
color: [1, 1, 1, 1], |
|
|
|
canvasWidth: 500, |
|
|
@ -312,91 +317,121 @@ export const addCustomPrimitive = (lon: number, lat: number, height: number, img |
|
|
|
pathId, |
|
|
|
deviceUid, |
|
|
|
// imageUrl: "http://192.168.1.200:8080/live/44040000001320000002@44040000001320000002.m3u8"
|
|
|
|
} |
|
|
|
}; |
|
|
|
cp.xbsjFromJSON(objConfig); |
|
|
|
return cp; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 创建船只贴地图片
|
|
|
|
export const addShipGroundImg = (lon: number, lat: number, height: number, imgUrl: string, rt: number, trackId: number) => { |
|
|
|
const shipGroundImg = new window.XE.Obj.GroundImage(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
name: `${trackId}号船只`, |
|
|
|
trackId, |
|
|
|
position: [window.Cesium.Math.toRadians(lon), window.Cesium.Math.toRadians(lat), height], |
|
|
|
loopPlay: false, |
|
|
|
imageUrls: [imgUrl], |
|
|
|
rotation: -(Math.PI / 180) * rt, |
|
|
|
ground: false, |
|
|
|
}; |
|
|
|
shipGroundImg.xbsjFromJSON(objConfig); |
|
|
|
return shipGroundImg; |
|
|
|
}; |
|
|
|
|
|
|
|
// 创建船只轨迹
|
|
|
|
export const addShipTrack = (positions: number[][]) => { |
|
|
|
const shipTrack = new window.XE.Obj.Polyline(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
width: 2.0, |
|
|
|
positions, |
|
|
|
material: { |
|
|
|
type: 'XbsjPolylineDashMaterial', |
|
|
|
XbsjPolylineDashMaterial: { |
|
|
|
color: [1, 1, 0.03, 1], |
|
|
|
}, |
|
|
|
}, |
|
|
|
ground: true, |
|
|
|
}; |
|
|
|
shipTrack.xbsjFromJSON(objConfig); |
|
|
|
return shipTrack; |
|
|
|
}; |
|
|
|
|
|
|
|
//创建报警扫描线
|
|
|
|
export const addScanline = (pos: number[], radius: number, timeDuration: number): unknown => { |
|
|
|
const sl = new window.XE.Obj.Scanline(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
xbsjType: "Scanline", |
|
|
|
name: "报警扫描线", |
|
|
|
xbsjType: 'Scanline', |
|
|
|
name: '报警扫描线', |
|
|
|
position: pos, |
|
|
|
radius: radius, |
|
|
|
color: [1, 0.09803921568627451, 0, 1], |
|
|
|
timeDuration: timeDuration, |
|
|
|
playing: true |
|
|
|
} |
|
|
|
playing: true, |
|
|
|
}; |
|
|
|
sl.xbsjFromJSON(objConfig); |
|
|
|
return sl; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
//创建属性展示牌
|
|
|
|
export const addBillboard = async (pos: number[], rot: number[], type: string, canvas: number[]): Promise<any> => { |
|
|
|
const cp = new window.XE.Obj.CustomPrimitive(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
"position": pos, |
|
|
|
"rotation": rot, |
|
|
|
"scale": [15, 15, 10], |
|
|
|
"positions": [0, -1, 0, 0, 1, 0, 0, 1, 2, 0, -1, 2, 0, 1, 0, 0, -1, 0, 0, -1, 2, 0, 1, 2], |
|
|
|
"sts": [0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1], |
|
|
|
"indices": [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7], |
|
|
|
"renderState": { |
|
|
|
"cull": { |
|
|
|
"enabled": true |
|
|
|
position: pos, |
|
|
|
rotation: rot, |
|
|
|
scale: [15, 15, 10], |
|
|
|
positions: [0, -1, 0, 0, 1, 0, 0, 1, 2, 0, -1, 2, 0, 1, 0, 0, -1, 0, 0, -1, 2, 0, 1, 2], |
|
|
|
sts: [0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1], |
|
|
|
indices: [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7], |
|
|
|
renderState: { |
|
|
|
cull: { |
|
|
|
enabled: true, |
|
|
|
}, |
|
|
|
"polygonOffset": {}, |
|
|
|
"scissorTest": { |
|
|
|
"rectangle": {} |
|
|
|
polygonOffset: {}, |
|
|
|
scissorTest: { |
|
|
|
rectangle: {}, |
|
|
|
}, |
|
|
|
"depthRange": {}, |
|
|
|
"depthTest": { |
|
|
|
"enabled": true |
|
|
|
depthRange: {}, |
|
|
|
depthTest: { |
|
|
|
enabled: true, |
|
|
|
}, |
|
|
|
"colorMask": {}, |
|
|
|
"depthMask": true, |
|
|
|
"blending": { |
|
|
|
"enabled": true, |
|
|
|
"color": {}, |
|
|
|
"equationRgb": 32774, |
|
|
|
"equationAlpha": 32774, |
|
|
|
"functionSourceRgb": 770, |
|
|
|
"functionDestinationRgb": 771, |
|
|
|
"functionDestinationAlpha": 771 |
|
|
|
colorMask: {}, |
|
|
|
depthMask: true, |
|
|
|
blending: { |
|
|
|
enabled: true, |
|
|
|
color: {}, |
|
|
|
equationRgb: 32774, |
|
|
|
equationAlpha: 32774, |
|
|
|
functionSourceRgb: 770, |
|
|
|
functionDestinationRgb: 771, |
|
|
|
functionDestinationAlpha: 771, |
|
|
|
}, |
|
|
|
"stencilTest": { |
|
|
|
"frontOperation": {}, |
|
|
|
"backOperation": {} |
|
|
|
stencilTest: { |
|
|
|
frontOperation: {}, |
|
|
|
backOperation: {}, |
|
|
|
}, |
|
|
|
"sampleCoverage": {} |
|
|
|
sampleCoverage: {}, |
|
|
|
}, |
|
|
|
"canvasWidth": canvas[0], |
|
|
|
"canvasHeight": canvas[1], |
|
|
|
"autoRegisterEditing": true |
|
|
|
} |
|
|
|
canvasWidth: canvas[0], |
|
|
|
canvasHeight: canvas[1], |
|
|
|
autoRegisterEditing: true, |
|
|
|
}; |
|
|
|
cp.xbsjFromJSON(objConfig); |
|
|
|
await setDiv(cp, type, canvas); |
|
|
|
return cp; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
export function setDiv(p: any, htmlText: string, canvasWH: number[]) { |
|
|
|
|
|
|
|
const canvas = window.XE.HTML.div2Canvas(htmlText, { width: canvasWH[0], height: canvasWH[1] }); |
|
|
|
canvas.then( |
|
|
|
(ca: any) => { |
|
|
|
// console.log(p);
|
|
|
|
|
|
|
|
p.drawCanvas((ctx: any) => { |
|
|
|
// console.log("htmlText",htmlText);
|
|
|
|
// console.log("ca",ca);
|
|
|
|
ctx.clearRect(0, 0, canvasWH[0], canvasWH[1]); |
|
|
|
ctx.drawImage(ca, 0, 0); |
|
|
|
}); |
|
|
|
} |
|
|
|
) |
|
|
|
|
|
|
|
canvas.then((ca: any) => { |
|
|
|
// console.log(p);
|
|
|
|
|
|
|
|
p.drawCanvas((ctx: any) => { |
|
|
|
// console.log("htmlText",htmlText);
|
|
|
|
// console.log("ca",ca);
|
|
|
|
ctx.clearRect(0, 0, canvasWH[0], canvasWH[1]); |
|
|
|
ctx.drawImage(ca, 0, 0); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
//创建单体化模型
|
|
|
@ -423,25 +458,35 @@ export const addHCZ = (param: any): unknown => { |
|
|
|
//移入事件
|
|
|
|
cp.onmouseover = (e: any) => { |
|
|
|
e.id.color = JSON.parse(param.color); |
|
|
|
window.$earth.czm.viewer._container.style.cursor = "pointer"; |
|
|
|
window.$earth.czm.viewer._container.style.cursor = 'pointer'; |
|
|
|
}; |
|
|
|
//移出事件
|
|
|
|
cp.onmouseout = (e: any) => { |
|
|
|
e.id.color = cpColorTP; |
|
|
|
window.$earth.czm.viewer._container.style.cursor = "default"; |
|
|
|
window.$earth.czm.viewer._container.style.cursor = 'default'; |
|
|
|
}; |
|
|
|
//点击事件
|
|
|
|
cp.onclick = () => { |
|
|
|
cp.onmouseover = () => { } |
|
|
|
cp.onmouseout = () => { } |
|
|
|
cp.onmouseover = () => {}; |
|
|
|
cp.onmouseout = () => {}; |
|
|
|
}; |
|
|
|
return cp; |
|
|
|
} |
|
|
|
export const addCanvas = (lon: number, lat: number, height: number, imgUrl: string, rt = [0, 0, 0], id = '', scale = [1, 5, 4], pathId = '', deviceUid = '') => { |
|
|
|
}; |
|
|
|
export const addCanvas = ( |
|
|
|
lon: number, |
|
|
|
lat: number, |
|
|
|
height: number, |
|
|
|
imgUrl: string, |
|
|
|
rt = [0, 0, 0], |
|
|
|
id = '', |
|
|
|
scale = [1, 5, 4], |
|
|
|
pathId = '', |
|
|
|
deviceUid = '' |
|
|
|
) => { |
|
|
|
const cp = new window.XE.Obj.CustomPrimitive(window.$earth); |
|
|
|
|
|
|
|
const objConfig = { |
|
|
|
xbsjType: "CustomPrimitive", |
|
|
|
xbsjType: 'CustomPrimitive', |
|
|
|
position: [lon, lat, height], |
|
|
|
rotation: rt, |
|
|
|
scale, |
|
|
@ -450,15 +495,15 @@ export const addCanvas = (lon: number, lat: number, height: number, imgUrl: stri |
|
|
|
indices: [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7], |
|
|
|
renderState: { |
|
|
|
cull: { |
|
|
|
enabled: true |
|
|
|
enabled: true, |
|
|
|
}, |
|
|
|
polygonOffset: {}, |
|
|
|
scissorTest: { |
|
|
|
rectangle: {} |
|
|
|
rectangle: {}, |
|
|
|
}, |
|
|
|
depthRange: {}, |
|
|
|
depthTest: { |
|
|
|
enabled: true |
|
|
|
enabled: true, |
|
|
|
}, |
|
|
|
colorMask: {}, |
|
|
|
depthMask: false, |
|
|
@ -469,13 +514,13 @@ export const addCanvas = (lon: number, lat: number, height: number, imgUrl: stri |
|
|
|
equationAlpha: 32774, |
|
|
|
functionSourceRgb: 770, |
|
|
|
functionDestinationRgb: 771, |
|
|
|
functionDestinationAlpha: 771 |
|
|
|
functionDestinationAlpha: 771, |
|
|
|
}, |
|
|
|
stencilTest: { |
|
|
|
frontOperation: {}, |
|
|
|
backOperation: {} |
|
|
|
backOperation: {}, |
|
|
|
}, |
|
|
|
sampleCoverage: {} |
|
|
|
sampleCoverage: {}, |
|
|
|
}, |
|
|
|
color: [1, 1, 1, 1], |
|
|
|
canvasWidth: 500, |
|
|
@ -486,10 +531,10 @@ export const addCanvas = (lon: number, lat: number, height: number, imgUrl: stri |
|
|
|
id, |
|
|
|
pathId, |
|
|
|
deviceUid, |
|
|
|
} |
|
|
|
}; |
|
|
|
cp.xbsjFromJSON(objConfig); |
|
|
|
return cp; |
|
|
|
} |
|
|
|
}; |
|
|
|
//循环删除所有entity对象
|
|
|
|
export const deleteAllEntity = (objName: string): void => { |
|
|
|
const entities = window.$earth.czm.viewer.entities._entities._array; |
|
|
@ -499,32 +544,39 @@ export const deleteAllEntity = (objName: string): void => { |
|
|
|
i--; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
//创建看板
|
|
|
|
export const productionBoard = (lon: number, lat: number, height: number, imgUrl: string, rt = [0, 0, 0], scale = [1, 5, 4], canvas: number[] = [521, 298]) => { |
|
|
|
export const productionBoard = ( |
|
|
|
lon: number, |
|
|
|
lat: number, |
|
|
|
height: number, |
|
|
|
imgUrl: string, |
|
|
|
rt = [0, 0, 0], |
|
|
|
scale = [1, 5, 4], |
|
|
|
canvas: number[] = [521, 298] |
|
|
|
) => { |
|
|
|
const cp = new window.XE.Obj.CustomPrimitive(window.$earth); |
|
|
|
const objConfig = { |
|
|
|
xbsjType: "CustomPrimitive", |
|
|
|
xbsjType: 'CustomPrimitive', |
|
|
|
position: [window.Cesium.Math.toRadians(lon), window.Cesium.Math.toRadians(lat), height], |
|
|
|
rotation: rt, |
|
|
|
scale, |
|
|
|
name: "看板", |
|
|
|
name: '看板', |
|
|
|
positions: [0, -1, 0, 0, 1, 0, 0, 1, 2, 0, -1, 2, 0, 1, 0, 0, -1, 0, 0, -1, 2, 0, 1, 2], |
|
|
|
sts: [0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1], |
|
|
|
indices: [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7], |
|
|
|
renderState: { |
|
|
|
cull: { |
|
|
|
enabled: true |
|
|
|
enabled: true, |
|
|
|
}, |
|
|
|
polygonOffset: {}, |
|
|
|
scissorTest: { |
|
|
|
rectangle: {} |
|
|
|
rectangle: {}, |
|
|
|
}, |
|
|
|
depthRange: {}, |
|
|
|
depthTest: { |
|
|
|
enabled: true |
|
|
|
enabled: true, |
|
|
|
}, |
|
|
|
colorMask: {}, |
|
|
|
depthMask: false, |
|
|
@ -535,24 +587,23 @@ export const productionBoard = (lon: number, lat: number, height: number, imgUrl |
|
|
|
equationAlpha: 32774, |
|
|
|
functionSourceRgb: 770, |
|
|
|
functionDestinationRgb: 771, |
|
|
|
functionDestinationAlpha: 771 |
|
|
|
functionDestinationAlpha: 771, |
|
|
|
}, |
|
|
|
stencilTest: { |
|
|
|
frontOperation: {}, |
|
|
|
backOperation: {} |
|
|
|
backOperation: {}, |
|
|
|
}, |
|
|
|
sampleCoverage: {} |
|
|
|
sampleCoverage: {}, |
|
|
|
}, |
|
|
|
color: [1, 1, 1, 1], |
|
|
|
canvasWidth: canvas[0], |
|
|
|
canvasHeight: canvas[1], |
|
|
|
autoRegisterEditing: true, |
|
|
|
imageUrl: imgUrl, |
|
|
|
|
|
|
|
} |
|
|
|
}; |
|
|
|
cp.xbsjFromJSON(objConfig); |
|
|
|
return cp; |
|
|
|
} |
|
|
|
}; |
|
|
|
//创建防区
|
|
|
|
export const defenceArea = (positions: any, color: number[], height = 3, loop = false, fenceId?: string): any => { |
|
|
|
const dc = new window.XE.Obj.CustomPrimitive.createDynamicCountour({ |
|
|
@ -568,38 +619,33 @@ export const defenceArea = (positions: any, color: number[], height = 3, loop = |
|
|
|
if (fenceId) dc.customProp = fenceId; |
|
|
|
//移入移出事件
|
|
|
|
dc.onmouseover = () => { |
|
|
|
window.$earth.czm.viewer._container.style.cursor = "pointer"; |
|
|
|
window.$earth.czm.viewer._container.style.cursor = 'pointer'; |
|
|
|
}; |
|
|
|
dc.onmouseout = () => { |
|
|
|
window.$earth.czm.viewer._container.style.cursor = "default"; |
|
|
|
window.$earth.czm.viewer._container.style.cursor = 'default'; |
|
|
|
}; |
|
|
|
//这2句代码应该可以不用
|
|
|
|
//dc.setStartTime(Math.random());
|
|
|
|
//dc.setFPS(120 * Math.random());
|
|
|
|
return dc; |
|
|
|
} |
|
|
|
}; |
|
|
|
//创建3D模型
|
|
|
|
|
|
|
|
export const addModel = ( |
|
|
|
name: string, |
|
|
|
url: string, |
|
|
|
options: any = {}, |
|
|
|
hasMouseOver: boolean= true |
|
|
|
): void => { |
|
|
|
const tileset = new window.XE.Obj.Model(window.$earth) |
|
|
|
export const addModel = (name: string, url: string, options: any = {}, hasMouseOver: boolean = true): void => { |
|
|
|
const tileset = new window.XE.Obj.Model(window.$earth); |
|
|
|
// 创建一个Model对象
|
|
|
|
const objConfig = { |
|
|
|
xbsjType: "Model", |
|
|
|
xbsjType: 'Model', |
|
|
|
name: name, |
|
|
|
url: url, |
|
|
|
id: options.id || name, |
|
|
|
xbsjPosition: options.xbsjPosition || [0,0,0], |
|
|
|
xbsjRotation: options.xbsjRotation || [0,0,0], |
|
|
|
xbsjScale: options.xbsjScale || [1,1,1], |
|
|
|
xbsjPosition: options.xbsjPosition || [0, 0, 0], |
|
|
|
xbsjRotation: options.xbsjRotation || [0, 0, 0], |
|
|
|
xbsjScale: options.xbsjScale || [1, 1, 1], |
|
|
|
distanceDisplayCondition: options.distanceDisplayCondition, |
|
|
|
luminanceAtZenith: options.luminanceAtZenith, |
|
|
|
maximumScale: options.maximumScale, |
|
|
|
color: options.color || [1,1,1], |
|
|
|
color: options.color || [1, 1, 1], |
|
|
|
show: options.show || true, |
|
|
|
}; |
|
|
|
tileset.xbsjFromJSON(objConfig); |
|
|
@ -611,24 +657,23 @@ export const addModel = ( |
|
|
|
// tileset.onmouseover = () => {
|
|
|
|
// window.$earth.czm.viewer._container.style.cursor = "pointer";
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
// tileset.onmouseout = () => {
|
|
|
|
// window.$earth.czm.viewer._container.style.cursor = "default";
|
|
|
|
// };
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
return tileset |
|
|
|
} |
|
|
|
|
|
|
|
return tileset; |
|
|
|
}; |
|
|
|
|
|
|
|
// 创建管控区域
|
|
|
|
export const addKeyControlArea = (name: string, image: string, height: number, positions: number[][], loop: boolean): any => { |
|
|
|
if (!name) { |
|
|
|
name = 'defaultKeyControlAreaName' |
|
|
|
name = 'defaultKeyControlAreaName'; |
|
|
|
} |
|
|
|
// 位置信息格式转换
|
|
|
|
const positionList: number[] = [] |
|
|
|
const positionList: number[] = []; |
|
|
|
positions.map((item: number[]) => { |
|
|
|
positionList.push(earthUtils.radianToDegree(item[0])); |
|
|
|
positionList.push(earthUtils.radianToDegree(item[1])); |
|
|
@ -644,8 +689,8 @@ export const addKeyControlArea = (name: string, image: string, height: number, p |
|
|
|
const guid = window.Cesium.createGuid(); |
|
|
|
const material = d3Kit.getCustomMaterialWall({ |
|
|
|
image: image, |
|
|
|
freely: "vertical", |
|
|
|
direction: "+", |
|
|
|
freely: 'vertical', |
|
|
|
direction: '+', |
|
|
|
count: 1, |
|
|
|
color: new window.Cesium.Color(0, 0, 0, 0), |
|
|
|
duration: 1000, |
|
|
@ -657,9 +702,9 @@ export const addKeyControlArea = (name: string, image: string, height: number, p |
|
|
|
positions: window.Cesium.Cartesian3.fromDegreesArrayHeights(positionList), |
|
|
|
material: material, |
|
|
|
}, |
|
|
|
} |
|
|
|
return window.$earth.czm.viewer.entities.add(entitiesOptions) |
|
|
|
} |
|
|
|
}; |
|
|
|
return window.$earth.czm.viewer.entities.add(entitiesOptions); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* 新建 Pin |
|
|
@ -674,49 +719,46 @@ export const addKeyControlArea = (name: string, image: string, height: number, p |
|
|
|
export const addPin = (name, url, options) => { |
|
|
|
const pin = new window.XE.Obj.Pin(window.$earth); |
|
|
|
let objConfig: any = { |
|
|
|
xbsjType: 'Pin', |
|
|
|
name: name, |
|
|
|
imageUrl: url, |
|
|
|
position: options.position, |
|
|
|
pinBuilder: options.pinBuilder, |
|
|
|
scale: options.scale, |
|
|
|
} |
|
|
|
if(options.far){ |
|
|
|
objConfig.far = options.far |
|
|
|
xbsjType: 'Pin', |
|
|
|
name: name, |
|
|
|
imageUrl: url, |
|
|
|
position: options.position, |
|
|
|
pinBuilder: options.pinBuilder, |
|
|
|
scale: options.scale, |
|
|
|
}; |
|
|
|
if (options.far) { |
|
|
|
objConfig.far = options.far; |
|
|
|
} |
|
|
|
pin.xbsjFromJSON(objConfig); |
|
|
|
|
|
|
|
return pin; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
//雷达扫描范围
|
|
|
|
export const addViewShedRadar = (pos, far = 60,left=-30,right=30,rgba=[0, 1, 0, 0.5]) => { |
|
|
|
export const addViewShedRadar = (pos, far = 60, left = -30, right = 30, rgba = [0, 1, 0, 0.5]) => { |
|
|
|
// olon,olat,分别是圆心的经纬度,radius是半径,angle是角度,从正北方向顺时针开始。
|
|
|
|
let olon: any = window.Cesium.Math.toDegrees(pos[0]); |
|
|
|
let olat: any = window.Cesium.Math.toDegrees(pos[1]); |
|
|
|
let fromDegreesArray: any = []; |
|
|
|
//角度切换
|
|
|
|
for (let i = left; i < right;) { |
|
|
|
i += 0.01; |
|
|
|
let clon = far * Math.sin(i * Math.PI / 180); |
|
|
|
let clat = far * Math.cos(i * Math.PI / 180); |
|
|
|
let ec = 6356725 + (6378137 - 6356725) * (90 - olat) / 90; |
|
|
|
let ed = ec * Math.cos(olat * Math.PI / 180); |
|
|
|
let jlon = (clon / ed + olon * Math.PI / 180) * 180 / Math.PI; |
|
|
|
let jlat = (clat / ec + olat * Math.PI / 180) * 180 / Math.PI; |
|
|
|
fromDegreesArray.push(jlon, jlat); |
|
|
|
|
|
|
|
for (let i = left; i < right; ) { |
|
|
|
i += 0.01; |
|
|
|
let clon = far * Math.sin((i * Math.PI) / 180); |
|
|
|
let clat = far * Math.cos((i * Math.PI) / 180); |
|
|
|
let ec = 6356725 + ((6378137 - 6356725) * (90 - olat)) / 90; |
|
|
|
let ed = ec * Math.cos((olat * Math.PI) / 180); |
|
|
|
let jlon = ((clon / ed + (olon * Math.PI) / 180) * 180) / Math.PI; |
|
|
|
let jlat = ((clat / ec + (olat * Math.PI) / 180) * 180) / Math.PI; |
|
|
|
fromDegreesArray.push(jlon, jlat); |
|
|
|
} |
|
|
|
fromDegreesArray.push(olon, olat); |
|
|
|
return window.$earth._viewer.entities.add({ |
|
|
|
name: "雷达扫描范围", |
|
|
|
polygon: { |
|
|
|
hierarchy: window.Cesium.Cartesian3.fromDegreesArray( |
|
|
|
fromDegreesArray |
|
|
|
), |
|
|
|
//颜色透明度
|
|
|
|
material: new window.Cesium.Color(rgba[0], rgba[1], rgba[2], rgba[3]), |
|
|
|
zIndex:11111 |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
name: '雷达扫描范围', |
|
|
|
polygon: { |
|
|
|
hierarchy: window.Cesium.Cartesian3.fromDegreesArray(fromDegreesArray), |
|
|
|
//颜色透明度
|
|
|
|
material: new window.Cesium.Color(rgba[0], rgba[1], rgba[2], rgba[3]), |
|
|
|
zIndex: 11111, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}; |
|
|
|