使用超图功能（一）

一.前言：

这个项目使用超图，引擎是cesium，里面的部分功能是依赖于超图做的，也有cesium原生的。其中，我结合了超图官网的例子，自己写的功能和其他网站的功能，现在供大家参考。
具体功能涉及到以下几类：
1.设置普通标注：画点，线，面
2.分析,测量
3.加载服务:wfs,wms,wmts,scp,地形,geojson
4.与业务耦合的功能

二.具体功能:

1.引入包：

//requirejs配置，该配置路径是基于html的路径，也就是js相当于html的路径
require.config({
    baseUrl: "../static/lib",
    waitSeconds: 150,
    paths: {
        "jquery": "js/jquery.min",
        //suppermap
        'supperMapWebglJquery':'suppermap/examples/webgl/js/jquery.min',
        'supperMapWebglBootstrap':'suppermap/examples/webgl/js/bootstrap.min',
        'supperMapWebglBootstrapSelect':'suppermap/examples/webgl/js/bootstrap-select.min',
        'supperMapCesium':'suppermap/Build/Cesium/Cesium',
        'supperMapSlider':'suppermap/examples/webgl/js/slider',
        'supperMapConfig':'suppermap/examples/webgl/js/config',
        'supperMapTooltip':'suppermap/examples/webgl/js/tooltip',
        'supperMapsSpectrum':'suppermap/examples/webgl/js/spectrum',
        'supperMapHeatmap':'suppermap/examples/webgl/js/heatmap.min',
        //shp
        'shpfile':'js/shpfile',
        'Sandcastle_header':'suppermap/examples/webgl/js/Sandcastle-header',
        //layui
        'layui': 'layui-v2.4.5/layui/layui',
        //bootstrap
        'bootstrap': 'bootstrap-3.3.7-dist/js/bootstrap.min',
        'bootstrapTable': 'bootstrap-table-master/dist/bootstrap-table.min',
        'bootstrapTableZhCN': 'bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min',
        //ztree
        'ztreeCore':'zTree_v3/js/jquery.ztree.core.min',
        'ztreeExcheck':'zTree_v3/js/jquery.ztree.excheck.min',
        'ztreeExedit':'zTree_v3/js/jquery.ztree.exedit',
        //自己封装的工具类
        'util':'../js/util/util',
        //mainTable封装
        'mainTable':'../js/main_table',
        //mainTree封装
        'mainTree':'../js/main_tree',
        //mainDate封装
        'mainData':'../js/main_data',
        //turf
        'turf':'turf/turf',
        //默认的数据
        'mainData':'../js/main_data',
        //md5
        'md5':'js/md5',
        //wkt
        'terraformer':'js/terraformer',
        'terraformer-wkt-parser':'js/terraformer-wkt-parser',
        //base64
        'base64':'js/base64',
        //大华
        'DHWs':'js/DHWs'
    },
    /**
     * 加载顺序
     */
    shim: {
        'layui': {
            deps: ['jquery']
        },
        'supperMapWebglJquery': {
            deps: ['layui']
        },
        'supperMapWebglBootstrap': {
            deps: ['supperMapWebglJquery']
        },
        'supperMapWebglBootstrapSelect': {
            deps: ['supperMapWebglBootstrap']
        },
        'supperMapConfig': {
            deps: ['supperMapWebglBootstrapSelect']
        },
        'supperMapCesium': {
            deps: ['supperMapConfig']
        },
        'supperMapTooltip': {
            deps: ['supperMapCesium']
        },
        'supperMapsSpectrum': {
            deps: ['supperMapTooltip']
        },

        'Sandcastle_header':{
            deps:['supperMapsSpectrum']
        },
        'supperMapHeatmap':{
            deps:['Sandcastle_header']
        },
        'shpfile':{
            deps:['supperMapHeatmap']
        },
        'terraformer': {
            deps: ['shpfile']
        },
        'terraformer-wkt-parser': {
            deps: ['terraformer']
        },
        'ztreeCore': {
            deps: ['supperMapCesium']
        },
        'ztreeExcheck': {
            deps: ['ztreeCore']
        },
        'ztreeExedit': {
            deps: ['ztreeExcheck']
        },
        'mainTree':{
            deps:['ztreeExedit']
        },
        'bootstrap': {
            deps: ['mainTree']
        },
        'bootstrapTable': {
            deps: ['bootstrap']
        },
        'bootstrapTableZhCN': {
            deps: ['bootstrapTable']
        },
        //table业务
        'mainTable':{
            deps:['bootstrapTableZhCN']
        },
        //md5加密
        'md5':{
            deps:['jquery']
        },
        //测量用
        'turf':{
            deps:['mainTable']
        },
        //大华相机
        'DHWs':{
            deps:['mainTable']
        },
    }
});

2.创建环境：

