【Cesium学习（四）】Cesium初始化map的简单封装

封装初始化map的好处

1、在项目中多个页面调用地图的初始化方法就不需要每次都写一大堆参数，同时支持不同页面的地图设置不同的初始化参数

2、防止传入非cesium api文档的参数字段导致可能产生异常

在项目中创建一个js文件

我是在utils文件夹中创建一个initCesium.js

const CESIUMTOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YmZkZTViZS1kMT。。。';
const cesiumDefaultOptions = {
    animation: false, //是否显示动画控件
    baseLayerPicker: false, //是否显示图层选择控件
    fullscreenButton: false, //是否显示全屏按钮
    vrButton: false, // vr部件
    geocoder: false, // 位置搜索部件
    homeButton: false, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: false, // 二三维切换部件
    timeline: false, //是否显示时间线控件
    navigationHelpButton: false, //是否显示帮助信息控件
    navigationInstructionsInitiallyVisible: false, // 导航说明显示
    scene3DOnly: true, //每个几何实例将只能以3D渲染以节省GPU内存

    shouldAnimate: true,
    // selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型，仅baseLayerPicker设为true有意义
    // imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(), //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
    // selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型，仅baseLayerPicker设为true有意义
    // terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(), //可供BaseLayerPicker选择的地形图层ProviderViewModel数组
    // skyBox: false,  // 配置天空盒子或不显示天空盒子
    // skyAtmosphere: false, // 配置大气或不显示大气

    useDefaultRenderLoop: true, // 控制是否继续渲染
    // targetFrameRate: 30, // 控制渲染帧数
    maximumScreenSpaceError: 64, //屏幕空间最大误差
    showRenderLoopErrors: false, // 报错是否弹出错误
    useBrowserRecommendedResolution: false, // 设置为false使用window.devicePixelRatio属性
    automaticallyTrackDataSourceClocks: false, // 设置成true，使用公共clock对象，设置false，所有功能使用独立clock对象
    contextOptions: {
        webgl: {
            preserveDrawingBuffer: !0,
        },
        // requestWebgl2: true,
    }, // 创建场景时，配置webgl
    sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    // orderIndependentTranslucency: true, // 如果为true且配置支持，则使用顺序无关的透明性。
    // creditContainer: document.getElementById("units"), // 部件容器
    // creditViewport: '', // 提示显示容器
    // dataSources: new Cesium.DataSourceCollection(), // 小部件数据源设置
    // terrainExaggeration: 1.0, // 夸大地形
    shadows: false, // 是否打开阴影
    terrainShadows: Cesium.ShadowMode.DISABLED, // 是否打开地形阴影
    resolutionScale: 1, //清晰度 0-1
    // mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL, // 设置2D地图水平旋转
    // projectionPicker: false, // 设置为true,  ProjectionPicker部件会被创建,    ProjectionPicker：设置地球最佳视角
    // 如果为真，渲染帧只会在需要时发生，这是由场景中的变化决定的。启用可以减少你的应用程序的CPU/GPU使用，并且在移动设备上使用更少的电池，但是需要使用Scene#requestRender在这种模式下显式地渲染一个新帧。在许多情况下，在API的其他部分更改场景后，这是必要的。请参阅使用显式呈现提高性能。
    // 不是特别明白，应该是提高渲染性能的
    requestRenderMode: true, //启用请求渲染模式
    // 如果requestRenderMode为true，这个值定义了在请求渲染之前允许的模拟时间的最大变化。请参阅使用显式呈现提高性能。
    maximumRenderTimeChange: Infinity,

    fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处

    imageryProvider: false,
};
const cesiumOptionsKeys = [
    'animation',
    'baseLayerPicker',
    'fullscreenButton',
    'vrButton',
    'geocoder',
    'homeButton',
    'infoBox',
    'sceneModePicker',
    'selectionIndicator',
    'timeline',
    'navigationHelpButton',
    'navigationInstructionsInitiallyVisible',
    'scene3DOnly',
    'shouldAnimate',
    'clockViewModel',
    'selectedImageryProviderViewModel',
    'imageryProviderViewModels',
    'selectedTerrainProviderViewModel',
    'terrainProviderViewModels',
    'imageryProvider',
    'terrainProvider',
    'skyBox',
    'skyAtmosphere',
    'fullscreenElement',
    'useDefaultRenderLoop',
    'targetFrameRate',
    'showRenderLoopErrors',
    'useBrowserRecommendedResolution',
    'automaticallyTrackDataSourceClocks',
    'contextOptions',
    'sceneMode',
    'mapProjection',
    'globe',
    'orderIndependentTranslucency',
    'creditContainer',
    'creditViewport',
    'dataSources',
    'shadows',
    'terrainShadows',
    'mapMode2D',
    'projectionPicker',
    'blurActiveElementOnCanvasFocus',
    'requestRenderMode',
    'maximumRenderTimeChange',
    'depthPlaneEllipsoidOffset',
    'msaaSamples',
];

/**
 *
 * @params opts.mapId  {string}  地图容器ID
 * @params opts.XXX    {none}    其他参数按照官方文档里的传即可
 * @returns
 */
export function initCesium(opts) {
    let constructorOptions = {};
    let options = { ...cesiumDefaultOptions, ...opts };

    for (let k in options) {
        if (cesiumOptionsKeys.indexOf(k) > -1) {
            constructorOptions[k] = options[k];
        }
    }

    Cesium.Ion.defaultAccessToken = CESIUMTOKEN;

    let viewer = new Cesium.Viewer(options.mapId, {
        ...constructorOptions,
    });

    return viewer;
}

使用

在组件中引入js，然后再页面初始化是调用方法

<script>
import * as Cesium from 'cesium';
import { initCesium } from '../../utils/js/initCesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
let url = 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}';
export default {
    data() {
        return {
            map: {},
        };
    },
    components: {},
    created() {},
    beforeMount() {},
    mounted() {
        this.initMap();
    },
    computed: {},
    methods: {
        initMap() {
            let viewer = initCesium({
                mapId: 'cesiumContainer',
                infoBox: false,
                //> 设置地图
                imageryProvider: new Cesium.UrlTemplateImageryProvider({ url }),
            });
        },
    },
};