290 lines
12 KiB
HTML
290 lines
12 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;
|
|||
|
|
}
|
|||
|
|
#coord-container{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 120px;
|
|||
|
|
bottom: 10px;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
</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>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
<div id="coord-container">
|
|||
|
|
<span>经度:{{lng}}</span>
|
|||
|
|
<span>纬度:{{lat}}</span>
|
|||
|
|
<span>视角高:{{alti}}km</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
new Vue({
|
|||
|
|
el: "#app",
|
|||
|
|
data: {
|
|||
|
|
lng: 0,
|
|||
|
|
lat:0,
|
|||
|
|
alti:0,
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initViewer() {
|
|||
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|||
|
|
geocoder: false, //位置查找
|
|||
|
|
homeButton: false, //视图返回初始位置
|
|||
|
|
sceneModePicker: false, //视角选择器
|
|||
|
|
// baseLayerPicker:false,//底图选择器
|
|||
|
|
navigationHelpButton: false, //导航帮助按钮
|
|||
|
|
animation: false, //动画控制器
|
|||
|
|
// creditContainer:"credit",//版权显示
|
|||
|
|
timeline: false, //时间线
|
|||
|
|
fullscreenButton: false, //全屏控件
|
|||
|
|
vrButton: false,
|
|||
|
|
infoBox: false,
|
|||
|
|
selectionIndicator: false,
|
|||
|
|
});
|
|||
|
|
window.viewer = viewer;
|
|||
|
|
this.addTiles();
|
|||
|
|
this.addShp();
|
|||
|
|
this.initEvent();
|
|||
|
|
},
|
|||
|
|
addShp(){
|
|||
|
|
let url = "./SampleData/Cesium3DTiles/dayanta.geojson";
|
|||
|
|
fetch(url).then((res) => res.json()).then((result) => {
|
|||
|
|
const primitives = new Cesium.PrimitiveCollection({ show:true });
|
|||
|
|
result.features.forEach((feature) => {
|
|||
|
|
feature.properties["type"] = "single";
|
|||
|
|
primitives.add(this.createPrimitiveByFeature1(feature, "rgba(255,255,255,0)"));
|
|||
|
|
});
|
|||
|
|
viewer.scene.primitives.add(primitives);// 添加面
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
createPrimitiveByFeature1(feature, colorStr) {
|
|||
|
|
let coords = feature.geometry.coordinates;
|
|||
|
|
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(colorStr))},
|
|||
|
|
}),
|
|||
|
|
appearance : new Cesium.PerInstanceColorAppearance({
|
|||
|
|
translucent : false
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
return ground;
|
|||
|
|
},
|
|||
|
|
createCustomShader(){
|
|||
|
|
const inverseModelLocal = new Cesium.Matrix4();
|
|||
|
|
const modelLocal = new Cesium.Matrix4();
|
|||
|
|
return new CustomShader({
|
|||
|
|
uniforms: {
|
|||
|
|
u_inverseLocalModel: {
|
|||
|
|
type: Cesium.UniformType.MAT4,
|
|||
|
|
value: inverseModelLocal
|
|||
|
|
},
|
|||
|
|
u_localModel: {
|
|||
|
|
type: Cesium.UniformType.MAT4,
|
|||
|
|
value: modelLocal
|
|||
|
|
},
|
|||
|
|
u_planeHeight: {
|
|||
|
|
type: Cesium.UniformType.FLOAT,
|
|||
|
|
value: -20
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
vertexShaderText: `
|
|||
|
|
void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
|
|||
|
|
vec4 positionWC = u_inverseLocalModel * czm_model * vec4(vsInput.attributes.positionMC, 1.0);
|
|||
|
|
if (positionWC.z > u_planeHeight) {
|
|||
|
|
positionWC.z = u_planeHeight;
|
|||
|
|
}
|
|||
|
|
vsOutput.positionMC = (czm_inverseModel * u_localModel * positionWC).xyz;
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
addTiles(){
|
|||
|
|
const inverseModelLocal = new Cesium.Matrix4();
|
|||
|
|
const modelLocal = new Cesium.Matrix4();
|
|||
|
|
const ypShader = new CustomShader({
|
|||
|
|
uniforms: {
|
|||
|
|
u_inverseLocalModel: {
|
|||
|
|
type: Cesium.UniformType.MAT4,
|
|||
|
|
value: inverseModelLocal
|
|||
|
|
},
|
|||
|
|
u_localModel: {
|
|||
|
|
type: Cesium.UniformType.MAT4,
|
|||
|
|
value: modelLocal
|
|||
|
|
},
|
|||
|
|
u_planeHeight: {
|
|||
|
|
type: Cesium.UniformType.FLOAT,
|
|||
|
|
value: -20
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
vertexShaderText: `
|
|||
|
|
void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
|
|||
|
|
vec4 positionWC = u_inverseLocalModel * czm_model * vec4(vsInput.attributes.positionMC, 1.0);
|
|||
|
|
if (positionWC.z > u_planeHeight) {
|
|||
|
|
positionWC.z = u_planeHeight;
|
|||
|
|
}
|
|||
|
|
vsOutput.positionMC = (czm_inverseModel * u_localModel * positionWC).xyz;
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
})
|
|||
|
|
var tileUrl = "./SampleData/Cesium3DTiles/dayanta/tileset.json"
|
|||
|
|
var tileset = new Cesium.Cesium3DTileset({
|
|||
|
|
url: tileUrl,
|
|||
|
|
maximumScreenSpaceError:20,//控制模型的绘制精度，数值越大在同等层级里面加载的模型会越模糊，默认为16
|
|||
|
|
|
|||
|
|
skipLevelOfDetail: true,
|
|||
|
|
dynamicScreenSpaceError: true,
|
|||
|
|
maximumNumberOfLoadedTiles: 10000, //最大加载瓦片个数
|
|||
|
|
|
|||
|
|
dynamicScreenSpaceErrorDensity: 0.00278,
|
|||
|
|
dynamicScreenSpaceErrorFactor: 4.0,
|
|||
|
|
dynamicScreenSpaceErrorHeightFalloff: 0.25,
|
|||
|
|
|
|||
|
|
customShader:ypShader,
|
|||
|
|
});
|
|||
|
|
viewer.scene.primitives.add(tileset);
|
|||
|
|
viewer.zoomTo(tileset)
|
|||
|
|
tileset.readyPromise.then((tileset_)=> {
|
|||
|
|
const center = tileset_.boundingSphere.center;
|
|||
|
|
tileset.localView = Transforms.eastNorthUpToFixedFrame(center, viewer.scene.globe.ellipsoid, modelLocal);
|
|||
|
|
tileset.localViewInverse = Matrix4.inverse(modelLocal, inverseModelLocal);
|
|||
|
|
// this.setTilesetHeightAndOffset(tileset_, -420);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
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;
|
|||
|
|
},
|
|||
|
|
initEvent(){
|
|||
|
|
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|||
|
|
let vm = this;
|
|||
|
|
handler.setInputAction(function (movement) {
|
|||
|
|
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
|
|||
|
|
var cartesian3 = viewer.camera.pickEllipsoid(movement.position);
|
|||
|
|
if (cartesian3) {
|
|||
|
|
//将笛卡尔三维坐标转为地图坐标（弧度）
|
|||
|
|
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);
|
|||
|
|
//将地图坐标（弧度）转为十进制的度数
|
|||
|
|
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(9);
|
|||
|
|
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(9);
|
|||
|
|
var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
|
|||
|
|
console.log(log_String+","+lat_String);
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|||
|
|
handler.setInputAction(function (movement) {
|
|||
|
|
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
|
|||
|
|
var cartesian3 = viewer.camera.pickEllipsoid(movement.endPosition);
|
|||
|
|
if (cartesian3) {
|
|||
|
|
//将笛卡尔三维坐标转为地图坐标（弧度）
|
|||
|
|
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);
|
|||
|
|
//将地图坐标（弧度）转为十进制的度数
|
|||
|
|
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
|
|||
|
|
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
|
|||
|
|
var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
|
|||
|
|
vm.lng = log_String;
|
|||
|
|
vm.lat = lat_String;
|
|||
|
|
vm.alti = alti_String;
|
|||
|
|
console.log(log_String,lat_String);
|
|||
|
|
}
|
|||
|
|
// 单体化高亮,清除上一个
|
|||
|
|
if(window.singlePrimitive){
|
|||
|
|
// viewer.scene.primitives.remove(window.selectPrimitive);
|
|||
|
|
// window.selectPrimitive=null;
|
|||
|
|
let comp = window.singlePrimitive;
|
|||
|
|
let attr = comp.primitive.getGeometryInstanceAttributes(comp.id);
|
|||
|
|
attr.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromBytes(255,255,255,0));
|
|||
|
|
window.singlePrimitive=null;
|
|||
|
|
}
|
|||
|
|
let pickPrimitive = viewer.scene.pick(movement.endPosition);
|
|||
|
|
if(pickPrimitive&&pickPrimitive.id&&pickPrimitive.id.type){
|
|||
|
|
if(pickPrimitive.id.type == "single"){
|
|||
|
|
// 设置选中高亮primitive
|
|||
|
|
var attributes = pickPrimitive.primitive.getGeometryInstanceAttributes(pickPrimitive.id);
|
|||
|
|
window.singlePrimitive = {
|
|||
|
|
id:pickPrimitive.id,
|
|||
|
|
primitive:pickPrimitive.primitive,
|
|||
|
|
}
|
|||
|
|
attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromBytes(0,255,0,150));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initViewer();
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|