将SuperMap iClient3D 9D(2019) for WebGL示例项目部署到iserver服务器上

叁歲伎倆 2021-09-29 12:06 235阅读 0赞

一，去**官网下载****最新的SuperMap iClient3D 9D(2019) for WebGL产品包**

**下载链接：**[http://support.supermap.com.cn:8090/webgl/download.html][http_support.supermap.com.cn_8090_webgl_download.html]   推荐选择：9D(2019) 正式版

![20190712103419924.png][]

二，**官网下载****最新的iServer产品包，部署、启动**

**下载**：点选“***[云GIS][GIS]***”→“SuperMap iServer 9D(2019)”→“(V9.1.0)”→“***[SuperMap iServer 9D(2019) for Windows(64位)(Deploy包)][SuperMap_iServer_9D_2019_ for Windows_64_Deploy]***”

**部署**：将 SuperMap iClient3D 9D(2019) for WebGL产品包解压放到路径\\supermap-iserver-9.1.0-win64-deploy\\webapps路径下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

**启动**：打开IE浏览器（注意：qq浏览器，火狐浏览器，谷歌浏览器貌似都打不开），输入地址：[http://localhost:8090/SuperMap\_iClient3D\_9D(2019)\_for\_WebGL\_chs/examples/examples.html\#layer][http_localhost_8090_SuperMap_iClient3D_9D_2019_for_WebGL_chs_examples_examples.html_layer]

可以直接打开示范程序的主页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

输入地址：[http://localhost:8090/SuperMap\_iClient3D\_9D(2019)\_for\_WebGL\_chs/examples/editor.html\#Polyline][http_localhost_8090_SuperMap_iClient3D_9D_2019_for_WebGL_chs_examples_editor.html_Polyline]

可打开“线型”范例界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

输入：[http://localhost:8090/SuperMap\_iClient3D\_9D(2019)\_for\_WebGL\_chs/examples/editor.html\#migration][http_localhost_8090_SuperMap_iClient3D_9D_2019_for_WebGL_chs_examples_editor.html_migration]

可打开“人口迁移流地图”范例界面。（注意：这个范例在下载的产品包中是不能直接打开的，必须要部署到服务器上才能打开）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

根据上面的官方示例，我精简了一下，做了如下demo：

![201907161024172.gif][]

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <title>人口流动三维地图</title>
        <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <link href="./css/pretty.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/config.js"></script>
        <script src="./js/tooltip.js"></script>
        
        <script src="./data/migration.js"></script>
        <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
    </head>
    <body>
    <div id="cesiumContainer"></div>
    <div id='loadingbar' class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
    
    <script type="text/javascript">
        function onload(Cesium) {
            try{
                let viewer = new Cesium.Viewer('cesiumContainer', {
                    infoBox: false,
                    selectionIndicator: false
                });
                let scene = viewer.scene;
                scene.imageryLayers.removeAll(true);
                scene.globe.baseColor = new Cesium.Color(0.0, 0.0, 0.0, 1.0); // 没有影像时地球的基础颜色，默认为蓝色
                scene.skyBox.show = false;
                scene.globe.depthTestAgainstTerrain = false;
    
                let promiseBaseLayer = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_WORLD_COUNTRY_VECTOR, {
                    name: "baseLayer"
                });
                promiseBaseLayer.then(function(layer){
                    scene.camera.setView({
                        destination : new Cesium.Cartesian3(-4511826.162646529, 16838364.473915376, 10064576.385825634),
                        orientation : {
                            heading : 6.283185307179586,
                            pitch : -1.5707963267948966,
                            roll : 0
                        }
                    });
                
    				generateMigrationMap1(viewer);
    
                    $('#loadingbar').remove();
                });
            }catch(e){
                console.log(e);
            }
        }
    
        function generateMigrationMap1(viewer){
        	    viewer.entities.removeAll();
    			let startName = '起始点';
                let destinationName = '终止点';
                let migrationNumber = 200.0;
    
                let startPt = Cesium.Cartesian3.fromDegrees(50.0, 50.0, 0.0);
                let endPt = Cesium.Cartesian3.fromDegrees(100.0, 80.0, 0.0);
                
                let curLinePointsArr = generateCurve(startPt, endPt);
               
                viewer.entities.add({ // 背景线
                    description: 'background-line',
                    name: startName + ' -> ' + destinationName + ' ' + migrationNumber + '人',
                    polyline: {
                        width: 3,
                        positions: curLinePointsArr,
                        material: new Cesium.PolylineDashMaterialProperty({
                            color: new Cesium.Color(255 / 255, 249 / 255, 0, 0.5)
                        })
                    }
                });
    
                viewer.entities.add({ // 尾迹线
                    description: 'trail-line',
                    name: startName + ' -> ' + destinationName + ' ' + migrationNumber + '人',
                    polyline: {
                        width: 5,
                        positions: curLinePointsArr,
                        material: new Cesium.PolylineTrailMaterialProperty({ // 尾迹线材质
                            color: Cesium.Color.fromCssColorString("rgba(118, 233, 241, 1.0)"),
                            trailLength : 0.2,
                            period : 5.0
                        })
                    }
                });
    
                viewer.entities.add({ // 起点
                    description: 'start-point',
                    name: startName,
                    position: Cesium.Cartesian3.fromDegrees(data_geo[startName][0], data_geo[startName][1]),
                    point: {
                        color: new Cesium.Color(255 / 255, 249 / 255, 0, 1),
                        pixelSize: 5
                    }
                });
    
                viewer.entities.add({ // 终点
                    description: 'end-point',
                    name: destinationName,
                    position: Cesium.Cartesian3.fromDegrees(data_geo[destinationName][0], data_geo[destinationName][1]),
                    point: {
                        color: new Cesium.Color(251 / 255, 7 / 255, 0, 0.7),
                        pixelSize: 10
                    }
                });
               
        }
    	
        /**
         * 生成曲线来表达国家间的人口流动曲线
         * @param startPoint 起点
         * @param endPoint 终点
         * @returns {Array}
         */
    
    //startPoint 是Cartesian3类型的
        function generateCurve(startPoint, endPoint){
            let addPointCartesian = new Cesium.Cartesian3();
            Cesium.Cartesian3.add(startPoint, endPoint, addPointCartesian);
            
            let midPointCartesian = new Cesium.Cartesian3();
            Cesium.Cartesian3.divideByScalar(addPointCartesian, 2, midPointCartesian);
            let midPointCartographic = Cesium.Cartographic.fromCartesian(midPointCartesian);
            midPointCartographic.height = Cesium.Cartesian3.distance(startPoint, endPoint) / 4;
            
          
            let midPoint = new Cesium.Cartesian3();
            Cesium.Ellipsoid.WGS84.cartographicToCartesian(midPointCartographic, midPoint);
    
            let spline = new Cesium.CatmullRomSpline({
                times: [0.0, 0.5, 1.0],
                points: [startPoint, midPoint, endPoint]
            });
            let curvePointsArr = [];
            for(let i = 0, len = 300; i < len; i++){
                curvePointsArr.push(spline.evaluate(i / len));
            }
            return curvePointsArr;
        }
    </script>
    </body>
    </html>

[http_support.supermap.com.cn_8090_webgl_download.html]: http://support.supermap.com.cn:8090/webgl/download.html
[20190712103419924.png]: /images/20210725/a085e6525cc842cd8fe335893fdaf4e8.png
[GIS]: http://support.supermap.com.cn/product/iServer.aspx
[SuperMap_iServer_9D_2019_ for Windows_64_Deploy]: http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id=981
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/8562bc7f47f847afbd80fd69caeb2a97.png
[http_localhost_8090_SuperMap_iClient3D_9D_2019_for_WebGL_chs_examples_examples.html_layer]: http://localhost:8090/SuperMap_iClient3D_9D%282019%29_for_WebGL_chs/examples/examples.html#layer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/9633625166b34cc98a87c6c1a244f3e1.png
[http_localhost_8090_SuperMap_iClient3D_9D_2019_for_WebGL_chs_examples_editor.html_Polyline]: http://localhost:8090/SuperMap_iClient3D_9D%282019%29_for_WebGL_chs/examples/editor.html#Polyline
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/dd7b0527ff4f45c99533e86d65c4a1c9.png
[http_localhost_8090_SuperMap_iClient3D_9D_2019_for_WebGL_chs_examples_editor.html_migration]: http://localhost:8090/SuperMap_iClient3D_9D%282019%29_for_WebGL_chs/examples/editor.html#migration
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/6e89b588d1024e4e8e94b2f606b201d5.png
[201907161024172.gif]: /images/20210725/af77a3e2768341138aed8ca5411c36fe.png