qiusj
/
learning_cesium
0
0
Fork 0
Code Issues Issues Pull Requests Releases Wiki Wiki Activity
learning_cesium/加载矢量数据.html

324 lines
13 KiB
HTML
Raw Permalink Normal View History

init project
2024-03-19 18:06:25 +08:00
<!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>