cessium加载 自定义高程数据发布 全

cessium加载 自定义高程数据发布 2023.12.13

废话不多说，直接上代码

let viewer = null;

onMounted(() => {
  initCesium();
});

const initCesium = async () => {
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MzU4NzcwYS0yYjhjLTQ3ZTYtOGM4OC0yMjViMzg5YWNiM2MiLCJpZCI6MTgxMzU5LCJpYXQiOjE3MDE3MDIxNTd9.nMroTGyH";//需要自己申请，

  viewer = new Cesium.Viewer("scene", {
    infoBox: false,
    // 自定义地形服务
    terrainProvider: await Cesium.CesiumTerrainProvider.fromUrl(
      "/terrain",
      {
        requestVertexNormals: true,
      }
    ),
  });
  viewer.camera.flyTo({
    // 60.2944061 174.7965453
    // 114.311582,30.598467
    destination: Cesium.Cartesian3.fromDegrees(117.135328, 31.828807, 120.0),
    orientation: {
      heading: Cesium.Math.toRadians(20.0),
      pitch: Cesium.Math.toRadians(-35.0),
      roll: 0,
    },
    easingFunction: Cesium.EasingFunction.CUBIC_IN,
  });
};

注释：上面的terrainProvider 的加载方式有原来的直接写进入到最新版的异步引入 具体可以看官网例子和api 多看api

怎么获取url 呢，

直接使用 cesiumlab g工具地址 的地址可行，记得url 不到layer.json

 terrainProvider: await Cesium.CesiumTerrainProvider.fromUrl(
      "http://localhost:9003/terrain/AYdv7hQE",
      {
        requestVertexNormals: true,
      }

上面cesiumlab 给的url 是http://localhost:9003/terrain/AYdv7hQE/json 打不开 ，，去掉直接可以打开

但是我要演示，不可能在本地使用吧

当然使用我们熟悉的本地跨域代理了，，
我的高程数据文件格式如下，废话

然后再本地一个nginx 服务 使用8088端口
配合我们熟悉的跨域代理

export default defineConfig({
  plugins: [vue(), cesium()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  server: {
    port: 3000,
    open: true,
    cors: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      '/terrain': {
        target: 'http://localhost:8088',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/terrain/, '')
      }
    }
  }
})

是不是很熟悉，，这回不用cessiumlab 给的url 也能发布http 服务了，
进而，可以在线上使用。。。。

收工，吃饭