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

一，去官网下载最新的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>

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

SuperMap GIS 9D(2019)产品白皮书_V2018Q4R1
SuperMap GIS 9D(2019)是超图软件研发的全面拥抱大数据的新一代GIS平台软件,提供功能强大的云GIS应用服务器SuperMap iServer.云GIS门户服务器SuperMap ...
views 多个文件夹 netcore_Visual Studio 2019发布.NET Core项目部署或者独立运行的方法...
Visual Studio 2019发布.NET Core项目部署或者独立运行的方法 Visual Studio 2019是一款专为程序开发人员设计,支持 Windows 和 Mac系统,适用范围广, ...
微软SQLServer官方示例项目部署-数据引擎和分析服务部分
微软SQLServer每个版本都会带有相应的示例项目,从2000时的Foodmart到2005之后的Adventure Works,里面的设计方法和规范都有很多我们值得学习的地方.不仅是做普通的开发, ...
【COCOS2D-HTML5 开发之三】示例项目附源码及运行的GIF效果图
本站文章均为李华明Himi 原创,转载务必在明显处注明:(作者新浪微博: @李华明Himi ) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/coc ...
【超图】SuperMap iClient3D 11i for WebGL新产品食用指南(一)
作者:taco 前言: 为了做到日更博主,或者周更博主.准备开一个新坑来提高我的动力.使用超图的webgl产品也大概有一两年左右了,就在前两天看到超图官网更新了新版本的webgl产品,肯定是马不停蹄就 ...
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务申请天地图开发者 token 读懂能力文 ...
SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效
SuperMap iClient3D for WebGL教程粒子特效-基础火焰特效粒子特效简介使用粒子特效完整代码作者: NIck Cheng 粒子特效简介粒子特效通常使用与要表现某些动态 ...
SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效
SuperMap iClient3D for WebGL教程粒子特效-扩展喷泉特效扩展喷泉特效喷泉特效实现完整代码作者: NIck Cheng 扩展喷泉特效之前的博客已经讲过了如何去生成一 ...
SuperMap iClient3D for WebGL教程（影像篇）-Mapbox
作者:为梦齐舞本文同步更新于简书文章https://www.jianshu.com/p/e19129908252 Mapbox 是一个可以创建各种自定义地图的网站,如 foursquare.Pint ...

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

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

最新文章

热门文章