880 lines
34 KiB
Vue
880 lines
34 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div id="over-viewer"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
class PolylineTrailMaterial {
|
|||
|
|
constructor(option = {}) {
|
|||
|
|
this._definitionChanged = new Cesium.Event()
|
|||
|
|
this._color = undefined
|
|||
|
|
this._colorSubscription = undefined
|
|||
|
|
this._time = (new Date()).getTime()
|
|||
|
|
|
|||
|
|
this.color = option.color ? option.color : Cesium.Color.fromCssColorString('rgba(90,90,255, 1)');
|
|||
|
|
|
|||
|
|
this.duration = option.duration ? option.duration : 5000
|
|||
|
|
// this.img = option.img ? option.img :'/images/colors2.png'
|
|||
|
|
this.img = this.createMaterialImage()
|
|||
|
|
// 类型（会自动加载到cesium中）
|
|||
|
|
this.type = option.type ? option.type : 'PolylineTrail'
|
|||
|
|
|
|||
|
|
// 着色器
|
|||
|
|
this.source = option.source ? option.source : 'czm_material czm_getMaterial(czm_materialInput materialInput)' +
|
|||
|
|
'{' +
|
|||
|
|
'czm_material material = czm_getDefaultMaterial(materialInput);' +
|
|||
|
|
'vec2 st = materialInput.st;' +
|
|||
|
|
'vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));' +
|
|||
|
|
'material.alpha = colorImage.a * color.a;' +
|
|||
|
|
'material.diffuse = (colorImage.rgb+color.rgb)/2.0;' +
|
|||
|
|
'return material;' +
|
|||
|
|
'}'
|
|||
|
|
|
|||
|
|
this.addMaterial()
|
|||
|
|
}
|
|||
|
|
createMaterialImage(){
|
|||
|
|
var c = document.createElement("canvas");
|
|||
|
|
c.width = 512;
|
|||
|
|
c.height = 32;
|
|||
|
|
var ctx = c.getContext("2d");
|
|||
|
|
var colorstr = this.color.toCssColorString().replace("rgb(","").replace(")","");
|
|||
|
|
var my_gradient = ctx.createLinearGradient(0, 0, c.width, 0);
|
|||
|
|
my_gradient.addColorStop(0, "rgba("+colorstr+", 1)");
|
|||
|
|
my_gradient.addColorStop(1, "rgba("+colorstr+", 0)");
|
|||
|
|
ctx.fillStyle = my_gradient;
|
|||
|
|
ctx.fillRect(0, 0, c.width, c.height);
|
|||
|
|
return c.toDataURL('image/png');
|
|||
|
|
}
|
|||
|
|
getType() {
|
|||
|
|
return 'PolylineTrail'
|
|||
|
|
}
|
|||
|
|
getValue(time, result) {
|
|||
|
|
if (!Cesium.defined(result)) {
|
|||
|
|
result = {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color)
|
|||
|
|
result.image = this.img
|
|||
|
|
result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration
|
|||
|
|
|
|||
|
|
return result
|
|||
|
|
}
|
|||
|
|
equals(other) {
|
|||
|
|
return this === other || (other instanceof PolylineTrailMaterial && Cesium.Property.equals(this._color, other._color))
|
|||
|
|
}
|
|||
|
|
addMaterial() {
|
|||
|
|
Cesium.Material._materialCache.addMaterial(this.type, {
|
|||
|
|
fabric: {
|
|||
|
|
type: this.type,
|
|||
|
|
uniforms: {
|
|||
|
|
color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
|
|||
|
|
image: this.img,
|
|||
|
|
time: 100
|
|||
|
|
},
|
|||
|
|
source: this.source
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
translucent: (material) => {
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 注意Cesium.defineProperties会报错，需要改为Object
|
|||
|
|
Object.defineProperties(PolylineTrailMaterial.prototype, {
|
|||
|
|
isConstant: {
|
|||
|
|
get: () => {
|
|||
|
|
return false
|
|||
|
|
},
|
|||
|
|
configurable: true
|
|||
|
|
},
|
|||
|
|
definitionChanged: {
|
|||
|
|
get: () => {
|
|||
|
|
return this._definitionChanged
|
|||
|
|
},
|
|||
|
|
configurable: true
|
|||
|
|
},
|
|||
|
|
color: {
|
|||
|
|
value: Cesium.createPropertyDescriptor('color'),
|
|||
|
|
configurable: true,
|
|||
|
|
writable: true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
class Bubble {
|
|||
|
|
constructor(val) {
|
|||
|
|
this.viewer = val.viewer;
|
|||
|
|
this.div = document.createElement("div");
|
|||
|
|
}
|
|||
|
|
addDynamicLabel(data,cartesian3) {
|
|||
|
|
let div = this.div;
|
|||
|
|
div.id = data.id;
|
|||
|
|
// div.style.display="inline"
|
|||
|
|
div.style.position = "absolute";
|
|||
|
|
div.style.minWidth = "380px";
|
|||
|
|
div.style.height = "auto";
|
|||
|
|
let keys = Object.keys(data);
|
|||
|
|
// 构建属性面板
|
|||
|
|
let HTMLTable = `
|
|||
|
|
<div class="bubble-box">
|
|||
|
|
|
|||
|
|
<div class="box-wrap" id="bubbleContent">
|
|||
|
|
<div class="pine"></div>
|
|||
|
|
<div class="bubble-close" id="popupClose">x</div>
|
|||
|
|
<div class="area">
|
|||
|
|
<div class="area-title fontColor">${ data['name']?data['name']:data['名称'] }</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content" >
|
|||
|
|
${keys.map(item=>{
|
|||
|
|
return `<div class="data-li">
|
|||
|
|
<div class="data-label textColor">${item}：</div>
|
|||
|
|
<div class="data-value">
|
|||
|
|
<span class="label-num yellowColor">${data[item]}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>`
|
|||
|
|
}).join('')}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- <img src="./layer_border.png" alt="Norway"> -->
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
div.innerHTML = HTMLTable;
|
|||
|
|
this.viewer.cesiumWidget.container.appendChild(div);
|
|||
|
|
document
|
|||
|
|
.getElementById("popupClose")
|
|||
|
|
.addEventListener("click", () => {
|
|||
|
|
this.clearDiv();
|
|||
|
|
});
|
|||
|
|
let gisPosition = cartesian3;
|
|||
|
|
this.handler = this.viewer.scene.postRender.addEventListener(() => {
|
|||
|
|
const canvasHeight = this.viewer.scene.canvas.height;
|
|||
|
|
const windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
|||
|
|
this.viewer.scene,
|
|||
|
|
gisPosition
|
|||
|
|
);
|
|||
|
|
let content = document.getElementById("bubbleContent");
|
|||
|
|
let height = content?content.clientHeight:220;
|
|||
|
|
div.style.bottom = canvasHeight - windowPosition.y + height + Math.sin(Math.PI/180*45)*60+ "px";
|
|||
|
|
const elWidth = div.offsetWidth;
|
|||
|
|
div.style.left = windowPosition.x - elWidth / 2 + 190 + "px";
|
|||
|
|
}, this);
|
|||
|
|
}
|
|||
|
|
clearDiv() {
|
|||
|
|
if (this.div && this.div.parentElement) {
|
|||
|
|
var parent = this.div.parentElement;
|
|||
|
|
parent.removeChild(this.div);
|
|||
|
|
this.handler&&this.handler();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const viewUtil = {
|
|||
|
|
/**
|
|||
|
|
* 添加发光墙体
|
|||
|
|
* @param {*} source
|
|||
|
|
* @param {*} feature
|
|||
|
|
* @param {*} minimumHeight
|
|||
|
|
* @param {*} maximumHeight
|
|||
|
|
*/
|
|||
|
|
addWallByFeature(source,feature,colorStr,minimumHeight,maximumHeight){
|
|||
|
|
let coords = feature.geometry.coordinates[0][0];
|
|||
|
|
minimumHeight = minimumHeight?Number(minimumHeight):100,
|
|||
|
|
maximumHeight = maximumHeight?Number(maximumHeight):5000
|
|||
|
|
colorStr = colorStr?colorStr:"rgb(255,255,0)"
|
|||
|
|
source.entities.add({
|
|||
|
|
// name: "发光动态墙体",
|
|||
|
|
wall: {
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArray(coords.flat(2)),
|
|||
|
|
material: new WallDiffuseMaterialProperty({
|
|||
|
|
color: Cesium.Color.fromCssColorString(colorStr).withAlpha(0.7),
|
|||
|
|
duration: 3000,
|
|||
|
|
}),
|
|||
|
|
minimumHeights: Array(coords.length).fill(minimumHeight),
|
|||
|
|
maximumHeights: Array(coords.length).fill(maximumHeight),
|
|||
|
|
outline: false,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 创建轮廓线，使用Entity实现
|
|||
|
|
* @param {*} source 数据源
|
|||
|
|
* @param {*} geometry 要素的几何对象
|
|||
|
|
* @param {*} colorStr 填充颜色
|
|||
|
|
* @param {*} outlineColorStr 轮廓线颜色
|
|||
|
|
* @param {*} outlineWidth 轮廓线宽度
|
|||
|
|
* @param {*} isFill 是否填充
|
|||
|
|
*/
|
|||
|
|
createOutlinePolygon(source,feature,colorStr,outlineColorStr,outlineWidth,isFill=true){
|
|||
|
|
let geometryType = feature.geometry.type;
|
|||
|
|
let coords = feature.geometry.coordinates;
|
|||
|
|
let attr = feature.properties;
|
|||
|
|
// console.log(attr.name)
|
|||
|
|
if(geometryType == "MultiPolygon"){
|
|||
|
|
coords.forEach((polygon,i)=>{
|
|||
|
|
let polygonHierarchy = null;
|
|||
|
|
if(polygon.length>1){
|
|||
|
|
let holesArr = [],rings = polygon.slice(1,polygon.length);
|
|||
|
|
rings.forEach(cd=>{
|
|||
|
|
holesArr.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(cd.flat(2))))
|
|||
|
|
})
|
|||
|
|
polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),holesArr)
|
|||
|
|
}else{
|
|||
|
|
polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
|
|||
|
|
}
|
|||
|
|
console.log(attr.name)
|
|||
|
|
let entity = source.entities.add({
|
|||
|
|
id:JSON.stringify({...attr,index:i}),//多环的时候单纯用attr会ID重复，所以使用环的索引加以区分。
|
|||
|
|
polygon: {
|
|||
|
|
hierarchy: polygonHierarchy,
|
|||
|
|
material: Cesium.Color.fromCssColorString(colorStr?colorStr:"red"),
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
entity.polygon.fill = isFill;
|
|||
|
|
entity.polygon.outlineWidth = outlineWidth;
|
|||
|
|
entity.polygon.outline = false;
|
|||
|
|
entity.polygon.outlineColor = Cesium.Color.RED;
|
|||
|
|
entity.polyline = {
|
|||
|
|
positions: entity.polygon.hierarchy._value.positions,
|
|||
|
|
width: entity.polygon.outlineWidth,
|
|||
|
|
material: Cesium.Color.fromCssColorString(outlineColorStr?outlineColorStr:"red"),
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 添加面要素
|
|||
|
|
* @param {*} source 数据源
|
|||
|
|
* @param {*} feature 要素
|
|||
|
|
* @param {*} colorStr 填充颜色
|
|||
|
|
*/
|
|||
|
|
addPolygonEntityByFeature(source,feature,colorStr){
|
|||
|
|
let geometryType = feature.geometry.type;
|
|||
|
|
let coord = feature.geometry.coordinates;
|
|||
|
|
if(geometryType == "MultiPolygon"){
|
|||
|
|
// let polygon = coord[0];
|
|||
|
|
// let outBoundary = new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
|
|||
|
|
// source.add(new Cesium.Primitive({
|
|||
|
|
// geometryInstances : new Cesium.GeometryInstance({
|
|||
|
|
// geometry: new Cesium.PolygonGeometry({
|
|||
|
|
// polygonHierarchy : outBoundary
|
|||
|
|
|
|||
|
|
// }),
|
|||
|
|
// id:id
|
|||
|
|
// }),
|
|||
|
|
// appearance : new Cesium.EllipsoidSurfaceAppearance({
|
|||
|
|
// material: new Cesium.Material({
|
|||
|
|
// fabric : {
|
|||
|
|
// type : 'Color',
|
|||
|
|
// uniforms : {
|
|||
|
|
// color : Cesium.Color.fromCssColorString(colorStr?colorStr:"red")
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// }),
|
|||
|
|
// faceForward : true
|
|||
|
|
// })
|
|||
|
|
// }));
|
|||
|
|
coord.forEach(polygon=>{
|
|||
|
|
let polygonHierarchy = null;
|
|||
|
|
if(polygon.length>1){
|
|||
|
|
let holesArr = [],rings = polygon.slice(1,polygon.length);
|
|||
|
|
rings.forEach(cd=>{
|
|||
|
|
holesArr.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(cd.flat(2))))
|
|||
|
|
})
|
|||
|
|
polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),holesArr)
|
|||
|
|
}else{
|
|||
|
|
polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
source.entities.add({
|
|||
|
|
polygon: {
|
|||
|
|
hierarchy: polygonHierarchy,
|
|||
|
|
material: Cesium.Color.fromCssColorString(colorStr?colorStr:"red"),
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
addPolygonPrimitiveByFeature(primitiveCollection,feature,colorStr){
|
|||
|
|
let geometryType = feature.geometry.type;
|
|||
|
|
let coord = feature.geometry.coordinates;
|
|||
|
|
if(geometryType == "MultiPolygon"){
|
|||
|
|
coord.forEach(polygon=>{
|
|||
|
|
let polygonHierarchy = null;
|
|||
|
|
if(polygon.length>1){
|
|||
|
|
let holesArr = [],rings = polygon.slice(1,polygon.length);
|
|||
|
|
rings.forEach(cd=>{
|
|||
|
|
holesArr.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(cd.flat(2))))
|
|||
|
|
})
|
|||
|
|
polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),holesArr)
|
|||
|
|
}else{
|
|||
|
|
polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
|
|||
|
|
}
|
|||
|
|
primitiveCollection.add(new Cesium.Primitive({
|
|||
|
|
geometryInstances : new Cesium.GeometryInstance({
|
|||
|
|
geometry: new Cesium.PolygonGeometry({
|
|||
|
|
polygonHierarchy : polygonHierarchy
|
|||
|
|
|
|||
|
|
}),
|
|||
|
|
id:JSON.stringify(feature.properties)
|
|||
|
|
}),
|
|||
|
|
appearance : new Cesium.EllipsoidSurfaceAppearance({
|
|||
|
|
material: new Cesium.Material({
|
|||
|
|
fabric : {
|
|||
|
|
type : 'Color',
|
|||
|
|
uniforms : {
|
|||
|
|
color : Cesium.Color.fromCssColorString(colorStr?colorStr:"red")
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}),
|
|||
|
|
faceForward : true
|
|||
|
|
})
|
|||
|
|
}));
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
addGeoVisImagerLayer(viewer,type){
|
|||
|
|
switch(type){
|
|||
|
|
case "yingxiang":{
|
|||
|
|
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
|
|||
|
|
url: "https://tiles{s}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token="+geovisearthConfig.token,
|
|||
|
|
subdomains:'123',
|
|||
|
|
tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
|||
|
|
minimumLevel: 4,
|
|||
|
|
maximumLevel: 18,
|
|||
|
|
}))
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "shiliang":{
|
|||
|
|
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
|
|||
|
|
url: "https://tiles{s}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=png&tmsIds=w&token="+geovisearthConfig.token,
|
|||
|
|
subdomains:'123',
|
|||
|
|
tilingScheme: new Cesium.WebMercatorTilingScheme(),
|
|||
|
|
minimumLevel: 4,
|
|||
|
|
maximumLevel: 18,
|
|||
|
|
}))
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
addWaterFeature(primitiveCollection,feature) {
|
|||
|
|
let geometryType = feature.geometry.type;
|
|||
|
|
let coord = feature.geometry.coordinates;
|
|||
|
|
let attr = feature.properties;
|
|||
|
|
|
|||
|
|
if (geometryType == "MultiPolygon") {
|
|||
|
|
coord.forEach((polygon) => {
|
|||
|
|
let polygonHierarchy = null;
|
|||
|
|
if(polygon.length>1){
|
|||
|
|
let holesArr = [],rings = polygon.slice(1,polygon.length);
|
|||
|
|
rings.forEach(cd=>{
|
|||
|
|
holesArr.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(cd.flat(2))))
|
|||
|
|
})
|
|||
|
|
polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),holesArr)
|
|||
|
|
}else{
|
|||
|
|
polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
|
|||
|
|
}
|
|||
|
|
primitiveCollection.add(
|
|||
|
|
new Cesium.GroundPrimitive({
|
|||
|
|
geometryInstances: new Cesium.GeometryInstance({
|
|||
|
|
geometry: new Cesium.PolygonGeometry({
|
|||
|
|
polygonHierarchy: polygonHierarchy,
|
|||
|
|
}),
|
|||
|
|
attributes: {
|
|||
|
|
// 通过attributes属性统一指定线段颜色
|
|||
|
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
|||
|
|
new Cesium.Color(1.0, 0, 0, 1.0)
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
id: attr,
|
|||
|
|
}),
|
|||
|
|
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
|||
|
|
material: new Cesium.Material({
|
|||
|
|
fabric: {
|
|||
|
|
type: "Water",
|
|||
|
|
uniforms: {
|
|||
|
|
// 水的基本颜色
|
|||
|
|
baseWaterColor: new Cesium.Color(
|
|||
|
|
64 / 255.0,
|
|||
|
|
157 / 255.0,
|
|||
|
|
253 / 255.0,
|
|||
|
|
0.5
|
|||
|
|
),
|
|||
|
|
// 水法向摄动的法线图
|
|||
|
|
normalMap:
|
|||
|
|
"./Build/Cesium/Assets/Textures/waterNormals.jpg",
|
|||
|
|
// 波纹数量
|
|||
|
|
frequency: 1000.0,
|
|||
|
|
// 动画速度
|
|||
|
|
animationSpeed: 0.002,
|
|||
|
|
// 振动的幅度
|
|||
|
|
amplitude: 150,
|
|||
|
|
// 镜面反射的强度
|
|||
|
|
specularIntensity: 1,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
faceForward: true,
|
|||
|
|
}),
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
addWaterFeature1(primitiveCollection,feature) {
|
|||
|
|
let geometryType = feature.geometry.type;
|
|||
|
|
let coord = feature.geometry.coordinates;
|
|||
|
|
let attr = feature.properties;
|
|||
|
|
|
|||
|
|
if (geometryType == "MultiPolygon") {
|
|||
|
|
coord.forEach((polygon) => {
|
|||
|
|
let polygonHierarchy = null;
|
|||
|
|
if(polygon.length>1){
|
|||
|
|
let holesArr = [],rings = polygon.slice(1,polygon.length);
|
|||
|
|
rings.forEach(cd=>{
|
|||
|
|
holesArr.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(cd.flat(2))))
|
|||
|
|
})
|
|||
|
|
polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),holesArr)
|
|||
|
|
}else{
|
|||
|
|
polygonHierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)))
|
|||
|
|
}
|
|||
|
|
primitiveCollection.add(
|
|||
|
|
new Cesium.Primitive({
|
|||
|
|
geometryInstances: new Cesium.GeometryInstance({
|
|||
|
|
geometry: new Cesium.PolygonGeometry({
|
|||
|
|
polygonHierarchy: polygonHierarchy,
|
|||
|
|
}),
|
|||
|
|
attributes: {
|
|||
|
|
// 通过attributes属性统一指定线段颜色
|
|||
|
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
|||
|
|
new Cesium.Color(1.0, 0, 0, 1.0)
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
id: attr,
|
|||
|
|
}),
|
|||
|
|
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
|||
|
|
material: new Cesium.Material({
|
|||
|
|
fabric: {
|
|||
|
|
type: "Water",
|
|||
|
|
uniforms: {
|
|||
|
|
// 水的基本颜色
|
|||
|
|
baseWaterColor: new Cesium.Color(
|
|||
|
|
64 / 255.0,
|
|||
|
|
157 / 255.0,
|
|||
|
|
253 / 255.0,
|
|||
|
|
0.5
|
|||
|
|
),
|
|||
|
|
// 水法向摄动的法线图
|
|||
|
|
normalMap:
|
|||
|
|
"/cesium/Assets/Textures/waterNormals.jpg",
|
|||
|
|
// 波纹数量
|
|||
|
|
frequency: 1000.0,
|
|||
|
|
// 动画速度
|
|||
|
|
animationSpeed: 0.002,
|
|||
|
|
// 振动的幅度
|
|||
|
|
amplitude: 150,
|
|||
|
|
// 镜面反射的强度
|
|||
|
|
specularIntensity: 1,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
faceForward: true,
|
|||
|
|
}),
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
addEffect(type,result,color,visible){
|
|||
|
|
switch(type){
|
|||
|
|
case "polygon":{
|
|||
|
|
const primitives = new Cesium.PrimitiveCollection({ show:!!visible });
|
|||
|
|
result.features.forEach((feature) => {
|
|||
|
|
primitives.add(this.createPrimitiveByFeature1(feature, color));
|
|||
|
|
});
|
|||
|
|
viewer.scene.primitives.add(primitives);// 添加面
|
|||
|
|
return primitives;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "label":{
|
|||
|
|
const labelCollection = new Cesium.LabelCollection({ show:!!visible });
|
|||
|
|
result.features.forEach((feature) => {
|
|||
|
|
labelCollection.add(this.addLabel(feature));
|
|||
|
|
});
|
|||
|
|
viewer.scene.primitives.add(labelCollection); // 添加 label
|
|||
|
|
return labelCollection;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "water":{
|
|||
|
|
const waterPrimitives = new Cesium.PrimitiveCollection({ show:!!visible});
|
|||
|
|
result.features.forEach((feature) => {
|
|||
|
|
this.addWaterFeature(waterPrimitives,feature);
|
|||
|
|
});
|
|||
|
|
viewer.scene.primitives.add(waterPrimitives); // 添加 水面特效
|
|||
|
|
return waterPrimitives;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "glow":{
|
|||
|
|
let tmpDataSource = new Cesium.CustomDataSource();
|
|||
|
|
viewer.dataSources.add(tmpDataSource);
|
|||
|
|
result.features.forEach((feature) => {
|
|||
|
|
tmpDataSource.entities.add(this.addGlowFeature(feature,!!visible,color))
|
|||
|
|
})
|
|||
|
|
tmpDataSource.show = !!visible;
|
|||
|
|
return tmpDataSource;
|
|||
|
|
}
|
|||
|
|
case "dynamicLine":{
|
|||
|
|
let dyDataSource = new Cesium.CustomDataSource();
|
|||
|
|
viewer.dataSources.add(dyDataSource);
|
|||
|
|
result.features.forEach((feature) => {
|
|||
|
|
dyDataSource.entities.add(this.addDynamicLine(feature,!!visible,color))
|
|||
|
|
})
|
|||
|
|
dyDataSource.show = !!visible;
|
|||
|
|
return dyDataSource;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
createPrimitiveByFeature1(feature, rgba) {
|
|||
|
|
let coords = feature.geometry.coordinates;
|
|||
|
|
let color = rgba?rgba:"#c7d221";
|
|||
|
|
let ground = new Cesium.GroundPrimitive({
|
|||
|
|
geometryInstances: new Cesium.GeometryInstance({
|
|||
|
|
geometry: new Cesium.PolygonGeometry({
|
|||
|
|
polygonHierarchy: coords[0][0][0].length==3?new Cesium.PolygonHierarchy(
|
|||
|
|
Cesium.Cartesian3.fromDegreesArrayHeights(coords.flat(3))
|
|||
|
|
):new Cesium.PolygonHierarchy(
|
|||
|
|
Cesium.Cartesian3.fromDegreesArray(coords.flat(3))
|
|||
|
|
),
|
|||
|
|
}),
|
|||
|
|
id: feature.properties,
|
|||
|
|
attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString(color)) },
|
|||
|
|
}),
|
|||
|
|
appearance : new Cesium.PerInstanceColorAppearance({
|
|||
|
|
translucent : false
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
return ground;
|
|||
|
|
},
|
|||
|
|
addLabel(feature){
|
|||
|
|
// 计算中心点
|
|||
|
|
let polygon = feature.geometry.coordinates[0];
|
|||
|
|
let points = [];
|
|||
|
|
polygon.forEach(ring=>{
|
|||
|
|
ring.forEach(coord=>{
|
|||
|
|
points.push([coord[0],coord[1]]);
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
let pointss = turf.points(points);
|
|||
|
|
let centerResult = turf.center(pointss);
|
|||
|
|
let center = centerResult.geometry.coordinates
|
|||
|
|
return {
|
|||
|
|
position: Cesium.Cartesian3.fromDegrees(center[0],center[1],18),
|
|||
|
|
text: feature.properties["名称"]?feature.properties["名称"]:feature.properties["zldwmc"],
|
|||
|
|
font: "24px Helvetica",
|
|||
|
|
horizontalOrigin:Cesium.HorizontalOrigin.CENTER,// 水平对齐方式
|
|||
|
|
verticalOrigin:Cesium.HorizontalOrigin.CENTER,// 垂直对齐方式
|
|||
|
|
fillColor: Cesium.Color.WHITE,
|
|||
|
|
outlineColor: Cesium.Color.BLACK,
|
|||
|
|
outlineWidth: 1,
|
|||
|
|
showBackground:false,
|
|||
|
|
selectionIndicator:false,
|
|||
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|||
|
|
scale:0.8,
|
|||
|
|
disableDepthTestDistance: 100.0,
|
|||
|
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 30000.0),//根据到相机的距离确定可见性。
|
|||
|
|
scaleByDistance: new Cesium.NearFarScalar(500, 1, 30000, 0.0),
|
|||
|
|
// translucencyByDistance: new Cesium.NearFarScalar(500, 1, 1400, 0.0)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
addGlowFeature(feature,show,colorStr){
|
|||
|
|
let geometryType = feature.geometry.type;
|
|||
|
|
let coord = feature.geometry.coordinates;
|
|||
|
|
if(geometryType == "MultiPolygon"){
|
|||
|
|
let polygon = coord[0];
|
|||
|
|
return {
|
|||
|
|
name: "具有发光效果的线",
|
|||
|
|
polyline: {
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArray(polygon[0].flat(2)),// 只取外环，构造边界线
|
|||
|
|
width: 4,
|
|||
|
|
material: new Cesium.PolylineGlowMaterialProperty({
|
|||
|
|
glowPower: 0.2,
|
|||
|
|
color:Cesium.Color.fromCssColorString(colorStr?colorStr:"#242dc2"),
|
|||
|
|
}),
|
|||
|
|
followSurface: false, //是否贴着地表
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 返回线 PolylineGraphics
|
|||
|
|
* @param {*} feature 线要素
|
|||
|
|
* @param {*} color
|
|||
|
|
* @param {*} width
|
|||
|
|
* @returns
|
|||
|
|
*/
|
|||
|
|
addDynamicLine(feature,color,width=1){
|
|||
|
|
if(feature.geometry.type == "MultiLineString"){
|
|||
|
|
let coords = feature.geometry.coordinates[0];
|
|||
|
|
let name = feature.properties.name;
|
|||
|
|
let colorStr = color?color:"#FF0";
|
|||
|
|
if(name!=null&&name.includes("高速")){
|
|||
|
|
color = Cesium.Color.WHITE ;
|
|||
|
|
width = 3;
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
id:JSON.stringify(feature.properties),
|
|||
|
|
polyline: {
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArray(coords.flat(2)),
|
|||
|
|
width: width,
|
|||
|
|
material: new PolylineTrailMaterial({
|
|||
|
|
color: Cesium.Color.fromCssColorString(colorStr),
|
|||
|
|
duration:5000
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
loadTileset(viewer,tilesetUrl,deep=-45) {
|
|||
|
|
let vm = this;
|
|||
|
|
let tileset = new Cesium.Cesium3DTileset({
|
|||
|
|
url: tilesetUrl,
|
|||
|
|
maximumScreenSpaceError:8,
|
|||
|
|
dynamicScreenSpaceError: true,
|
|||
|
|
dynamicScreenSpaceErrorDensity: 0.00278,
|
|||
|
|
dynamicScreenSpaceErrorFactor: 4.0,
|
|||
|
|
dynamicScreenSpaceErrorHeightFalloff: 0.25,
|
|||
|
|
});
|
|||
|
|
viewer.scene.primitives.add(tileset);
|
|||
|
|
tileset.readyPromise.then(function (tileset_) {
|
|||
|
|
vm.setTilesetHeightAndOffset(tileset_, deep);
|
|||
|
|
});
|
|||
|
|
return tileset;
|
|||
|
|
},
|
|||
|
|
setTilesetHeightAndOffset(tileset, height, x, y) {
|
|||
|
|
x = x ? x : 0;
|
|||
|
|
y = y ? y : 0;
|
|||
|
|
let center;
|
|||
|
|
if (tileset.boundingSphere) {
|
|||
|
|
// 3dtiles
|
|||
|
|
center = tileset.boundingSphere.center;
|
|||
|
|
} else if (
|
|||
|
|
tileset._boundingSpheres &&
|
|||
|
|
tileset._boundingSpheres.length > 0
|
|||
|
|
) {
|
|||
|
|
// Primitive
|
|||
|
|
center = tileset._boundingSpheres[0].center;
|
|||
|
|
}
|
|||
|
|
const cartographic = Cesium.Cartographic.fromCartesian(center);
|
|||
|
|
const surface = Cesium.Cartesian3.fromRadians(
|
|||
|
|
cartographic.longitude,
|
|||
|
|
cartographic.latitude,
|
|||
|
|
0.0
|
|||
|
|
);
|
|||
|
|
const offset = Cesium.Cartesian3.fromRadians(
|
|||
|
|
cartographic.longitude + x,
|
|||
|
|
cartographic.latitude + y,
|
|||
|
|
height
|
|||
|
|
);
|
|||
|
|
const translation = Cesium.Cartesian3.subtract(
|
|||
|
|
offset,
|
|||
|
|
surface,
|
|||
|
|
new Cesium.Cartesian3()
|
|||
|
|
);
|
|||
|
|
const modelMaxtrix = Cesium.Matrix4.fromTranslation(translation);
|
|||
|
|
tileset.modelMatrix = modelMaxtrix;
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
// import { cartesianToLnglat, uuid } from "./js/cUtils";
|
|||
|
|
// import viewUtil from "./js/viewUtil.js";
|
|||
|
|
// import Bubble from "./js/Bubble.js";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initCesium();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initCesium() {
|
|||
|
|
|
|||
|
|
let box = document.getElementsByClassName("content__default")[0];
|
|||
|
|
box.style.maxWidth = "100%";
|
|||
|
|
box.style.paddingTop = 0;
|
|||
|
|
let Cesium = this.$cesium;
|
|||
|
|
window.CESIUM_BASE_URL = "/cesium";
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
// 添加 Mapbox tile provider
|
|||
|
|
const mapboxAccess =
|
|||
|
|
"pk.eyJ1IjoicWl1c2hpamllIiwiYSI6ImNsMDNvdDRybDEyc2YzZG9kbWZoY2FuOW0ifQ.4FH-BUupi46Z0zQ-CEm_Ig";
|
|||
|
|
|
|||
|
|
var customMapboxIamgery = new Cesium.MapboxStyleImageryProvider({
|
|||
|
|
// url: "https://api.mapbox.com/styles/v1",
|
|||
|
|
username: "qiushijie",
|
|||
|
|
styleId: "clboooor3000714mi15y9j6ba",
|
|||
|
|
accessToken: mapboxAccess,
|
|||
|
|
scaleFactor: true,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var viewer = new Cesium.Viewer("over-viewer", {
|
|||
|
|
geocoder: false, //位置查找
|
|||
|
|
homeButton: false, //视图返回初始位置
|
|||
|
|
sceneModePicker: false, //视角选择器
|
|||
|
|
baseLayerPicker:false,//底图选择器
|
|||
|
|
navigationHelpButton: false, //导航帮助按钮
|
|||
|
|
animation: false, //动画控制器
|
|||
|
|
creditContainer: document.createElement("div"),//版权显示
|
|||
|
|
timeline: false, //时间线
|
|||
|
|
fullscreenButton: false, //全屏控件
|
|||
|
|
vrButton: false,
|
|||
|
|
infoBox: false,
|
|||
|
|
selectionIndicator: false,
|
|||
|
|
imageryProvider:customMapboxIamgery
|
|||
|
|
});
|
|||
|
|
window.Cesium = Cesium;
|
|||
|
|
window.viewer = viewer;
|
|||
|
|
window.bubble = new Bubble({
|
|||
|
|
viewer:viewer
|
|||
|
|
});
|
|||
|
|
this.initEvent();
|
|||
|
|
this.setExtent(viewer);
|
|||
|
|
this.riverPrimitives = viewer.scene.primitives.add(// 创建primitive集合，存储水系图元对象
|
|||
|
|
new Cesium.PrimitiveCollection()
|
|||
|
|
);
|
|||
|
|
this.addWaterPrimitive(this.riverPrimitives);
|
|||
|
|
|
|||
|
|
// 加载动态路网
|
|||
|
|
this.rdSource = new Cesium.CustomDataSource("dynamicRoad");// 创建自定义数据源，存放动态墙体的Entity
|
|||
|
|
viewer.dataSources.add(this.rdSource);
|
|||
|
|
let roadUrl = "/data/licheng_road.geojson"
|
|||
|
|
fetch(roadUrl).then(res=>res.json()).then(result=>{
|
|||
|
|
result.features.forEach(feature=>{
|
|||
|
|
this.rdSource.entities.add(viewUtil.addDynamicLine(feature,"#fff",1))
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
// 加载白模
|
|||
|
|
let whiteUrl = "/data/licheng/tileset.json"
|
|||
|
|
let whiteTileset = viewUtil.loadTileset(viewer,whiteUrl,0)
|
|||
|
|
},
|
|||
|
|
setExtent(viewer){
|
|||
|
|
viewer.camera.setView({
|
|||
|
|
// destination : Cesium.Cartesian3.fromDegrees(113.9044,23.3215,1000000),
|
|||
|
|
destination: new Cesium.Cartesian3(-2368517.8753985167, 5368259.496963671, 2498952.3392142765),
|
|||
|
|
orientation: {
|
|||
|
|
heading :0.21256304726696484, //Cesium.Math.toRadians(0.0), // east, default value is 0.0 (north)
|
|||
|
|
pitch :-0.3255554838380681, //Cesium.Math.toRadians(-90), // default value (looking down)
|
|||
|
|
roll : 0.0000316945339733 // default value
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
addWaterPrimitive(riverPrimitives){
|
|||
|
|
// 加水纹
|
|||
|
|
let waterUrl = "/data/licheng_water.geojson"
|
|||
|
|
fetch(waterUrl).then(res=>res.json()).then(result=>{
|
|||
|
|
result.features.forEach(feature=>{
|
|||
|
|
viewUtil.addWaterFeature1(riverPrimitives,feature);
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
initEvent(){
|
|||
|
|
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|||
|
|
let vm = this;
|
|||
|
|
handler.setInputAction(function (evt) {
|
|||
|
|
// 获取该位置的所有primitive集合
|
|||
|
|
let picks = viewer.scene.drillPick(evt.position);
|
|||
|
|
viewer.scene.render();
|
|||
|
|
let isOn3dtiles = false;
|
|||
|
|
let pickPrimitive = [];
|
|||
|
|
let pickEntity =[];
|
|||
|
|
let pickTileFeature =[];
|
|||
|
|
for (var i = 0; i < picks.length; i++) {
|
|||
|
|
if (picks[i] && picks[i] instanceof Cesium.Cesium3DTileFeature) {
|
|||
|
|
//模型上拾取
|
|||
|
|
isOn3dtiles = true;
|
|||
|
|
pickTileFeature.push(picks[i]);
|
|||
|
|
}
|
|||
|
|
if(picks[i].primitive && picks[i].primitive instanceof Cesium.GroundPrimitive){
|
|||
|
|
pickPrimitive.push(picks[i])
|
|||
|
|
}
|
|||
|
|
if(picks[i].id instanceof Cesium.Entity){
|
|||
|
|
pickEntity.push(picks[i].id)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(window.selectPrimitive){
|
|||
|
|
// viewer.scene.primitives.remove(window.selectPrimitive);
|
|||
|
|
// window.selectPrimitive=null;
|
|||
|
|
let comp = window.selectPrimitive;
|
|||
|
|
let attr = comp.primitive.getGeometryInstanceAttributes(comp.id);
|
|||
|
|
attr.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromBytes(comp.color[0],comp.color[1],comp.color[2],comp.color[3]));
|
|||
|
|
window.selectPrimitive=null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let currCartesian3 = viewer.scene.globe.pick(viewer.camera.getPickRay(evt.position),viewer.scene)
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (pickPrimitive.length>0||pickEntity.length>0) {
|
|||
|
|
// 设置选中高亮primitive
|
|||
|
|
if(pickPrimitive.length&&pickPrimitive[0].id){
|
|||
|
|
var attributes = pickPrimitive[0].primitive.getGeometryInstanceAttributes(pickPrimitive[0].id);
|
|||
|
|
window.selectPrimitive = {
|
|||
|
|
id:pickPrimitive[0].id,
|
|||
|
|
primitive:pickPrimitive[0].primitive,
|
|||
|
|
color:{...attributes.color}
|
|||
|
|
}
|
|||
|
|
attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({
|
|||
|
|
alpha: 0.5
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
//坐标转换
|
|||
|
|
// let currCartesian3 = viewer.scene.pickPosition(evt.position);
|
|||
|
|
// let pickobject = viewer.scene.pick(evt.position); //取最上面的primitive对象
|
|||
|
|
let fields = {};
|
|||
|
|
if (pickEntity.length) {
|
|||
|
|
fields = JSON.parse(pickEntity[0].id);
|
|||
|
|
}else if(pickPrimitive.length){
|
|||
|
|
fields = pickPrimitive[0].id;
|
|||
|
|
}
|
|||
|
|
window.bubble.clearDiv()
|
|||
|
|
window.bubble.addDynamicLabel(fields,currCartesian3)
|
|||
|
|
} else if(pickTileFeature.length){
|
|||
|
|
let fields = {};
|
|||
|
|
const feature = pickTileFeature[0];
|
|||
|
|
const propertyNames = feature.getPropertyNames();
|
|||
|
|
const length = propertyNames.length;
|
|||
|
|
for (let i = 0; i < length; ++i) {
|
|||
|
|
const propertyName = propertyNames[i];
|
|||
|
|
if(propertyName == "采集时间"){
|
|||
|
|
fields["测试的时间"] = feature.getProperty(propertyName);
|
|||
|
|
}else{
|
|||
|
|
fields[propertyName] = feature.getProperty(propertyName);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
window.bubble.clearDiv()
|
|||
|
|
window.bubble.addDynamicLabel(fields,currCartesian3)
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang='stylus' scoped>
|
|||
|
|
#over-viewer {
|
|||
|
|
height: 80vh;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path-container {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 75px;
|
|||
|
|
left: 70px;
|
|||
|
|
}
|
|||
|
|
</style>
|