373 lines
17 KiB
HTML
373 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Use correct character set. -->
|
||
<meta charset="utf-8" />
|
||
<!-- Tell IE to use the latest, best version. -->
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||
/>
|
||
<title>Learning Cesium!</title>
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#app,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="./js/elementui/index.css" />
|
||
<!-- import Vue before Element -->
|
||
<script src="./js/vue2710.js"></script>
|
||
<!-- import JavaScript -->
|
||
<script src="./js/elementui/index.js"></script>
|
||
|
||
<link rel="stylesheet" href="./js/moduel/Bubble.css" />
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="cesiumContainer"></div>
|
||
</div>
|
||
|
||
<script type="module">
|
||
import viewUtil from "./js/moduel/viewUtil.js";
|
||
import Bubble from "./js/moduel/Bubble.js";
|
||
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
|
||
new Vue({
|
||
el: "#app",
|
||
data: {},
|
||
methods: {
|
||
initViewer() {
|
||
// 添加 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("cesiumContainer", {
|
||
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.viewer = viewer;
|
||
var imageryLayers = viewer.scene.imageryLayers;
|
||
// //清除影像图层集合中的图层
|
||
imageryLayers.removeAll();
|
||
// var gaode = imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
|
||
// // url : "GlobalTMS/satellite/{z}/{x}/{y}.jpg",
|
||
// url:"http://localhost:8078/zengcheng/tiles/{z}/{x}/{y}.png",
|
||
// // url:"http://localhost:8078/hubei/blue/{z}/{x}/{y}.png",
|
||
// fileExtension : "png",
|
||
// }));
|
||
|
||
imageryLayers.addImageryProvider(customMapboxIamgery);
|
||
// 添加统一的气泡弹窗实例
|
||
window.bubble = new Bubble({
|
||
viewer:viewer
|
||
});
|
||
|
||
|
||
// 调整整体的亮度
|
||
// var collection = viewer.scene.postProcessStages;
|
||
// var silhouette = collection.add(
|
||
// Cesium.PostProcessStageLibrary.createBrightnessStage()
|
||
// );
|
||
// silhouette.enabled = true;
|
||
// silhouette.uniforms.brightness = 0.7;
|
||
|
||
|
||
|
||
// 加载动态路网
|
||
this.rdSource = new Cesium.CustomDataSource("dynamicRoad");// 创建自定义数据源，存放动态墙体的Entity
|
||
viewer.dataSources.add(this.rdSource);
|
||
let roadUrl = "http://127.0.0.1:8078/zengcheng/licheng_road.geojson"
|
||
fetch(roadUrl).then(res=>res.json()).then(result=>{
|
||
result.features.forEach(feature=>{
|
||
this.rdSource.entities.add(viewUtil.addDynamicLine(feature,"#fff",1))
|
||
})
|
||
|
||
console.log(result);
|
||
})
|
||
|
||
// 加载白模
|
||
let whiteUrl = "http://127.0.0.1:8078/zengcheng/3dtiles/licheng/tileset.json"
|
||
let whiteTileset = viewUtil.loadTileset(viewer,whiteUrl,0)
|
||
whiteTileset.readyPromise.then((tileset)=> {
|
||
this.move3dtilesMaxtrix(tileset);
|
||
tileset.style = new Cesium.Cesium3DTileStyle({
|
||
color: {
|
||
conditions: [['true', "color('rgba(255,255,255,0.9)')"]],
|
||
},
|
||
})
|
||
//实现渐变效果
|
||
tileset.tileVisible.addEventListener(function (tile) {
|
||
var content = tile.content;
|
||
var featuresLength = content.featuresLength;
|
||
for (let i = 0; i < featuresLength; i += 2) {
|
||
let feature = content.getFeature(i)
|
||
let model = feature.content._model
|
||
|
||
if (model && model._sourcePrograms && model._rendererResources) {
|
||
Object.keys(model._sourcePrograms).forEach(key => {
|
||
let program = model._sourcePrograms[key]
|
||
let fragmentShader = model._rendererResources.sourceShaders[program.fragmentShader];
|
||
let v_position = "";
|
||
if (fragmentShader.indexOf(" v_positionEC;") != -1) {
|
||
v_position = "v_positionEC";
|
||
} else if (fragmentShader.indexOf(" v_pos;") != -1) {
|
||
v_position = "v_pos";
|
||
}
|
||
const color = `vec4(${feature.color.toString()})`;
|
||
|
||
model._rendererResources.sourceShaders[program.fragmentShader] =
|
||
`
|
||
varying vec3 ${v_position};
|
||
void main(void){
|
||
vec4 position = czm_inverseModelView * vec4(${v_position},1); // 位置
|
||
gl_FragColor = ${color}; // 颜色
|
||
gl_FragColor *= vec4(vec3(position.z / 50.0), 1.0); // 渐变
|
||
// 动态光环
|
||
float time = fract(czm_frameNumber / 180.0);
|
||
time = abs(time - 0.5) * 2.0;
|
||
float glowRange = 260.0; // 光环的移动范围(高度)
|
||
float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
|
||
gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
|
||
}
|
||
`
|
||
})
|
||
model._shouldRegenerateShaders = true
|
||
}
|
||
}
|
||
});
|
||
// tileset.tileVisible.addEventListener(function(tile) {
|
||
// let content = tile.content;
|
||
// let featuresLength = content.featuresLength;
|
||
// let feature;
|
||
// for (var i = 0; i < featuresLength; i += 2) {
|
||
// feature = content.getFeature(i);
|
||
// let _model = feature.content._model;
|
||
// _model._shouldRegenerateShaders = true;
|
||
// // getOwnPropertyNames:返回指定对象的所有自身属性的属性名组成的数组
|
||
// // forEach：对数组里的所有元素都执行一遍
|
||
// // Object.keys：返回
|
||
// Object.getOwnPropertyNames(_model._sourcePrograms).forEach(function(j) {
|
||
// const _modelSourceP = _model._sourcePrograms[0];
|
||
// _model._rendererResources.sourceShaders[_modelSourceP.fragmentShader] =
|
||
// `
|
||
// varying vec3 v_positionEC;
|
||
// void main(void){
|
||
// vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
|
||
// float glowRange = 100.0; // 光环的移动范围(高度)
|
||
// gl_FragColor = vec4(0.0, 0.3, 0.8, 0.8); // 颜色
|
||
|
||
// // 小于20米的低楼都不再变暗
|
||
// if(position.y > 5.0) {
|
||
// gl_FragColor *= vec4(vec3(position.y / 2.0), 0.8); // 渐变
|
||
// }else {
|
||
// gl_FragColor *= vec4(vec3(position.y / 10.0), 0.8); // 渐变
|
||
// }
|
||
|
||
// // 动态光环
|
||
// float time = fract(czm_frameNumber / 360.0);
|
||
// time = abs(time - 0.5) * 3.0;
|
||
// float diff = step(0.005, abs( clamp(position.y / glowRange, 0.0, 1.0) - time));
|
||
// gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
|
||
// }
|
||
// `
|
||
// // ` varying vec3 v_positionEC;
|
||
// // void main(void){
|
||
// // vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
|
||
// // float glowRange = 100.0; // 光环的移动范围(高度)
|
||
// // gl_FragColor = vec4(0.2, 0.5, 1.0, 1.0); // 颜色
|
||
// // // 底楼 亮度太暗了，那么把20%以内的底楼，都不再变暗
|
||
// // if((position.z / 1.0) < 0.2) {
|
||
// // gl_FragColor *= vec4(vec3(position.z / 100.0 * 2.0), 1.0);
|
||
// // }else{
|
||
// // gl_FragColor *= vec4(vec3(position.z / 100.0), 1.0); // 渐变
|
||
// // }
|
||
// // // 动态光环
|
||
// // float time = fract(czm_frameNumber / 360.0);
|
||
// // time = abs(time - 0.5) * 2.0;
|
||
// // float diff = step(0.005, abs( clamp(position.y / glowRange, 0.0, 1.0) - time));
|
||
// // gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
|
||
// // }`
|
||
// })
|
||
// _model._shouldRegenerateShaders = true;
|
||
// }
|
||
// })
|
||
})
|
||
|
||
|
||
// 加水纹
|
||
this.riverPrimitives = viewer.scene.primitives.add(// 创建primitive集合，存储水系图元对象
|
||
new Cesium.PrimitiveCollection()
|
||
);
|
||
let waterUrl = "http://127.0.0.1:8078/zengcheng/licheng_water.geojson"
|
||
fetch(waterUrl).then(res=>res.json()).then(result=>{
|
||
result.features.forEach(feature=>{
|
||
viewUtil.addWaterFeature1(this.riverPrimitives,feature);
|
||
})
|
||
})
|
||
|
||
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
|
||
}
|
||
});
|
||
|
||
this.initEvent();
|
||
},
|
||
move3dtilesMaxtrix(tileset) {
|
||
// xyz 笛卡尔 lat lon 弧度 【 lat lon 经纬度 】
|
||
// 根据tileset的边界球体中心点的笛卡尔坐标得到经纬度坐标
|
||
const cartographic = Cesium.Cartographic.fromCartesian(
|
||
tileset.boundingSphere.center
|
||
)
|
||
// 根据经纬度和高度0，得到地面笛卡尔坐标
|
||
const surface = Cesium.Cartesian3.fromRadians(
|
||
cartographic.longitude,
|
||
cartographic.latitude,
|
||
0 // cartographic.height
|
||
)
|
||
// 根据经纬度和需要的高度，得到偏移后的笛卡尔坐标
|
||
const offset = Cesium.Cartesian3.fromRadians(
|
||
cartographic.longitude, // + Cesium.Math.toRadians(0.0001), 这里更改的是经纬度偏移
|
||
cartographic.latitude,
|
||
0 // 程度的高度 需要偏移 下降500米
|
||
)
|
||
// offset.x += 100 // 这里可以更改 真实 米的偏移
|
||
// const offset = Cesium.Cartesian3.fromDegrees(
|
||
// tileset.boundingSphere.center.x + 10,
|
||
// tileset.boundingSphere.center.y,
|
||
// 0.0
|
||
// )
|
||
// 计算坐标变换，得到新的笛卡尔坐标
|
||
const translation = Cesium.Cartesian3.subtract(
|
||
offset,
|
||
surface,
|
||
new Cesium.Cartesian3()
|
||
)
|
||
// 调整3dtiles位置
|
||
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
|
||
},
|
||
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);
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initViewer();
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|