cesium 平滑切换二三维

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cesium 平滑切换二三维相关的知识,希望对你有一定的参考价值。

参考技术A 很多人用sceneMode 来进行二三维切换 ,其实这样不好用,位置什么的 图层状态都不好绑定,给人体验非常差

对于arcgis 引擎 可以锁视角实现平滑切换,mapbox 引擎也可以锁视角实现,但是对于cesium 也是可以的

首先我们要知道获取中心点方法

function getCenter(viewer: any)

// debugger

const scene = viewer.scene;

const target = pickCenterPoint(scene);

let bestTarget = target;

const globe = scene.globe;

const carto = scene.camera.positionCartographic.clone();

const height = globe.getHeight(carto);

carto.height = height || 0;

bestTarget = Cesium.Ellipsoid.WGS84.cartographicToCartesian(carto);

const result = formatPosition(bestTarget);

// 获取地球中心点世界位置 与 摄像机的世界位置 之间的距离

const distance = Cesium.Cartesian3.distance(bestTarget, viewer.scene.camera.positionWC);

result.cameraZ = distance;

return result;



function pickCenterPoint(scene: any)

const canvas = scene.canvas;

const center = new Cesium.Cartesian2(canvas.clientWidth / 2, canvas.clientHeight / 2);

const ray = scene.camera.getPickRay(center);

const target = scene.globe.pick(ray, scene);

return target || scene.camera.pickEllipsoid(center);



function formatPosition(position)

const carto = Cesium.Cartographic.fromCartesian(position);

const result = ;

result.y = formatNum(Cesium.Math.toDegrees(carto.latitude), 6);

result.x = formatNum(Cesium.Math.toDegrees(carto.longitude), 6);

result.z = formatNum(carto.height, 2);

return result;



function formatNum(num, digits)

return Number(num.toFixed(digits || 0));



第二我们要知道屏幕中心点位置

function getScreenCenter(_viewer: any)

const viewer = _viewer;

const result = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2));

const curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);

const lon = (curPosition.longitude * 180) / Math.PI;

const lat = (curPosition.latitude * 180) / Math.PI;

const height = curPosition.height;

return

x: lon,

y: lat

;



下面我们来定义调用切换二三维的方法, 其中mapType 我定义为mapView和sceneView类型, 哈哈学习arcgis模式

```javascript

type mapType = 'mapView' | 'sceneView';

public changeSV23D(viewer: any, type: mapType)

const viewer = viewer;

const result: any = getCenter(viewer);

const curPosition = getScreenCenter(viewer);

const center = Cesium.Cartesian3.fromDegrees(curPosition.x, curPosition.y);

if (type === 'sceneView')

if (viewer.view === 'sceneView')

return;



viewer.scene.screenSpaceCameraController.enableTilt = true;

viewer.view = 'sceneView';

let x = -90;

let pitch;

const range = result.cameraZ * 1.2;

 更多参考 https://xiaozhuanlan.com/topic/7459016328

openlayers和cesium实现地图二三维切换

本文介绍如何在普通2d的gis项目里实现地图的二、三维切换。二维地图引擎市面上比较多,比较有代表性的像openlayers、leaflet等。三维地图目前比较流行的开源方案有cesium,它本身是基于webGL实现的地图引擎。

cesium在vue上实现需要很多步骤,我之前写过一篇总结,是基于vuecli2.0实现的。按步骤一步步实现,问题不大。如果你是用vuecli3搭建的项目,这里有篇文章介绍用vuecli3实现引用cesium。如果要实现二三维地图切换,难点是地图引擎的转换,有个插件已经帮忙实现了这个工作:ol-cesium。

 

场景需求

好了,我来捋捋场景,搞清楚需求:

1、openlayers加载地图

2、cesium加载三维地图

3、实现二、三维地图切换

4、在vue框架上实现以上功能

实现步骤

一、用openlayers加载地图

此处略过,虽然简单,但是对于没有接触过gis的前端同学还是有入门门槛的。那既然是要实现以上需求,应该就是要做gis项目的人。既然是做gis项目的,那这个ol加载地图就不应该是难点,官网有很多示例,所以此处略过。

还是给一个示例代码:

<template>
<div id = "map">

</div>
</template>
<script>
import \'ol/ol.css\';
import Map from \'ol/Map\';
import OSM from \'ol/source/OSM\';
import TileLayer from \'ol/layer/Tile\';
import View from \'ol/View\';

var olmap = new Map({
layers: [
new TileLayer({
source: new OSM(),
}) ],
target: \'map\',
view: new View({
center: [0, 0],
zoom: 2,
}),
});
</script>

二、用cesium加载三维地图

cesium加载三维地图对于gis行业的同学来说也是个麻烦事,更别说要在vue框架上实现了。

以vuecli3为例,引用cesium其实只用几步:

安装vue-cli-plugin-cesium插件
// npm
npm install--save-dev vue-cli-plugin-cesium

// yarn
yarn add vue-cli-plugin-cesium
直接在vue组件中使用

安装好了就可以直接new出来用,因为它已经绑定了vue实例;

<template>
<div id= "cesiumContainer">
</div>
</template>
<script>
export default {
name: "",
mounted(){
var viewer = new Cesium.Viewer("cesiumContainer")
}
}
</script>

三、实现二、三维地图切换

安装olcs插件

这是一个用于实现openlayers与cesium切换的插件,详细文档移步官网

npmi --save olcs
实现二、三维切换
import OLCesium from \'olcs/OLCesium.js\';
const ol3d = new OLCesium({map: ol2dMap}); // ol2dMap 是openlayers绑定的地图对象
ol3d.setEnabled(true);

需要注意的就是上面代码中的ol2dMap是openlayers绑定的地图对象,这个业内同学都懂。结合前面的ol示例,就是那个olmap对象。

四、注意要点

如果有这样的需求:本来是二维地图有个矢量地图,比如一个什么专题图;然后切换到了三维地图,我仍然要能在三维地图上看到那个专题图。

现在切换到三维后,效果是有了,平面变三维地球,问题是之前的那个专题图也看不见了!原因就是切换到三维后,二维地图被覆盖了。 解决办法就是,切换到三维后,再用cesium引擎加载平面专题图;

cesium加载平面地图
var ol3dLayers = ol3d.getCesiumScene().imageryLayers;
        // eslint-disable-next-line no-undef
        ol3dLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
          url: \'http://**************/arcgis/rest/services/**/******/MapServer\'
        }))

上面的示例地图是一个aricgis动态服务;

最后上图,来看下效果:

参考资料:

https://blog.csdn.net/u010001043/article/details/74279380

https://cesium.com/docs/cesiumjs-ref-doc/ArcGisMapServerImageryProvider.html

https://mp.weixin.qq.com/s/3Of_xKhUOxiwFhJoZ0U-Mg

 

本文分享自微信公众号 - 字节逆旅(wvivw_007)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

以上是关于cesium 平滑切换二三维的主要内容,如果未能解决你的问题,请参考以下文章

shader编程-三维场景下SDF建模,平滑交集平滑并集平滑差集(WebGL-Shader开发基础11)

shader编程-三维场景下SDF建模,平滑交集平滑并集平滑差集(WebGL-Shader开发基础11)

shader编程-三维场景下SDF建模,平滑交集平滑并集平滑差集(WebGL-Shader开发基础11)

shader编程-三维场景下SDF建模,平滑交集平滑并集平滑差集(WebGL-Shader开发基础11)

Python 颜色渐变三维平滑曲线 3D plot Color Gradient

cesium初探之加载三维模型