@szgc-graph/mfair-cesium-jssdk v0.1.5

Cesium 模飞封装

快速上手

引入

import CesiumFair from '@hansotech/mfair-wsp-mod-cesium-jssdk' 

API

初始化

const mapIns = new CesiumFair(container, option);

Options 类型参考

{
  // 切换投影模式（cesium自带）
  sceneModePicker?: boolean; //模式切换按钮

  fullscreenButton?: boolean;//右下角的全屏按钮

  imageryLayers?: Array<ImageryTile | ImageryWms>; // 瓦片

  /** 构建参数: see {@link https://cesium.com/learn/cesiumjs/ref-doc/CesiumTerrainProvider.html} */
  terrain?: any; // 地形

  location?: CesiumLocation; // 初始化位置

  depthTestTerrain?: boolean; // 开启深度缓冲
  globeTransparent?: boolean;  // 地球透明开关
  cameraCollision?: boolean; // 相机和地形碰撞开关

  tiles3d?: Array<Tile3DOption>; // 3dtile 数据

  useBrowserRecommendedResolution?: boolean;

  shouldAnimate?: boolean; // 默认开启动画
}

使用示例

const config = {
    imageryLayers: [
        {
            type: 'tile',
            option: {
                url: 'http://www.example.com/{z}/{x}/{y}.webp',
                // 这里需要替换成你自己的瓦片地址
                enablePickFeatures: false,
            },
        },
    ],
    terrain: {
        url: 'TERRAIN_URL',
        // 这里需要替换成你自己的地形地址
    },
    depthTestTerrain: true,
    location: {
        center: [113.1433, 23.103, 2500],
        pitch: -90,
    },
    controlAsMapbox: true,
    tiles3d: [
        {
            option: {
                // 这里替换成你的3dtile 地址
                // 3dtile 可一次性加载多个
                url: 'OBLIQUE_URL',
            },
            location: false,
            // 是否聚焦到该图层
        }
    ],
}
const cesiumFair = new CesiumFair(document.getElementById('app'), config);

销毁

cesiumFair.destroy()

监听点击事件

cesiumFair.on('click', ({ feature, location }) => {
    // feature为拾取对象
    // location为拾取位置
})