Cesium 的一些工具


/**
 * 加载高德地图
 * @param { string } style - 高德地图样式 默认 6 参数: 6(影像), 7(矢量) 8(标注)
 * @returns { Promise } - 返回高德地图加载的Promise
 */
export function loadAMap(viewer, style = 6) {
    return viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
            url: `http://webst0{s}.is.autonavi.com/appmaptile?style=${style}&x={x}&y={y}&z={z}&lang=zh_cn&size=1`,
            subdomains: ['1', '2', '3', '4'],
            tilingScheme: new Cesium.WebMercatorTilingScheme(),
            maximumLevel: 18
        })
    )
}

/**
 * 加载天地图
 * @param { Cesium.Viewer } viewer - 天地图视图
 * @param { string } layer - 天地图图层(_c: 中国 _w: 世界 ) 默认 img layer: vec(矢量底图) | cva(矢量注记) | img(影像底图) | cia(影像注记) | ter(地形晕渲) | cta(地形注记) | ibo(全球境界) 
 * @param { string } key - 天地图密钥
 * @returns { Cesium.WebMapTileServiceImageryProvider } - 返回天地图图层提供者
 */
export function loadTianDiTu(viewer, { layer = 'img', key }) {
    return viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
            url: `http://t{s}.tianditu.gov.cn/${layer}_w/wmts?tk=${key}`,
            layer: layer,
            style: 'default',
            format: 'tiles',
            tileMatrixSetID: 'w',
            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            tilingScheme: new Cesium.WebMercatorTilingScheme(),
            maximumLevel: 16
        })
    )
}

/**
 * 拾取椭球体位置
 * @param { Cesium.Viewer } viewer 
 * @param { Cesium.Cartesian2 } position - 二维笛卡尔坐标
 * @returns { Cesium.Cartesian3 } - 返回拾取的笛卡尔坐标
 */
export function pickEllipsoid(viewer, position) {
    return viewer.camera.pickEllipsoid(position, viewer.scene.globe.ellipsoid);
}

/**
 * 拾取地形位置
 * @param { Cesium.Viewer } viewer 
 * @param { Cesium.Cartesian2 } position - 二维笛卡尔坐标
 * @returns { Cesium.Cartesian3 } - 返回拾取的笛卡尔坐标
 */
export function pickTerrain(viewer, position) {
    const ray = viewer.scene.camera.getPickRay(position);
    return viewer.scene.globe.pick(ray, viewer.scene);
}

/**
 * 拾取瓦片位置
 * @param { Cesium.Viewer } viewer 
 * @param { Cesium.Cartesian2 } position - 二维笛卡尔坐标
 * @returns { Cesium.Cartesian3 } - 返回拾取的笛卡尔坐标
 */
export function pickTile(viewer, position) {
    return viewer.scene.pickPosition(position);
}

/**
 * 拾取椭球体位置
 * @param { Cesium.Viewer } viewer 
 * @param { Cesium.Cartesian3 } position - 二维笛卡尔坐标
 * @returns { Cesium.Cartographic } - 返回拾取的地理坐标
 */
export function toCartographic(viewer, position) {
    return Cesium.Cartographic.fromCartesian(position, viewer.scene.globe.ellipsoid);
}

/**
 * 获取经纬度坐标
 * @param { Cesium.Viewer } viewer 
 * @param { Cesium.Cartesian2 } position - 二维笛卡尔坐标
 * @returns { object } - 返回拾取的经纬度坐标
 */
export function getPosition(viewer, position) {
    const tilePos = pickTile(viewer, position);
    const terrainPos = pickTerrain(viewer, position);
    const ellipsoidPos = pickEllipsoid(viewer, position);
    const cartographic = toCartographic(viewer, tilePos || terrainPos || ellipsoidPos || new Cesium.Cartesian3(0, 0, 0)) || new Cesium.Cartographic(0, 0, 0);
    return {
        lng: Cesium.Math.toDegrees(cartographic.longitude),
        lat: Cesium.Math.toDegrees(cartographic.latitude),
        height: cartographic.height,
    }
}

/**
 * 获取屏幕中心坐标
 * @param { Cesium.Viewer } viewer - 实例化的Cesium.Viewer对象
 * @returns { object } - 返回屏幕中心的经纬度坐标
 */
export function getScreenCenter(viewer) {
    const { camera, canvas } = viewer;
    const centerPos = new Cesium.Cartesian2(canvas.clientWidth / 2, canvas.clientHeight / 2);
    return getPosition(viewer, centerPos);
}

/**
 * 通过经纬度定位
 * @param { Cesium.Viewer } viewer - 实例化的Cesium.Viewer对象
 */
export function toCoordinate(viewer, { lng, lat, height = 0 }) {
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(lng, lat, height),
        orientation: {
            heading: Cesium.Math.toRadians(0.0),
            pitch: Cesium.Math.toRadians(-90.0),
            roll: 0.0,
        },
    })
}

/**
 * 放大地图
 * @param { Cesium.Viewer } viewer - 天地图视图
 */
export function zoomIn(viewer) {
    const { scene, camera } = viewer;
    const { globe } = scene;
    const { ellipsoid } = globe;
    const { position } = camera;
    camera.zoomIn(ellipsoid.cartesianToCartographic(position).height / 10);
}

/**
 * 缩小地图
 * @param { Cesium.Viewer } viewer - 天地图视图
 */
export function zoomOut(viewer) {
    const { scene, camera } = viewer;
    const { globe } = scene;
    const { ellipsoid } = globe;
    const { position } = camera;
    camera.zoomOut(ellipsoid.cartesianToCartographic(position).height / 10);
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容