（一）关于cesium地图的使用：初始化cesium对象

1、引入Cesium，我是采用vue框架实现，采用npm安装。引入的Cesium以及后面的Cesium对象，我是放到window上的，也可以放到vue的data里面。

window.Cesium = require("cesium/Cesium");
import widget from "cesium/Widgets/widgets.css";

2、创建dom

<div id="mapContainer"></div>

3、初始化cesium对象，对象可以挂载到window，也可放到data里面。

// 初始化地图
        initViewer(longitude,latitude,height) {
            Cesium.Ion.defaultAccessToken =
                    "xxxxxxxxxxxxxxxxxxxxx";
            let viewer = new Cesium.Viewer("mapContainer", {
                baseLayerPicker: false,
                geocoder: false, //是否显示地名查找控件
                homeButton: false,
                sceneModePicker: false, //是否显示投影方式控件
                selectionIndicator: false,
                baseLayerPicker: false, //是否显示图层选择控件
                navigationHelpButton: false, //是否显示帮助信息控件
                animation: false, // 是否显示动画控件
                // creditContainer: "credit",
                timeline: false, //是否显示时间线控件
                fullscreenButton: false,
                vrButton: false,
                infoBox: false, //是否显示点击要素之后显示的信息
                // requestRenderMode: true, //启用请求渲染模式
                scene3DOnly: true, //每个几何实例将只能以3D渲染以节省GPU内存
                sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
                imageryProvider: new Cesium.WebMapTileServiceImageryProvider(
                    {
                        url:
                            "http://t0.tianditu.gov.cn/img_w/wmts?tk=b6b320a7ccfabfdc30536330efc07f3e",
                        layer: "img",
                        style: "default",
                        tileMatrixSetID: "w",
                        format: "tiles",
                        maximumLevel: 18,
                    }
                ),
            });
            // this.viewer = viewer;
            window.viewer = viewer;
            window.viewer._cesiumWidget._creditContainer.style.display =
                "none";
            window.viewer.scene.globe.depthTestAgainstTerrain = false; //图标被遮挡
            window.viewer.scene.fxaa = false;

            // 设置后当相机高度达到设置的最大和最小高度时将不再放大和缩小
            window.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0; //相机的高度的最小值
            window.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000; //相机高度的最大值

            // 天地图矢量标注图层
            this.tdtImgAnnoLayer = window.viewer.imageryLayers.addImageryProvider(
                this.tdtImgAnnoLayerProvider
            );
            window.viewer.imageryLayers.raiseToTop(this.tdtImgAnnoLayer);

            this.infoWindow = this.setInfoWindow("resource");
            this.infoWindow.initTool(window.viewer.cesiumWidget.container);
            // TooltipDiv.initTool(window.viewer.cesiumWidget.container);
            // TooltipDiv.setVisible(false);

            // 定位到中心点
            this.flyTo([Number(longitude), Number(latitude)], height,0);

            // 关闭双击事件
            window.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
                Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
            );
            //地图鼠标移动事件：鼠标移入广告牌显示小手，显示title
            this.addMouseListener();
            //地图鼠标左键单击事件：打开资源详情
            this.addMouseClick();
            // 地图鼠标右键点击事件
            this.addMouseRightClick();
            //监听地图相机高度
            this.addCarmeraListener();
            //地图移动事件监听
            this.addViwerListener();
        },

4、地图各个监听事件

// 地图移动事件
addViwerListener(){
    let that = this,
    oldCanvasPosition = null,
    flag = null;
    var scratch = new Cesium.Cartesian2();
    window.viewer.scene.postRender.addEventListener(() => {
        // 地图移动执行的逻辑

    });
},

// 鼠标移入事件
    addMouseListener(){
    let that = this;
            const handler = new Cesium.ScreenSpaceEventHandler(
                window.viewer.scene.canvas
            );
            handler.setInputAction(function (movement) {
                const pickedObject = window.viewer.scene.pick(
                    movement.endPosition
                );
                var pickedEntity = Cesium.defined(pickedObject)
                    ? pickedObject.id
                    : undefined; //pick.id即为entity
                //鼠标移入广告牌显示小手 广告牌或者聚合类
                if (
                    (pickedEntity && pickedEntity._billboard) ||
                    (pickedEntity && pickedEntity.length > 0)
                ) {
                    document.getElementsByTagName("body").item(0).style.cursor =
                        "pointer";
                } else {
                    document.getElementsByTagName("body").item(0).style.cursor =
                        "default";
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        },
// 鼠标左键点击事件
        addMouseClick(){
            let that = this;
            window.viewer.screenSpaceEventHandler.setInputAction(function (movement) {
                
            },Cesium.ScreenSpaceEventType.LEFT_CLICK);
        },
// 鼠标右键点击事件
        addMouseRightClick(){
            let that = this;
            window.viewer.screenSpaceEventHandler.setInputAction(function (movement){
                
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
        },