324 lines
13 KiB
HTML
324 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<script src="./Build/Cesium/Cesium.js"></script>
|
||
<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
|
||
<style>
|
||
@import url(./Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="cesiumContainer"></div>
|
||
<script>
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
||
var viewer = new Cesium.Viewer("cesiumContainer", {
|
||
// terrainProvider: Cesium.createWorldTerrain({
|
||
// requestVertexNormal: true, //添加地形光照
|
||
// requestWaterMask: true, //添加水面波浪效果
|
||
// }),
|
||
// baseLayerPicker: false, //底图选择器
|
||
// mapProjection : new Cesium.WebMercatorProjection(),
|
||
|
||
// geocoder:false,//位置查找
|
||
// homeButton:false,//视图返回初始位置
|
||
// sceneModePicker:false,//视角选择器
|
||
// navigationHelpButton:false,//导航帮助按钮
|
||
// animation:false,//动画控制器
|
||
// // creditContainer:"credit",//版权显示,指定dom对象的id,再通过id样式可以隐藏CESIUM 版本图标
|
||
// timeline:false,//时间线
|
||
// fullscreenButton:false,//全屏控件
|
||
// vrButton:false,
|
||
// infoBox:true ,
|
||
// shouldAnimate:true,
|
||
// scene3DOnly:true,//默认false，若为true,所有几何体实例将仅会在3D模式中渲染(在GPU内存中)
|
||
});
|
||
viewer.imageryLayers.removeAll();
|
||
// 添加 Mapbox tile provider
|
||
const mapboxAccess =
|
||
"pk.eyJ1IjoicWl1c2hpamllIiwiYSI6ImNsMDNvdDRybDEyc2YzZG9kbWZoY2FuOW0ifQ.4FH-BUupi46Z0zQ-CEm_Ig";
|
||
|
||
// 样式id查看：https://docs.mapbox.com/api/maps/styles/
|
||
// URL格式的 mapbox://styles/:owner/:style， 其中 :owner 是您的 Mapbox 账户名 :style 是样式 ID 。
|
||
// 可选值：streets-v10、outdoors-v10 、light-v9、dark-v9、satellite-v9、satellite-streets-v10
|
||
const mapboxStyleImagery = new Cesium.MapboxStyleImageryProvider({
|
||
styleId: "dark-v9",
|
||
accessToken: mapboxAccess,
|
||
// proxy: new Cesium.DefaultProxy("http://127.0.0.1:8080/proxy/"),
|
||
});
|
||
viewer.imageryLayers.addImageryProvider(mapboxStyleImagery);
|
||
|
||
/**
|
||
* Cesium中的矢量数据可以分为两类：
|
||
* 1. Primitive
|
||
* 2. Entity
|
||
*
|
||
* 对于矢量数据的文件，CesiumJS提供了DataSource接口，它会将文件中的数据转换为一个 EntityCollection 实体集合
|
||
* DataSource接口的实现类有：
|
||
* - GeoJsonDataSource
|
||
* - KmlDataSource
|
||
* - CzmlDataSource
|
||
* - GpxDataSource
|
||
* - CustomDataSource
|
||
* - DataSourceCollection
|
||
*/
|
||
|
||
/**
|
||
* Primitive
|
||
* 一个 Primitive 由 geometry 实例和一个 Appearance (包含Material材料和和RenderState渲染状态)组成，代表Scene场景中的一个geometry几何对象。
|
||
* geometry实例定义了结构和位置，Appearance定义了视觉特征。
|
||
* 将多个实例组合成一个Primitive称为`batching`，可以显著提高静态数据的性能，实例也可以单独的被拾取(picked)到。
|
||
* 使用Scene场景的picked方法可以获得到geometry实例的id,也可以使用appearance的实例定义primitive的外表，如使用 PerInstanceColorAppearance为每个实例定义不同大颜色
|
||
*
|
||
*/
|
||
var scene = viewer.scene;
|
||
// 创建一个geometry对象
|
||
const instance = new Cesium.GeometryInstance({
|
||
geometry : new Cesium.EllipseGeometry({
|
||
center : Cesium.Cartesian3.fromDegrees(112.0, 23.0), // 椭球的中心点
|
||
semiMinorAxis : 500000.0, // 长半轴，单位为米
|
||
semiMajorAxis : 1000000.0, // 短半轴
|
||
rotation : Cesium.Math.PI_OVER_FOUR, // 正北逆时针旋转的角度，弧度值
|
||
vertexFormat : Cesium.VertexFormat.POSITION_AND_ST // 被用来计算的顶点属性
|
||
}),
|
||
id : 'object returned when this instance is picked and to get/set per-instance attributes'
|
||
});
|
||
scene.primitives.add(new Cesium.Primitive({
|
||
geometryInstances : instance,
|
||
appearance : new Cesium.EllipsoidSurfaceAppearance({
|
||
material : Cesium.Material.fromType('Checkerboard')
|
||
})
|
||
}));
|
||
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(112.0, 23.0,4000000),
|
||
orientation: {
|
||
heading: Cesium.Math.toRadians(0),
|
||
pitch: Cesium.Math.toRadians(-90),
|
||
roll: Cesium.Math.toRadians(0),
|
||
},
|
||
});
|
||
|
||
// viewer.dataSources.add(
|
||
// Cesium.GeoJsonDataSource.load(
|
||
// // "./SampleData/ne_10m_us_states.topojson",
|
||
// "./SampleData/simplestyles.geojson",
|
||
// {
|
||
// stroke: Cesium.Color.HOTPINK,
|
||
// fill: Cesium.Color.PINK,
|
||
// strokeWidth: 30,
|
||
// markerSymbol: "?",
|
||
// }
|
||
// )
|
||
// );
|
||
|
||
// viewer.dataSources.add(
|
||
// Cesium.KmlDataSource.load(
|
||
// "./SampleData/kml/facilities/facilities.kml",
|
||
// {
|
||
// camera: viewer.scene.camera,
|
||
// canvas: viewer.scene.canvas,
|
||
// }
|
||
// )
|
||
// );
|
||
|
||
// viewer.entities.add({
|
||
// // name:entity.name,
|
||
// polyline: {
|
||
// positions: Cesium.Cartesian3.fromDegreesArray([
|
||
// 121.534575, 38.926131, 121.537579, 38.92543, 121.541784, 38.924578,
|
||
// 121.543973, 38.924144, 121.545947, 38.923944,
|
||
// ]),
|
||
// width: 2,
|
||
// material: Cesium.Color.DARKORANGE.withAlpha(0.7),
|
||
// clampToGround: true,
|
||
// show: true,
|
||
// },
|
||
// });
|
||
|
||
// viewer.entities.add({
|
||
// // name:entity.name,
|
||
// polyline: {
|
||
// positions: Cesium.Cartesian3.fromDegreesArray([
|
||
// 121.534575, 38.926131, 121.537579, 38.92543, 121.541784, 38.924578,
|
||
// 121.543973, 38.924144, 121.545947, 38.923944,
|
||
// ]),
|
||
// width: 4, // 线的宽度，像素为单位
|
||
// material: new Cesium.PolylineTrailMaterialProperty({
|
||
// // 尾迹线材质
|
||
// color: Cesium.Color.GOLD,
|
||
// trailLength: 0.4,
|
||
// period: 3.0,
|
||
// }),
|
||
// },
|
||
// });
|
||
|
||
//=================矢量文件形式================
|
||
// 加载GeoJSON或TopoJSON数据
|
||
// let tpSource = Cesium.GeoJsonDataSource.load(
|
||
// // "./SampleData/ne_10m_us_states.topojson",
|
||
// "./SampleData/world.json",
|
||
// {
|
||
// stroke: Cesium.Color.HOTPINK.withAlpha(0.6),
|
||
// fill: Cesium.Color.PINK.withAlpha(0.3),
|
||
// strokeWidth: 3,
|
||
// clampToGround: true,
|
||
// // markerSymbol: "中文",
|
||
// // markerColor: Cesium.Color.BLACK,
|
||
// }
|
||
// );
|
||
// tpSource.then(function (dataSource) {
|
||
// console.log(dataSource);
|
||
// });
|
||
// viewer.dataSources.add(tpSource);
|
||
|
||
// viewer.zoomTo(viewer.entities);
|
||
|
||
//添加OSM的建筑
|
||
// const tileset = viewer.scene.primitives.add(
|
||
// new Cesium.Cesium3DTileset({
|
||
// url: Cesium.IonResource.fromAssetId(96188),
|
||
// })
|
||
// );
|
||
// Add OSM Building tileset
|
||
// let osmBuildingsTileset = Cesium.createOsmBuildings();
|
||
// viewer.scene.primitives.add(osmBuildingsTileset);
|
||
|
||
// //设置条件渲染
|
||
// osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
|
||
// color: {
|
||
// conditions: [
|
||
// ["${name} === '周大福金融中心（广州东塔）'", "color('red')"],
|
||
// ["true", "color('white')"],
|
||
// ],
|
||
// },
|
||
// })
|
||
|
||
// const gzTile = "http://localhost:9000/model/985e07c0af2611ecb9f6593f47f8b446/tileset.json";
|
||
// const gzTile = "http://localhost:8088/models/test/tileset.json"
|
||
// const gzTile = "http://localhost:9000/model/b79958e0b0cc11ec8bc06d6596cb2944/tileset.json"
|
||
// const gzTileUrl = "http://localhost:9000/model/7df72320b19311ec88f70b657344b78e/tileset.json";
|
||
// const gzTileset = viewer.scene.primitives.add(
|
||
// new Cesium.Cesium3DTileset({
|
||
// // url: gzTileUrl,
|
||
// // url: new Cesium.Resource({
|
||
// url: gzTileUrl,
|
||
// // proxy: new Cesium.DefaultProxy("http://127.0.0.1:8080/proxy/"),
|
||
// // }),
|
||
// })
|
||
// );
|
||
|
||
// const tilesetUrls = [
|
||
// "http://localhost:9000/model/0409d8a0bb9811ecab6c19520cac75ce/tileset.json"
|
||
// // "http://localhost:9000/model/7df72320b19311ec88f70b657344b78e/tileset.json",
|
||
// // "http://localhost:9000/model/d7f76b00b26511ecbad42b82eaa7c606/tileset.json",
|
||
// // "http://localhost:9000/model/431ab420b26411ecbad42b82eaa7c606/tileset.json",
|
||
// // "http://localhost:9000/model/219e74c0b26011ecbad42b82eaa7c606/tileset.json",
|
||
// // "http://localhost:9000/model/4cc92290b25f11ecbad42b82eaa7c606/tileset.json",
|
||
// // "http://localhost:9000/model/a36e36c0b25b11ecbad42b82eaa7c606/tileset.json",
|
||
// // "http://localhost:9000/model/8427d840b25911ecbad42b82eaa7c606/tileset.json",
|
||
// // "http://localhost:9000/model/c98c4ef0b25611ecbad42b82eaa7c606/tileset.json",
|
||
// // "http://localhost:9000/model/1aa252e0b25611ecbad42b82eaa7c606/tileset.json",
|
||
// // "http://localhost:9000/model/99633920b24f11ecbad42b82eaa7c606/tileset.json",
|
||
// // "http://localhost:9000/model/3c494cc0b24f11ecbad42b82eaa7c606/tileset.json",
|
||
// // "http://localhost:9000/model/8c05f9f0b19811ec88f70b657344b78e/tileset.json",
|
||
// ];
|
||
// const buildingsStyle = new Cesium.Cesium3DTileStyle({
|
||
// // color:{
|
||
// // conditions:[
|
||
// // ['${实际层} > 2', 'color("red")'],
|
||
// // ['true', 'color("blue")']
|
||
// // ]
|
||
// // }
|
||
// color:'color("white",0.8)'
|
||
// })
|
||
// // viewer.zoomTo(gzTileset)
|
||
|
||
// tilesetUrls.map(function(url){
|
||
// addBuildingTile(url,buildingsStyle)
|
||
// })
|
||
|
||
// function addBuildingTile(url,style){
|
||
// const tileset = new Cesium.Cesium3DTileset({
|
||
// url:url
|
||
// })
|
||
// if(style){
|
||
// tileset.style = style ;
|
||
// }
|
||
// viewer.scene.primitives.add(tileset);
|
||
// }
|
||
|
||
|
||
// //点击交互事件
|
||
// const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||
// // Add left click input to select a building to and extract its coordinates
|
||
// handler.setInputAction(function (movement) {
|
||
// viewer.selectedEntity = undefined;
|
||
// const pickedBuilding = viewer.scene.pick(movement.position);
|
||
// if (pickedBuilding) {
|
||
// const pickedLatitude = pickedBuilding.getProperty(
|
||
// "cesium#latitude"
|
||
// );
|
||
// const pickedLongitude = pickedBuilding.getProperty(
|
||
// "cesium#longitude"
|
||
// );
|
||
// // colorByDistanceToCoordinate(pickedLatitude, pickedLongitude);
|
||
// const level = pickedBuilding.getProperty(
|
||
// "实际层"
|
||
// );
|
||
// console.log("实际层:"+level)
|
||
// }
|
||
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
|
||
// handler.setInputAction(function(movement) {
|
||
// const feature = viewer.scene.pick(movement.endPosition);
|
||
// if (feature instanceof Cesium.Cesium3DTileFeature) {
|
||
// feature.color = Cesium.Color.PINK.withAlpha(0.3)
|
||
// }
|
||
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||
|
||
|
||
// function removeCoordinatePickingOnLeftClick() {
|
||
// document.querySelector(".infoPanel").style.visibility = "hidden";
|
||
// handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
// }
|
||
// function colorByDistanceToCoordinate(pickedLatitude, pickedLongitude) {
|
||
// osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
|
||
// defines: {
|
||
// distance: `distance(vec2(\${feature['cesium#longitude']}, \${feature['cesium#latitude']}), vec2(${pickedLongitude},${pickedLatitude}))`,
|
||
// },
|
||
// color: {
|
||
// conditions: [
|
||
// ["${distance} > 0.014", "color('blue')"],
|
||
// ["${distance} > 0.010", "color('green')"],
|
||
// ["${distance} > 0.006", "color('yellow')"],
|
||
// ["${distance} > 0.0001", "color('red')"],
|
||
// ["true", "color('white')"],
|
||
// ],
|
||
// },
|
||
// });
|
||
// }
|
||
|
||
// viewer.camera.flyTo({
|
||
// destination: new Cesium.Cartesian3(-2325771.0288233184,5392181.511762224,2484480.395134067),
|
||
// orientation: {
|
||
// heading: 6.0399326,
|
||
// pitch: -0.30503,
|
||
// roll: 6.2825747,
|
||
// },
|
||
// });
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|