网站域名 英文,可信网站标准版,茶楼网站源码,网站建设工作会议召开文章目录 二三维视图的打点飞线#xff0c;二三维实现联动需求分析 模型点击事件需求分析 二三维标绘图标#xff0c;依比例和不依比例缩放需求分析二维标绘图标依比例缩放不依比例缩放 三维标绘图标依比例缩放不依比例缩放 经纬度和地名互查需求分析经纬度转地名地名转经纬度… 文章目录 二三维视图的打点飞线二三维实现联动需求分析 模型点击事件需求分析 二三维标绘图标依比例和不依比例缩放需求分析二维标绘图标依比例缩放不依比例缩放 三维标绘图标依比例缩放不依比例缩放 经纬度和地名互查需求分析经纬度转地名地名转经纬度 提供一部分三维模型示例加载在图片需求分析 鹰眼联动内容同步需求分析 二三维视图的打点飞线二三维实现联动
需求 二三维视图的打点飞线二三维实现联动 分析
该需求需要实现打点飞线即实现对点线的制作实现打点飞线
!DOCTYPE html
html langenheadmeta charsetutf-8 /titleCesium Example/titlescript srchttps://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js/scriptstyleimport url(https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}/style/headbodydiv idcesiumContainer/divscript// 初始化 Cesium 场景const viewer new Cesium.Viewer(cesiumContainer);// 创建飞线路径const positions [Cesium.Cartesian3.fromDegrees(-75, 35, 250000),Cesium.Cartesian3.fromDegrees(-125, 35, 250000),Cesium.Cartesian3.fromDegrees(-125, 45, 250000),];const redLine viewer.entities.add({polyline: {positions: positions,width: 5,material: Cesium.Color.RED,},});// 创建点for (let i 0; i positions.length; i) {viewer.entities.add({position: positions[i],point: {pixelSize: 10,color: Cesium.Color.YELLOW,},});}// 设置相机视角viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-100, 40, 5000000),});/script/body
/html模型点击事件
需求 实现对模型的点击事件 分析
当在 Cesium 场景中加载了一个或多个模型时可以通过添加点击事件来捕获用户点击模型的操作。以下是一个示例演示如何为 Cesium 模型添加点击事件
!DOCTYPE html
html langenheadmeta charsetutf-8 /titleCesium Example/titlescript srchttps://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js/scriptstyleimport url(https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}/style/headbodydiv idcesiumContainer/divscript// 初始化 Cesium 场景const viewer new Cesium.Viewer(cesiumContainer);// 加载模型const modelEntity viewer.entities.add({name: model,position: Cesium.Cartesian3.fromDegrees(-75, 40),model: {uri: path/to/your/model.gltf,},});// 添加点击事件viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {const pickedObject viewer.scene.pick(movement.position);if (Cesium.defined(pickedObject) pickedObject.id modelEntity) {console.log(模型被点击了);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);/script/body
/html在这个示例中我们首先初始化了 Cesium 场景并加载了一个模型。然后我们为场景的左击事件添加了一个处理函数。在处理函数中通过使用 viewer.scene.pick() 方法来获取用户点击的对象。如果被点击的对象的 ID 与模型实体的 ID 匹配就会在控制台输出一条消息。 请注意path/to/your/model.gltf 部分应该替换为你自己模型文件的路径。此外还可以根据需要修改模型的位置、添加更多的模型以及在点击事件处理函数中执行其他操作。 这个示例演示了如何在 Cesium 中为模型添加点击事件并在用户点击模型时触发相应的操作
二三维标绘图标依比例和不依比例缩放
需求 二三维标绘图标依比例和不依比例缩放 分析
在Cesium中实现依比例和不依比例缩放的方法略有不同。下面我将分别介绍在Cesium中如何实现依比例和不依比例缩放。
二维标绘图标
依比例缩放
在Cesium中二维标绘通常使用Billboard来表示图标。要实现依比例缩放可以设置Billboard的scale属性来指定缩放比例。
var viewer new Cesium.Viewer(cesiumContainer);var billboard viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(longitude, latitude),billboard: {image: path/to/image.png,scale: 1.0, // 初始缩放比例// 其他属性...}
});viewer.zoomTo(viewer.entities);上面的代码创建了一个位于指定经纬度位置的Billboard并设置了初始的缩放比例为1.0。当调整地图的缩放级别时Billboard会自动按照相应比例进行缩放从而保持图标的原始比例。
不依比例缩放
如果想实现不依比例缩放可以直接改变Billboard的width和height属性而不是使用scale属性。
var viewer new Cesium.Viewer(cesiumContainer);var billboard viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(longitude, latitude),billboard: {image: path/to/image.png,width: 32, // 初始宽度height: 16, // 初始高度// 其他属性...}
});viewer.zoomTo(viewer.entities);上述代码中width和height分别设置了初始的宽度和高度。在地图缩放时Billboard的宽度和高度将以不同的比例进行调整从而导致图标的形状发生变化。
三维标绘图标
依比例缩放
在Cesium中三维标绘通常使用Model来加载和显示模型。要实现依比例缩放可以设置Model的scale属性来指定缩放比例。
var viewer new Cesium.Viewer(cesiumContainer);var modelEntity viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),model: {uri: path/to/model.gltf,scale: 1.0, // 初始缩放比例// 其他属性...}
});viewer.zoomTo(viewer.entities);上面的代码加载了一个指定位置的模型并设置了初始的缩放比例为1.0。当调整地图的缩放级别时模型会按照相应比例进行缩放保持原始比例。
不依比例缩放
如果想实现不依比例缩放可以直接改变Model的scale属性中的各个轴的缩放比例。
var viewer new Cesium.Viewer(cesiumContainer);var modelEntity viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),model: {uri: path/to/model.gltf,scale: new Cesium.Cartesian3(2, 1, 0.5), // 初始缩放比例// 其他属性...}
});viewer.zoomTo(viewer.entities);上述代码中scale属性使用了一个Cartesian3对象来设置初始的缩放比例。可以根据需要调整各个轴的缩放比例从而实现不依比例缩放效果。
综上所述在Cesium中实现依比例和不依比例缩放主要通过设置Billboard和Model的scale属性来实现。
经纬度和地名互查
需求 经纬度和地名互查 分析
要在Cesium中实现经纬度和地名的互查可以使用Cesium的Geocoder组件来实现。
经纬度转地名
要将经纬度转换为地名可以使用Geocoder的geocode方法。该方法接受一个Cartographic对象作为参数其中包含了经度和纬度信息。下面是一个示例代码
var viewer new Cesium.Viewer(cesiumContainer);var geocoder new Cesium.Geocoder({container: geocoderContainer
});viewer.extend(Cesium.viewerCesiumInspectorMixin); // 添加Inspector插件
viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin); // 添加3DTiles Inspector插件geocoder.viewModel.searchText 40.7128, -74.0060; // 设置经纬度viewer.geocoder.viewModel.search(); // 调用search方法进行查询上述代码中我们创建了一个Geocoder实例并将其绑定到指定的HTML容器中这里使用了id为geocoderContainer的容器。然后通过设置searchText属性我们传入了一个经纬度坐标40.7128, -74.0060。最后调用search方法进行查询。 当查询成功后可以通过监听geocodeComplete事件获取查询结果并获取地名信息。示例如下
geocoder.viewModel.geocodeComplete.addEventListener(function(geocodeResult) {var result geocodeResult.results[0];if (result) {var displayName result.displayName;console.log(displayName); // 输出地名信息}
});上述代码中监听了geocodeComplete事件并通过geocodeResult.results[0]获取到查询结果的第一个地名信息。然后可以使用displayName属性来获取地名信息并进行后续操作。
地名转经纬度
要将地名转换为经纬度同样可以使用Geocoder的geocode方法但这次传入的参数是地名字符串。以下是示例代码
var viewer new Cesium.Viewer(cesiumContainer);var geocoder new Cesium.Geocoder({container: geocoderContainer
});viewer.extend(Cesium.viewerCesiumInspectorMixin); // 添加Inspector插件
viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin); // 添加3DTiles Inspector插件geocoder.viewModel.searchText New York City; // 设置地名viewer.geocoder.viewModel.search(); // 调用search方法进行查询上述代码中我们设置了searchText属性为New York City即要查询的地名。然后调用search方法进行查询。 同样可以在geocodeComplete事件中获取查询结果并获取经纬度信息。示例如下
geocoder.viewModel.geocodeComplete.addEventListener(function(geocodeResult) {var result geocodeResult.results[0];if (result) {var position result.position;console.log(position); // 输出经纬度信息}
});上述代码中我们通过geocodeResult.results[0]获取到查询结果的第一个地名信息然后使用position属性获取经纬度信息并进行后续操作。 综上所述在Cesium中实现经纬度和地名的互查可以通过使用Geocoder组件的geocode方法实现。可以根据需要传入经纬度或地名字符串作为参数并监听geocodeComplete事件获取查询结果。
提供一部分三维模型示例加载在图片
需求 提供一部分三维模型示例加载在图片 分析
在Cesium中可以通过Cesium.Model来加载三维模型并通过Cesium.Billboard来加载图片。下面是一个简单的示例代码演示了如何在Cesium中实现加载三维模型并将其与图片一起展示
// 初始化Cesium Viewer
var viewer new Cesium.Viewer(cesiumContainer);// 加载三维模型
var modelMatrix Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0)
);
var model viewer.scene.primitives.add(Cesium.Model.fromGltf({url : path_to_your_3d_model.gltf,modelMatrix : modelMatrix,scale : 200.0
}));// 加载图片
var imageUrl path_to_your_image.jpg;
var billboard viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0),billboard: {image: imageUrl,scale: 1.0}
});在上述代码中我们首先初始化了Cesium Viewer并加载了一个三维模型和一张图片。对于三维模型我们使用Cesium.Model.fromGltf方法加载了一个GLTF格式的模型并通过modelMatrix设置了其位置、旋转和缩放。对于图片我们创建了一个Cesium.Billboard实体并通过image属性设置了图片的URL然后将该实体添加到了Viewer中。 通过上述示例代码可以在Cesium中实现加载三维模型并将其与图片一起展示。
鹰眼联动内容同步
需求 鹰眼联动内容同步 分析
在Cesium中实现鹰眼联动可以通过两个视图之间的相机位置和操控进行同步。下面是一个示例代码演示了如何在Cesium中实现鹰眼联动
// 初始化主视图
var mainViewer new Cesium.Viewer(mainContainer);// 初始化鹰眼视图
var overviewViewer new Cesium.Viewer(overviewContainer, {animation: false,baseLayerPicker: false,fullscreenButton: false,geocoder: false,homeButton: false,infoBox: false,sceneModePicker: false,selectionIndicator: false,timeline: false,navigationHelpButton: false,navigationInstructionsInitiallyVisible: false,shouldAnimate: false
});// 主视图相机变化时更新鹰眼视图
mainViewer.camera.changed.addEventListener(function() {updateOverviewView();
});// 鹰眼视图点击时更新主视图
overviewViewer.canvas.addEventListener(click, function(event) {var clickedPosition overviewViewer.scene.pickPosition(event.position);if (Cesium.defined(clickedPosition)) {mainViewer.camera.flyTo({destination : clickedPosition});}
});// 更新鹰眼视图
function updateOverviewView() {var mainCamera mainViewer.camera;var overviewCamera overviewViewer.camera;// 更新鹰眼视图相机位置和方向overviewCamera.setView({destination: mainCamera.position,orientation: {heading: mainCamera.heading,pitch: Cesium.Math.toRadians(-90),roll: 0.0}});// 更新鹰眼视图操控器var scene overviewViewer.scene;scene.screenSpaceCameraController.minimumZoomDistance mainCamera.minimumZoomDistance;scene.screenSpaceCameraController.maximumZoomDistance mainCamera.maximumZoomDistance;scene.screenSpaceCameraController.enableRotate mainCamera.enableRotate;scene.screenSpaceCameraController.enableTranslate mainCamera.enableTranslate;scene.screenSpaceCameraController.enableZoom mainCamera.enableZoom;scene.screenSpaceCameraController.enableTilt mainCamera.enableTilt;
}// 加载示例模型仅为演示效果
mainViewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0),model: {uri: path_to_your_3d_model.gltf}
});在上述代码中我们初始化了主视图和鹰眼视图。主视图和鹰眼视图分别对应两个不同的div容器分别是mainContainer和overviewContainer。然后我们通过监听主视图相机的changed事件实现主视图相机变化时更新鹰眼视图。 在更新鹰眼视图的函数updateOverviewView中我们首先获取主视图相机的位置和方向然后将其设置到鹰眼视图的相机中。接着我们更新鹰眼视图的操控器使其与主视图保持一致。 最后我们通过给鹰眼视图的canvas添加点击事件监听器实现在鹰眼视图中点击某个位置时更新主视图相机。 请注意在示例代码中我们加载了一个示例模型仅用于演示效果。你需要将路径’path_to_your_3d_model.gltf’替换为你实际使用的模型路径。 通过以上示例代码可以在Cesium中实现鹰眼联动实现两个视图之间的相机位置和操控的同步。
