Cesium 简单使用

依赖

cesium

基础变量

    // 外部服务基础url
    var baseUrl = 'http://localhost:8093';
    // cesiumlab切片地址
    var mapUrl = baseUrl + '/Earth/{z}/{x}/{y}.jpg';
    // cesiumlab切片地址
    var mapUrl1 = baseUrl + '/cesiumKlmy/{z}/{x}/{y}.png';
    // 项目中心位置
    var mapCenter = [85.03257700820414, 45.600000206741775];
    // 4326
    var simpleScheme = new Cesium.GeographicTilingScheme();

创建地图

   // 创建地图实例
    var viewer = new Cesium.Viewer("cesiumContainer", {
   
   
        sceneMode: Cesium.SceneMode.SCENE2D, // 默认二维
        animation: false, // 动画小组件
        baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
        fullscreenButton: false, // 全屏组件
        vrButton: false, // VR模式
        geocoder: false, // 地理编码（搜索）组件
        homeButton: true, // 首页，点击之后将视图跳转到默认视角
        infoBox: false, // 信息框
        sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, // 时间轴
        navigationHelpButton: false, // 帮助提示，如何操作数字地球。
        // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
        navigationInstructionsInitiallyVisible: false,
        orderIndependentTranslucency: false, //去掉大气层黑圈
        imageryProvider: new Cesium.SingleTileImageryProvider({
   
   
            url: baseUrl + '/Cesium/R-C.jpg'
        }),
        contextOptions: {
   
   
            webgl: {
   
   
                alpha: true,
            }
        },
    });

    // 获取 事件拦截
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    // 移除底图
    viewer.imageryLayers.removeAll();
    viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("#7f7f7f");
    viewer.scene.skyBox.show = false;
    viewer._cesiumWidget._creditContainer.style.display = "none"
    // 抗锯齿
    viewer.scene.fxaa = true
    viewer.scene.postProcessStages.fxaa.enabled = true

添加图层

    viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
   
   
            url: mapUrl,
            fileExtension: 'jpg',
            maximumLevel: 0,
            tilingScheme: simpleScheme //设置4326
        })
    )
    viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
   
   
            url: mapUrl1,
            fileExtension: 'png',
            maximumLevel: 21,
            tilingScheme: simpleScheme //设置4326
        })
    )

事件

绑定鼠标事件

    /**
    * 鼠标左键事件监听
    * @param myFunc普通回调，myFunc2点击实体回调 回调 
    */
    function mouseLeftClick(myFunc = null, myFunc2 = null) {
   
   
        var that = this
        let viewer = that.viewer
        handler.setInputAction(function (evt) {
   
   
            // 点击处的坐标
            let x_y = [evt.position.x, evt.position.y]
            console.log("x_y:", x_y)

            //将像素位置转为经纬度
            let earthPosition = viewer.camera.pickEllipsoid(evt.position, viewer.scene.globe.ellipsoid);
            let cartographic = Cesium.Cartographic.<