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

最新推荐文章于 2024-07-18 10:05:07 发布

疆~

最新推荐文章于 2024-07-18 10:05:07 发布

阅读量1.3k

点赞数

文章标签： Webgl

本文链接：https://blog.csdn.net/qq_40323256/article/details/95595974

版权

SuperMap iClient3D for Webgl 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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

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

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

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

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

启动：打开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/editor.html#Polyline

可打开“线型”范例界面

输入：http://localhost:8090/SuperMap_iClient3D_9D(2019)_for_WebGL_chs/examples/editor.html#migration

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

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

代码如下：

<!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>
    <!-- migration.js为本范例的数据 -->
    <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>