vue+cesium封装

1.将cesium.js放在esri/dijit文件夹下

2.将与三维模型有关的js css等都放在dijit下 如Apps,Workers,Widget等文件夹

3.将封装的js(CsmInitViewer.js)放在esri/extras文件夹下

4.vue中调用封装组件

import config from "../config/config"; // 配置项

import {loadModules} from "esri-loader";

import 'cesium'

class CEMap {

    init($el) {

        loadModules(

            [

                "esri/extras/CsmInitViewer",

                "dojo/parser"

            ],

            config.loadConfig

        )

            .then(

                ([

                    CsmInitViewer,

                    Parser

                ]) => {

                    Parser.parse(); // 解析

                    //地图初始化

                    this.civ = new CsmInitViewer();
                    this.civ.constructor($el);
                    this.civ.load_model(aaa,bbb)//你的模型地址
                }

            ) //end

            .catch((err) => {

                console.error(err);

            });

    }

}

export default CEMap

示例封装的js:

var dojoConfig = {
    paths: {
        extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
    }
};
define([
        "dojo/_base/declare",
        "esri/dijit/Cesium"
    ],
    function (declare, Cesium) {
        return declare("GDcesmInitViewer", null, {
            //初始地球
            constructor: function (divId) {
                if (divId == null || divId == "") {
                    return;
                }
                //cesiumViewer对象
                this.cesiumViewer = new Cesium.Viewer(divId, {
                    animation: false,       //动画控制，默认true
                    baseLayerPicker: false, //地图切换控件(底图以及地形图)是否显示,默认显示true
                    scene3DOnly: true,      //设置为true，则所有几何图形以3D模式绘制以节约GPU资源
                    fullscreenButton: false,//全屏按钮,默认显示true
                    geocoder: false,        //地名查找,默认true
                    timeline: false,        //时间线,默认true
                    vrButton: false,        //双屏模式,默认不显示false
                    homeButton: false,      //主页按钮，默认true
                    infoBox: false,         //点击要素之后显示的信息,默认true
                    selectionIndicator: false,//选中元素显示,默认true
                    navigationHelpButton: false,//导航帮助说明,默认true
                    navigationInstructionsInitiallyVisible: false,
                    automaticallyTrackDataSourceClocks: false,//自动追踪最近添加的数据源的时钟设置,默认true
                    terrainExaggeration: 2.0,
                    sceneModePicker: true //是否显示地图2D2.5D3D模式
                });
                var viewer = this.cesiumViewer;
                viewer.scene.globe.depthTestAgainstTerrain = false;
                viewer._cesiumWidget._creditContainer.style.display = "none";
                // 隐藏地球
                viewer.scene.skyBox.show = false;
                viewer.scene.backgroundColor = Cesium.Color.WHITE;
                viewer.scene.sun.show = false;
                viewer.scene.moon.show = false;
                viewer.scene.globe.show = false;
                viewer.scene.skyAtmosphere.show = false;
            },
            //添加模型
            load_model: function (tileset,tileset1) {
                var viewer = this.cesiumViewer;
                //模型
                var tileset = new Cesium.Cesium3DTileset({
                    url: tileset,
                });
                var tileset1 = new Cesium.Cesium3DTileset({
                    url:tileset1,
                });
                this.modelTitle = viewer.scene.primitives.add(tileset1)
                //加载整体模型
               viewer.scene.primitives.add(tileset);
                this.modelTitle.show = true;
                viewer.zoomTo(tileset);
            },
            //模型编辑
            modelSet:function(type){
                switch (type){
                    case 1:
                        this.modelTitle.show = true;
                        break;
                    case 2:
                        this.modelTitle.show = false;
                        break;
                }
            },
            //点击模型弹出弹窗
            seeHandler:function () {
                var viewer = this.cesiumViewer;
                var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
                handler.setInputAction(function (evt) {
                    console.log(evt);
                    var scene = viewer.scene;
                    var pickedObject = scene.pick(evt.position); //判断是否拾取到模型
                    if (scene.pickPositionSupported && Cesium.defined(pickedObject)) {
                        var cartesian = viewer.scene.pickPosition(evt.position);
                        if (Cesium.defined(cartesian)) {
                            var cartographic = Cesium.Cartographic.fromCartesian(cartesian); //根据笛卡尔坐标获取到弧度
                            var lng = Cesium.Math.toDegrees(cartographic.longitude); //根据弧度获取到经度
                            var lat = Cesium.Math.toDegrees(cartographic.latitude); //根据弧度获取到纬度
                            var height = cartographic.height;//模型高度

                            alert('弹窗')
                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
            }
        });
    });