vue + cesium（4）: 地图公共方法及初始化viewer（MyCesium.js）

/*
* 说明:   地图公共方法及初始化viewer
* 日期:   2023/03/17 15:00
*/
import * as Cesium from "cesium/Cesium.js";
import config from './config'
import {$Params} from "./params";
import {rgbaToCesiumColor} from './transform.js'
import {initLoadModel} from './init'
import { infoWindow } from './infoWindow'
export const MyCesium = {
    viewer: undefined,
    handler: undefined,
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: config.mapUrl.tianditu,
        credit: new Cesium.Credit("天地图全球影像服务"),  //数据源属性
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tilingScheme: new Cesium.WebMercatorTilingScheme(),  //指定为经纬度
        maximumLevel: 18,    //最大级别(清晰度)
        enablePickFeatures: false
    }),
    curentEntity:null,   //当前移动的实例
    isDraw: false,  //是否绘制
    curLabelEntity: null,  //当前标注的实例
    highlightFace: undefined,   //高亮feature
    model: null,

    /**
     * 地图初始化
     * @param ele  地图id
     * @returns {boolean}
     */

    init(ele) {
        var tipOverlay = document.createElement('div');
        if (this.viewer) return false
        this.viewer = new Cesium.Viewer(ele, {
            navigationHelpButton: false, //导航帮助按钮
            sceneModePicker: false,  //地图类型选择控件
            navigationInstructionsInitiallyVisible: false,  //导航说明
            animation: false,  //隐藏动画速度控件
            fullscreenButton: false,  //隐藏全屏
            timeline: false,  //隐藏时间轴控件
            vrButton: false, //双屏模式
            geocoder: false,  //隐藏定位搜索控件
            infoBox: false,  //隐藏信息框控件
            homeButton: false, //隐藏返回home控件
            selectionIndicator: true,  //显示选择控件
            imageryProvider: this.imageryProvider,  //天地图图层
            baseLayerPicker: false,  //图层选择控件
            shouldAnimate: true,
            // terrainProvider: Cesium.createWorldTerrain(),
            // showRenderLoopErrors:false,//若为true，将在面板上显示错误信息
        });
        this.viewer.container.appendChild(tipOverlay)
        this.viewer._cesiumWidget._creditContainer.style.display = "none";
        if (this.viewer.sceneModePickviewer) {
            this.viewer.sceneModePicker.viewModel.tooltip3D = "三维";
            this.viewer.sceneModePicker.viewModel.tooltip2D = "二维";
            this.viewer.sceneModePicker.viewModel.tooltipColumbusView = "哥伦布视图";
        }
        this.viewer.scene.globe.depthTestAgainstTerrain = false;  //默认false

        //鼠标事件
        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
        this.viewer.screenSpaceEventHandler.setInputAction(function () { }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
       
        //注册事件弹框
        infoWindow({ viewer: this.viewer }).openWindow()
    },
    /**
     * 二三维切换
     * @param mode（3D/2D）
     */
    morphSwitch(mode) {
        let morphTo = 'morphTo' + mode
        this.viewer.scene[morphTo](0);//二维
        // this.setCenter();
        this.viewer.scene.primitives.show = mode == '2D' ? false : true;
        this.viewer.imageryLayers.removeAll();
        let imageArr = {
            '2D' : [
                {
                    url: "https://{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=天地图key",
                    credit: new Cesium.Credit("天地图全球影像服务"),
                    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tilingScheme: new Cesium.WebMercatorTilingScheme(),
                    maximumLevel: 18,
                    enablePickFeatures: false,
                    show: false
                },
                {
                    url: "https://{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=天地图key",
                    credit: new Cesium.Credit("天地图全球影像服务"),
                    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tilingScheme: new Cesium.WebMercatorTilingScheme(),
                    maximumLevel: 18,
                    enablePickFeatures: false,
                }
            ],
            '3D': [{
                url: "https://{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=天地图key",
                credit: new Cesium.Credit("天地图全球影像服务"),
                subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tilingScheme: new Cesium.WebMercatorTilingScheme(),
                maximumLevel: 18,
                enablePickFeatures: false,
            }]
        }
        imageArr[mode].forEach(item => {
            let imagery = new Cesium.UrlTemplateImageryProvider(item)
            this.viewer.imageryLayers.addImageryProvider(imagery);
        })
    },
    /**
     * 设置点击面高亮
     * @param entity
     * @param tag
     * @param id
     */
    hightlightFeature(entity, tag, id) {
        if(!entity && tag) entity = this.lookEntityById(tag, id, true)
        const highlighter = () => {
            var temp = new Array();
            function linehHghtlight(nameId) {
                var exists = temp.indexOf(nameId);
                if (exists <= -1) {
                    temp.push(nameId);
                } else {
                    temp.splice(exists, 1);  //删除对应的nameID
                }
            }
            //判断之前是否有高亮面存在
            if (this.highlightFace) {
                this.highlightFace.material = this.highlightFace.material0;
            }
            entity.polygon.material0 = entity.polygon.material;
            entity.polygon.material = Cesium.Color.WHITE;
            this.highlightFace = entity.polygon;
            if (typeof (entity) != "undefined")  //鼠标是否点到面上
                var id = entity.id;
            linehHghtlight(id);
        }
        const removeHighLighter = () => {
            this.highlightFace.material = this.curentEntity.polygon.material0
        }
        return {
            add: highlighter,
            remove: removeHighLighter,
        }

    },
    /**
     * 显示天地图
     */
    showImageLayer() {
        this.viewer.imageryLayers._layers[0].show = !this.viewer.imageryLayers._layers[0].show
    },
    /**
     * 声明billboards属性
     * @param tag  Billboard类型
     * @returns {{image, disableDepthTestDistancreateBillboardLabel ce: number, width: number, height: number}}
     */
    getBillboardProperty(tag, item) {
        // let imgUrl = tag == 'VideoMonitor' ? (item.isOnline ? require('../../assets/images/device.png') : require('../../assets/images/device-offline.png')) : require('../../assets/images/marker.png')
        // let imgUrl = item.isOnline == 1 ? imgServerUrl + item.onlineImgUrl : imgServerUrl + item.offlineImgUrl
        let imgObj = {
            // 物联设备类型 1-摄像头 2-雷达基站 3-ais基站 4-水质监测基站
            1: {
                onLine: require('../../assets/device/cameraOnline.png'),
                offLine: require('../../assets/device/cameraOffline.png'),
            },
            2: {
                onLine: require('../../assets/device/radar.png'),
                offLine: require('../../assets/device/radar_off.png'),
            },
            3: {
                onLine: require('../../assets/device/AIS.png'),
                offLine: require('../../assets/device/AIS_off.png'),
            },
            4: {
                onLine: require('../../assets/device/waterQualityOnline.png'),
                offLine: require('../../assets/device/waterQualityOffline.png'),
            }
        }
        let imgUrl = item.isOnline == 1? imgObj[item.iotDeviceType].onLine : imgObj[item.iotDeviceType].offLine
        let obj = {
            image: imgUrl,
            disableDepthTestDistance: Number.POSITIVE_INFINITY,  //处理标记遮挡
            width: 20,
            height: 25,
            // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            clampToGround: true,
            classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM

        }
        return obj
    },
    /**
     *静态标记绘制
     * @param tag 当前的类型
     * @param item  当前对象数据
     * @returns {Entity}
     */
    createBillboard(tag, item) {
        let billboardProperty = this.getBillboardProperty(tag, item)
        let billboards = this.dataSource.entities.add(new Cesium.Entity({
            id: item.id,
            position: Cesium.Cartesian3.fromDegrees(item.lon, item.lat, item.height ? item.height : 0),
            billboard: billboardProperty,
            type: 'billboard',
            tag: tag,
            label: {
                text: item.iotDeviceName,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
                // 字体样式，以CSS语法指定字体
                font: '10px sans-serif',
                // 字体颜色
                fillColor: Cesium.Color.WHITE,
                // 背景颜色
                backgroundColor: Cesium.Color.AQUA,
                // 是否显示背景颜色
                showBackground: false,
                // 字体边框
                // outline: false,
                // // 字体边框颜色
                // outlineColor: Cesium.Color.WHITE,
                // // 字体边框尺寸
                // outlineWidth: 10,
                // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
                scale: 1.0,
                // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                // 相对于坐标的水平位置
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                // 相对于坐标的水平位置
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
                pixelOffset: new Cesium.Cartesian2(0, 0),
                // 是否显示
                show: true,
            },
            description: {...item, ...{tag: tag}},
        }));
        return billboards;
    },
    /**
     * 绘制线标注集合
     * @param tag
     * @param item
     * @param parentId
     * @returns {Entity}
     */
    createBillboardLabel(tag, item) {
        let lal = item.lal;
        let imgUrl = require('../../assets/images/marker-water.png')
        let label = this.dataSource.entities.add(new Cesium.Entity({
            position: Cesium.Cartesian3.fromDegrees(item.lon, item.lat, item.height ? item.height : 0),
            billboard: {
                image: imgUrl,
                width: 50,
                height: 60,
                clampToGround: true,
                classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
            },
            id: item.id,
            label: {
                text : 'PH：7.4；水温：21.5℃；油污：无',
                color : Cesium.Color.fromCssColorString('#fff'),
                font : '15px sans-serif',
                horizontalOrigin: Cesium.HorizontalOrigin.TOP,
                verticalOrigin: Cesium.VerticalOrigin.TOP,
                pixelOffset: new Cesium.Cartesian2(0, -90), //偏移量
            },
            type: 'label',
            tag: tag,
            description: {...item, ...{tag: tag}},
        
        }))
        return label;
    },
    /**
     * 静态绘制点
     * @param tag  当前的类型
     * @param item  当前对象数据
     * @returns {Entity}
     */
    createPoint(tag, item) {
        let lal = item && item.lal && item.lal.length > 0 ? item.lal[0] :  null;
        let pointGeometry = this.dataSource.entities.add(new Cesium.Entity({
            id: item.id,
            position: Cesium.Cartesian3.fromDegrees(lal[0] * 1, lal[1] *1,item.height),
            point: {
                color: Cesium.Color.LIMEGREEN ,
                pixelSize: 0,  //点的大小
                // outlineColor: Cesium.Color.YELLOW,  //外边框颜色
                outlineColor: Cesium.Color.AQUA.withAlpha(0.4),  //外边框颜色
                outlineWidth: 0,   //外边框宽度
                disableDepthTestDistance: Number.POSITIVE_INFINITY, //处理标记遮挡
            },
            type: 'point',
            tag: tag,
        }));
        return pointGeometry;
    },

    /**
     * 静态绘制线
     * @param tag  当前的类型
     * @param item   当前对象数据
     * @returns {Entity}
     */
    createPolyline(tag, item) {
        let defaultDrawStyle = {...$Params.PolyLineStyle}
        if(item.lineColor) defaultDrawStyle.material = rgbaToCesiumColor(item.lineColor) //rgbaToCesiumColor(css.fillColor)
        if(item.lineWidth) defaultDrawStyle.width = item.lineWidth * 1 //rgbaToCesiumColor(css.fillColor)
        if(item && item.attrs && item.attrs.hasOwnProperty("css")) {
            let attrs = item.attrs
            if(attrs.css) {
                defaultDrawStyle.material = rgbaToCesiumColor(attrs.css.lineColor) //rgbaToCesiumColor(css.fillColor)
                defaultDrawStyle.width = attrs.css.lineWidth //rgbaToCesiumColor(css.fillColor)
            }
        }
        let lineStyle = {...defaultDrawStyle, ...{positions: Cesium.Cartesian3.fromDegreesArray(item.lal)}}
        let polylineGeometry = this.dataSource.entities.add(new Cesium.Entity({
            id: item.id,
            polyline: lineStyle,
            type: 'line',
            tag: tag,
            description: item
        }))
        return polylineGeometry
    },
    /**
     * 静态绘制面
     * @param tag   当前的类型
     * @param item   当前对象数据
     * @returns {Entity}
     */
    createDrawPolygon(tag, item) {
        console.log(item, 'createDrawPolygon')
        let defaultDrawStyle = {...$Params.PolygonStyle};
        if(item.fillColor) defaultDrawStyle.material = rgbaToCesiumColor(item.fillColor) //rgbaToCesiumColor(css.fillColor)
        if(item.lineColor) defaultDrawStyle.outlineColor = rgbaToCesiumColor(item.lineColor) //rgbaToCesiumColor(css.fillColor)
        if(item.lineWidth) defaultDrawStyle.outlineWidth = item.lineWidth * 1 //rgbaToCesiumColor(css.fillColor)
        let polygonStyle = {...defaultDrawStyle, ...{hierarchy: new Cesium.Cartesian3.fromDegreesArray(item.lal)}}
        let polygonGeometry = this.dataSource.entities.add(
            {
                id: item.id,
                position: Cesium.Cartesian3.fromDegrees(item.lal[0] * 1, item.lal[1] *1, 0),
                polygon: polygonStyle,
                type: 'polygon',
                tag: tag,
                description: item,
                // 文字
                label: {
                    // 文本。支持显式换行符“ \ n”
                    text: item.name,
                    // 字体样式，以CSS语法指定字体
                    font : '10px sans-serif',
                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
                    // 字体颜色
                    fillColor: Cesium.Color.WHITE,
                    // 背景颜色
                    // backgroundColor: Cesium.Color.AQUA,
                    backgroundColor: new Cesium.Color(0.0, 0.0, 0.0, 0.0),
                    // 是否显示背景颜色
                    showBackground: true,
                    // 字体边框
                    // outline: false,
                    // // 字体边框颜色
                    // outlineColor: Cesium.Color.WHITE,
                    // // // 字体边框尺寸
                    // outlineWidth: 10,
                    // // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
                    // scale: 1.0,
                    // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
                    // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    // 相对于坐标的水平位置
                    verticalOrigin: Cesium.VerticalOrigin.CENTER,
                    // 相对于坐标的水平位置
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
                    pixelOffset: new Cesium.Cartesian2(25, 20),
                    // 是否显示
                    show: true
                },
            },
        )
        return polygonGeometry;
    },
    /**
     *  绘制实例集合
     * @param tag   当前的类型
     * @param data   当前数据数组
     */
    addEntitysCollection(tag, data) {
        this.dataSource = this.createDataSourceByTag(tag);
        // this.viewer.dataSources.add(this.dataSource);
        for (var i = 0; i < data.length; i++) {
            if (data[i].type == 1) {  //绘制标记点
                this.createBillboard(tag, data[i])
            } else if (data[i].type == 2) {  //绘制线
                this.createPolyline(tag, data[i])
            } else if (data[i].type == 3) {   //绘制面
                this.createDrawPolygon(tag, data[i])
                
            } else if (data[i].type == 4) {  // 绘制广告牌 + 标注集合
                this.createBillboardLabel(tag, data[i])  // 绘制广告牌 + 标注集合
            } 
        }
    },
    /**
     *  绘制设备实例集合
     * @param tag   当前的类型
     * @param data   当前数据数组
     */
    addDeviceEntitysCollection(tag, data) {
        this.dataSource = this.createDataSourceByTag(tag);
        // this.viewer.dataSources.add(this.dataSource);
        // 物联设备类型集合 1-摄像头 2-雷达基站 3-ais基站 4-水质监测基站
        for (var i = 0; i < data.length; i++) {
            // if (data[i].iotDeviceType == 1) {  //绘制标记点
                this.createBillboard(tag, data[i])
            // } else if (data[i].iotDeviceType == 2) {  //绘制线
            //     this.createPolyline(tag, data[i])
            // } else if (data[i].iotDeviceType == 3) {   //绘制面
            //     this.createDrawPolygon(tag, data[i])
            // } else if (data[i].iotDeviceType == 4) {  // 绘制广告牌 + 标注集合
                // this.createBillboardLabel(tag, data[i])  // 绘制广告牌 + 标注集合
            // } 
        }
    },
    /**
     * 通过tag id  查询entity
     * @param tag
     * @param id
     * @param isFllow  定位zoom
     * @returns {null}
     */
    lookEntityById(tag, id, isFllow) {
        let entity = null
        let item = this.viewer.dataSources.getByName(tag)
        if(item.length > 0) {
            let items = item[0]
            entity = items.entities.getById(id);
        }
        if(isFllow && entity) {
            this.zoomToEntity(entity)
            this.selectEntity(entity)
        }
        return entity
    },
    /**
     * 定位实体
     * @param entity
     */
    zoomToEntity(entity) {
        this.viewer.zoomTo(entity)
    },

    /**
     * cartesian3转经纬度
     * @param cartesian3
     * @returns {(Number|*)[]}
     */
    cartesian3ToDegrees(cartesian3) {
        let ellipsoid = this.viewer.scene.globe.ellipsoid;
        let cartographic = ellipsoid.cartesianToCartographic(cartesian3);
        let lat = Cesium.Math.toDegrees(cartographic.latitude);
        let lng = Cesium.Math.toDegrees(cartographic.longitude);
        let alt = cartographic.height;
        return [lng, lat]
    },
    /**
     * 创建某种类型的数据集合
     * @param tag 当前的类型
     */
    createDataSourceByTag(tag) {
        let _dataSource = new Cesium.CustomDataSource(tag)
        this.viewer.dataSources.add(_dataSource);
        return _dataSource
    },
    /**
     * 获取某种集合
     */
    getDataSourceByTag(tag) {
        this
    },
    /**
     * 是否存在tag 类型的DataSource
     * @param tag  当前的类型
     * @returns {boolean}
     */
    isExistsDataSourceByTag(tag) {
        let dataSource = this.viewer.dataSources.getByName(tag)
        if(dataSource.length > 0) return true
        else return false
    },

    /**
     * 是否显示数据集合
     * @param tag 当前的类型
     */
    isShowEntityCollection(tag) {
        this.viewer.dataSources._dataSources.forEach(item => {
            if (item.name == tag) item.show = !item.show
        })
    },
    /**
     * 清空所有实体
     */
    removeDataSources() {
        this.viewer.dataSources.removeAll()
    },
    /**
     *  移除热力图
     */
    removeEntities() {
        this.viewer.entities.removeAll()
    },
    /**
     *  移除某一个实体
     */
    removeEntityById(tag, id) {
        let item = this.viewer.dataSources.getByName(tag)[0]
        item.entities.removeById(id)
    },
    /**
     * 判断变量是否存在值
     * @param value
     * @returns {boolean|boolean}
     */
    defined(value) {
        return value !== undefined && value !== null;
    },
    /**
     * 定位实体
     * @param value
     */
    selectEntity(value) {
        if (this.viewer.selectedEntity !== value) {
            this.viewer.selectedEntity = value;
            let selectionIndicatorViewModel = this.defined(this.viewer.selectionIndicator) ? this.viewer.selectionIndicator.viewModel : undefined;
            if (this.defined(value)) {
                if (this.defined(selectionIndicatorViewModel)) {
                    selectionIndicatorViewModel.animateAppear();
                    setTimeout(() => {
                        if(this.viewer.selectionIndicator) {
                            let svg = this.viewer.selectionIndicator.viewModel.selectionIndicatorElement.getElementsByTagName('svg:svg')[0];
                            svg.style.display = 'block'
                            svg.style.marginTop = '-20px'
                        }
                    }, 100)
                }
            } else if (this.defined(selectionIndicatorViewModel)) {
                selectionIndicatorViewModel.animateDepart();
            }
            this.viewer.selectedEntityChanged.raiseEvent(value);
        }
    },

    /**
     * 根据id查询entity
     * @param tag
     * @param id
     */
    lookEntity(tag, id) {
        let item = this.viewer.dataSources.getByName(tag)
        console.log('item', item)
        if(item.length > 0) {
            let items = item[0]
            let currentEntity = items.entities.getById(id);
            console.log('currentEntity', currentEntity)
            let postions;
            var model2;
            let centerPoint1 = null
            if(currentEntity) {
                if(currentEntity.position){
                    model2=new Cesium.Entity({
                        position:currentEntity.position._value
                    })
                }else if(currentEntity.polygon || currentEntity.polyline){
                    if(currentEntity.polygon) postions = currentEntity.polygon.hierarchy._value.positions
                    else postions =  currentEntity.polyline.positions.getValue();
                    let newPosttions=[];
                    postions.forEach(item=>{
                        let pp = this.cartesian3ToDegrees(item);
                        let p ={lng:pp[0],lat:pp[1]};
                        newPosttions.push(p);
                    })
                    let centerPoint = this.calculateCenterPoint(newPosttions);
                    centerPoint1 = centerPoint
                    model2=new Cesium.Entity({
                        position:Cesium.Cartesian3.fromDegrees(centerPoint[0],centerPoint[1])
                    })
                }
                this.viewer.zoomTo(currentEntity,
                    {

                        heading: Cesium.Math.toRadians(20),
                        pitch: Cesium.Math.toRadians(-90),
                        range: 500,
                    }
                ).then(res => {
                    // this.viewer.selectedEntity = model2;
                })
                this.selectEntity(model2);
            }

        }
    },

    /**
     * 根据一组点位([纬度，经度])计算出中心点
     * @param pointArray
     * @returns {*[]}
     */
     calculateCenterPoint(pointArray){
        const sortedLongitudeArray=pointArray.map(item=>Number(item.lon)).sort();
        const sortedLatitudeArray=pointArray.map(item=>Number(item.lat)).sort();
        const centerLongitude=((sortedLongitudeArray[0]+sortedLongitudeArray[sortedLongitudeArray.length-1])/2);
        const centerLatitude=((sortedLatitudeArray[0]+sortedLatitudeArray[sortedLatitudeArray.length-1])/2);
        return [centerLongitude,centerLatitude];
    },

    /**
     *移除datasource
     * @param tag
     */
    removeDataSource(tag) {
        this.viewer.dataSources._dataSources.forEach(item => {
            if (item.name == tag) {
                this.viewer.dataSources.remove(item)
            }
        })
    },
    /*
        显示svg选中框
     */
    isShowSelectionIndicator(bool) {
        let svg = this.viewer.selectionIndicator.viewModel.selectionIndicatorElement.getElementsByTagName('svg:svg')[0];
        svg.style.display = bool ? 'block' : 'none'
    },
    createPointee() {
        this.viewer.entities.add({
            name: '点',
            type: "point",
            position: Cesium.Cartesian3.fromDegrees(121.1783503372873, 27.8410203244728),
            point: {
                pixelSize: 5,
                color: Cesium.Color.RED,
                outlineColor: Cesium.Color.WHITE,
                outlineWidth: 2,
            },
            description: {
                name: 'gggg',
                ip: '52.19.98.23',
                state: '888',
            }
        })
    },
    createPolygong() {
       let ss =  this.viewer.entities.add({
            name: '面',
           type: "polygon",
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray([121.17672770105298, 27.84266792430584, 121.17380767587856, 27.84509403528806,
                    121.17244173260276, 27.84350967632169, 121.17587752187254, 27.840680559624595
                ]),
                outline: true,
                outlineWidth: 3,   //外边框宽度
                clampToGround: true,
                height: 1,
                material: Cesium.Color.AQUA.withAlpha(0.4),   //withAlpha  处理透明度
            },
           description: {
               name: 'gggg',
               ip: '52.19.98.23',
               state: '888',
           }
        })
        this.viewer.zoomTo(ss);//缩放、平移视图使实体可见
    },
    createPolygongWidthHeight() {
        let ss =  this.viewer.entities.add({
            name: '面',
            type: "polygon",
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([121.17672770105298, 27.84266792430584, 200, 121.17380767587856, 27.84509403528806, 1000,
                    121.17244173260276, 27.84350967632169, 0,121.17587752187254, 27.840680559624595, 0
                ]),
                perPositionHeight : true, //true利用每个点的高度,制造幅度
                outline: true,
                outlineWidth: 3,   //外边框宽度
                height: 3000,
                // extrudedHeight: 0,   //外边框宽度
                clampToGround: false,
                material: Cesium.Color.AQUA.withAlpha(0.4),   //withAlpha  处理透明度
            },
            description: {
                name: 'gggg',
                ip: '52.19.98.23',
                state: '888',
            }
        })
        this.viewer.zoomTo(ss);//缩放、平移视图使实体可见
    },
    createBillboardss() {
        this.viewer.entities.add({
            name: '广告牌',
            type: "billboard",
            position: Cesium.Cartesian3.fromDegrees(121.18059520326415, 27.840770748596473),
            billboard: {
                image: require('../../assets/images/marker.png'),
                width: 30,
                height: 40,
            },
            description: {
                name: "广告牌",
                id: 6666,
                tag: "VideoMonitor",
                channel: 888
            }
        })
    },
    createPolyliness() {
        this.viewer.entities.add({
            name: '广告牌',
            type: "polyline",
            polyline: {
                material: new Cesium.PolylineDashMaterialProperty({
                    color: Cesium.Color.ORANGE,
                    dashLength: 8.0
                }),
                classificationType: Cesium.ClassificationType.BOTH,
                height: 10,
                width: 5,
                positions: Cesium.Cartesian3.fromDegreesArray([121.17568292666387, 27.844761330195997, 121.17682424181234, 27.843636369864367])
            },

        })
    },
}