//创建一个对象，用来封装cesium对象
window.supperMap = {
			viewer:null,
			scene:null,
	        /**
             * 初始化超图，必须运行该函数才能继续使用
             */
            initSupperMap: function () {
                if (typeof Cesium !== 'undefined') {
                    window.startupCalled = true;

                    // //初始化viewer部件
                    var viewer = new Cesium.Viewer('cesiumContainer');
                    viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
                        url: 'https://dev.virtualearth.net',
                        mapStyle: Cesium.BingMapsStyle.AERIAL,
                        key: URL_CONFIG.BING_MAP_KEY
                    }));
                    this.viewer = viewer;
                    supperMap.scene = viewer.scene;
                    supperMap.widget = viewer.cesiumWidget;

                    // 01设置环境光的强度-新处理CBD场景
                    supperMap.scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
                    //移除加载div
                    $('#loadingbar').remove();
                    //可以刷新场景
                    viewer.scene.requestRenderMode = true;
                    // this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 250;//相机的高度的最小值
                    // this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 25000;  //相机高度的最大值
                }
            },
}

2.画点，线，面，广告牌

            /**
             * 画线功能
             * (开始坐标，结束坐标，颜色#ffffff),返回
             * let startPosition = new Cesium.Cartesian3.fromDegrees(116, 36, 0);
				let endPosition = new Cesium.Cartesian3.fromDegrees(117, 36, 0);
             */
            window.supperMap.createPolyLine= function (startPosition, endPosition, color) {
                let id = generateUUID();
                let polyline;
                if (color) {
                    polyline = {
                        positions: [startPosition, endPosition],
                        width: 10,
                        material: new Cesium.PolylineOutlineMaterialProperty({
                            color: color,
                            outline: false,
                        }),
                    }
                } else {
                    polyline = {
                        positions: [startPosition, endPosition],
                        width: 10,
                        material: new Cesium.PolylineOutlineMaterialProperty({
                            color: Cesium.Color.YELLOW,
                            outline: false,
                        }),
                    }
                }
                let entity = {
                    polyline: polyline,
                    id: id
                }
                //添加移动轨迹
                this.viewer.entities.add(entity);
                return id;
            },

            /**
             * 画点
             * new Cesium.Cartesian3.fromDegrees(116,36, 20),#ffffff
             * @returns {string}
             */
            window.supperMap.createPoint= function (position, color) {
                let modelId = generateUUID();
                let point;
                if (!color) {
                    point = {
                        color: Cesium.Color.RED,    //点位颜色
                        pixelSize: 10          //像素点大小
                    };
                } else {
                    point = {
                        color: color,    //点位颜色
                        pixelSize: 10          //像素点大小
                    };
                }
                let model = supperMap.viewer.entities.add({
                    position: position,
                    point: point,
                    id: modelId
                });
                return modelId;
            },

            /**
             * 画面
             * [116.52933362227941,
				 35.34658547965198,
				 116.53154851848105,
				 35.32930436742893,
				 116.5387908411577,
				 35.329753321645185,
				 116.53764011563959,
				 35.34654115069191,
				116.53764011563959,
				 35.34654115069191,
				 116.52933362227941,
				 35.34658547965198],
				 5,#ffffff
             */
            window.supperMap.createPolygon= function (positionList, height, color) {
                if (height == null) {
                    height = 1;
                }
                let modelId = generateUUID();
                let model = supperMap.viewer.entities.add({
                    polygon: {
                        hierarchy: Cesium.Cartesian3.fromDegreesArray(positionList),
                        material: Cesium.Color.fromBytes(40.0, 140.0, 0.0, 500),
                        height: height,//高度必填，否则边线不显示
                        outline: true,
                        outlineColor: Cesium.Color.GREY,
                    },
                    id: modelId
                });
                return modelId
            },
                 /**
                 * 创建广告牌
                 * @param position
                 * @param imgUrl
                 * @param text
                 * @returns {string}
                 */
                createBillBoard: function (position, imgUrl, text, color, id, func) {
                    if (!id) {
                        id = generateUUID();
                    }
                    // let billboard=null;
                    // let label=null;
                    let entity = {
                        position: position,
                        id: id,
                        // name:'测试'
                    }
                    if (text && color) {
                        let pinBuilder = new Cesium.PinBuilder();
                        entity.billboard = {
                            image: pinBuilder.fromText(text, Cesium.Color.fromCssColorString(color), 48).toDataURL(),
                            width: 30,
                            height: 40,
                        }
                        if (func) {
                            entity.func = function () {
                                func();
                            }
                        }
                        supperMap.viewer.entities.add(entity);
                        return id;
                    } else if (imgUrl) {
                        entity.billboard = {
                            image: imgUrl,
                            width: 30,
                            height: 40,
                        }
                        if (func) {
                            entity.func = function () {
                                func();
                            }
                        }
                        supperMap.viewer.entities.add(entity)
                        return id;
                    } else {
                        return null;
                    }
                },