openlayer源码转cesium

一、项目介绍

项目开发到一半,前期没说需要2d开发,后面又说最好有3d效果,这样比较炫酷。。。但是openlayer是2d开发,没办法使用3d开发的效果,因此需要用到一个插件将openlayer的地图转为3d的地图。 openlayer提供了插件 ol-cesium ,可以将openlayer的地图转3d地图。

2d地图 转3d地图

二、安装插件

安装ol-cesium、cesium 插件,由于单独只安装ol-cesium插件,找不到cesium的声明,因此不仅要安装cesium,还要把cesium当初全局的对象。要不然会报错。

js 复制代码
npm install cesium ol-cesium vite-plugin-cesium

三、使用

js 复制代码
import * as Cesium from 'cesium'
import OLCesium from 'ol-cesium'
import "cesium/Build/Cesium/Widgets/widgets.css";
Cesium.Ion.defaultAccessToken = 'xxxxxx'
window.Cesium = Cesium

//ol的地图
 this.map = new Map({
      layers:new TileLayer({
      source: new XYZ({
                url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6",
              }),
      }),
      target: id,
      view: new View({
        center: fromLonLat(this.center),
        zoom: 13,
      }),
      controls: [], // 不添加任何默认控件
});

//3d地图
const ol3d = new OLCesium({ map: this.map });
//开启3d地图
ol3d.setEnabled(true);

// 获取Cesium场景并配置
const scene = ol3d.getCesiumScene();
//地形配置
scene.terrainProvider = Cesium.createWorldTerrain({
    requestWaterMask : true, // required for water effects
    requestVertexNormals : true // required for terrain lighting
});

 // 设置初始视角
scene.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(120.0, 26.88, 1000000), // 经度,纬度,高度(米)
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-45), // 倾斜角度
    roll: 0.0
  }
});

四、使用效果

减少了2d转3d的代码量,openlayer地图上的打点、geojson的渲染可以在3d地图上正常展示,但是弹窗位置有点问题,感觉需要根据3d的坐标转换一下。openlayer的绘制的功能在3d上使用不了。目前大概遇到这些问题。后续继续研究方案。

相关推荐
Jacob02343 小时前
JavaScript 的进化之旅 Part 2:现代特性与算法优化实战
前端·javascript·性能优化
qb3 小时前
vue3.5.18源码:深入watch api底层实现
前端·vue.js·架构
OEC小胖胖3 小时前
掌握表单:React中的受控组件与表单处理
前端·javascript·react.js·前端框架·react·web
coding随想4 小时前
手机旋转也能触发代码?揭秘前端DeviceOrientation事件的神奇力量!
前端
Mintopia4 小时前
AIGC 训练数据的清洗与标注:技术痛点与自动化方案
前端·javascript·aigc
小喷友4 小时前
第9章 鸿蒙微内核与系统架构
前端·app·harmonyos
Hilaku4 小时前
我最近面试前端,发现一个很有意思的现象..
前端·javascript·面试
Js_cold4 小时前
Notepad++常用设置
前端·javascript·fpga开发·notepad++
Mintopia4 小时前
Next.js 新数据获取三剑客:fetch() + cache() + use —— 从引擎盖下聊到赛道上
前端·javascript·next.js