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);
}


/**
 * 事件类型
 */
export const EventType = {
    'LEFT_DOWN': Cesium.ScreenSpaceEventType.LEFT_DOWN,
    'LEFT_UP': Cesium.ScreenSpaceEventType.LEFT_UP,
    'LEFT_CLICK': Cesium.ScreenSpaceEventType.LEFT_CLICK,
    'LEFT_DOUBLE_CLICK': Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
    'RIGHT_DOWN': Cesium.ScreenSpaceEventType.RIGHT_DOWN,
    'RIGHT_UP': Cesium.ScreenSpaceEventType.RIGHT_UP,
    'RIGHT_CLICK': Cesium.ScreenSpaceEventType.RIGHT_CLICK,
    'MIDDLE_DOWN': Cesium.ScreenSpaceEventType.MIDDLE_DOWN,
    'MIDDLE_UP': Cesium.ScreenSpaceEventType.MIDDLE_UP,
    'MIDDLE_CLICK': Cesium.ScreenSpaceEventType.MIDDLE_CLICK,
    'MOUSE_MOVE': Cesium.ScreenSpaceEventType.MOUSE_MOVE,
    'WHEEL': Cesium.ScreenSpaceEventType.WHEEL,
    'PINCH_START': Cesium.ScreenSpaceEventType.PINCH_START,
    'PINCH_END': Cesium.ScreenSpaceEventType.PINCH_END,
    'PINCH_MOVE': Cesium.ScreenSpaceEventType.PINCH_MOVE
}

/**
 * 事件处理程序
 */
export class EventHandler {
    static EventType = EventType; // 事件类型
    /**
     * 事件处理程序
     * @param { Cesium.Viewer } viewer - 实例化的Cesium.Viewer对象
     */
    constructor(viewer) {
        this.viewer = viewer;
        this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    }
    /**
     * 
     * @param { Cesium.Cartesian2 } position - 二维笛卡尔坐标
     * @returns { Object } - 返回拾取的结果
     */
    getPick(position) {
        return this.viewer.scene.pick(position);
    }
    /**
     * 设置输入事件
     * @param { Function } action - 回调函数
     * @param { String } type - 事件类型
     */
    setInputAction(action, type) {
        this.handler.setInputAction(action, EventType[type]);
    }    
    /**
     * 移除输入事件
     * @param { String } type - 事件类型
     */
    removeInputAction(type) {
        this.handler.removeInputAction(type);
    }
    /**
     * 销毁事件处理程序
     */
    destroy() {
        this.handler.destroy();
    }
}

/**
 * HTML元素Marker位置渲染
 */
export class CanvasPositionRenderer {
    constructor(viewer) {
        this.viewer = viewer;
    }
    /**
     * 获取屏幕坐标
     * @param { Number } lng - 经度
     * @param { Number } lat - 纬度
     * @param { Number } height - 高度
     * @returns { Cesium.Cartesian2 } - 返回屏幕坐标
     */
    getCanvasPosition(lng, lat, height) {
        const position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
        return this.viewer.scene.cartesianToCanvasCoordinates(position, new Cesium.Cartesian2());
    }
    /**
     * 添加预渲染事件
     * @param { Function } action - 回调函数
     */
    add(action) {
        this.action = action;
        this.viewer.scene.preRender.addEventListener(action);
    }
    /**
     * 移除预渲染事件
     */
    remove() {
        this.viewer.scene.preRender.removeEventListener(this.action);
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容