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上使用不了。目前大概遇到这些问题。后续继续研究方案。

相关推荐
excel44 分钟前
基于两台服务器的蓝绿切换实现零下线更新
前端
江城开朗的豌豆1 小时前
React生命周期:从诞生到更新的完整旅程
前端·javascript·react.js
江城开朗的豌豆1 小时前
Redux vs Context+Hooks:前端状态管理的双雄对决
前端·javascript·react.js
IT_陈寒1 小时前
SpringBoot性能翻倍!这5个隐藏配置让你的应用起飞🚀
前端·人工智能·后端
艾小码1 小时前
别再开无效复盘会了!前端工程师这样复盘,成长速度快人一步
前端
苏无逢2 小时前
CSS基础查缺补漏(持续更新补充)
前端·css
翻斗花园刘大胆3 小时前
JavaWeb之快递管理系统(完结)
java·开发语言·前端·jvm·spring·servlet·java-ee
正义的大古3 小时前
OpenLayers地图交互 -- 章节四:修改交互详解
前端·javascript·vue.js
深耕AI4 小时前
【9/10】前端认证整合:Vue.js 中处理 JWT,实现登录页面和受保护路由
前端·javascript·vue.js
摩羯座-185690305947 小时前
VVIC 平台商品详情接口高效调用方案:从签名验证到数据解析全流程
java·前端·数据库·爬虫·python