GIS开发|三维GIS开发之cesium教程项目实战03
查询
查询是WebGIS中最常用的核心功能之一，广泛应用于各类项目中。通过对空间和属性要素的查询，提取需要的信息，与地图联动进行展示，满足应用的需求。
查询定位在应用中很常见，根据不同的应用需求，可以选择不同的查询方式、实现方式以及表现方式。查询方式：基于GIS的特性，查询主要包括几何查询、属性条件查询以及两者结合的复合查询，以及OID查询。
几何查询有点击、画线、画圆、拉框、多边形五种操作方式，以操作的空间范围作为限定条件进行查询；
属性条件查询以要素属性限定条件进行查询；
复合查询则是两者的结合，空间范围组合属性条件，统一查询满足要求的空间要素；
OID查询：根据地图要素的唯一标识OID进行查询；
类名/方法名API说明CesiumZondy.Query.MapDocQuery / beginQuery()二维地图文档查询，支持几何、属性、OID查询CesiumZondy.Query.G3DDocQuery / queryG3DFeature()三维模型数据查询，支持几何、属性、OID查询CesiumZondy.Manager.AnalysisManager / startCustomDisplay()M3D单体查询，模型高亮/M3D交互编辑
二维地图文档查询
基于二维地图文档的要素查询，提供几何、属性、OID查询方式，以及复合查询，即查询三维场景中加载的二维地图文档的要素信息，包括要素的几何信息与属性信息。
具体实现：先初始化查询参数CesiumZondy.Query.MapDocQuery类对象，设置查询属性条件等参数后，调用beginQuery()方法进行查询，然后在回调中获取处理查询到的要素信息，解析所需的几何信息与属性信息进行展示。
以属性查询为例：
Example：
var queryParam = new CesiumZondy.Query.MapDocQuery()//查询图层的URL路径//queryParam.gdbp = encodeURI("gdbp://MapGisLocal/北京市/ds/行政区/sfcls/北京市");queryParam.docName = '北京市'queryParam.mapIndex = 0queryParam.layerID = 0queryParam.structs = '{"IncludeAttribute":true,"IncludeGeometry":true,"IncludeWebGraphic":false}'//设置要素的属性条件queryParam.where = "省名='北京'"//服务器的ipqueryParam.ip = ip queryParam.port = port queryParam.beginQuery( function(result) { //查询结果处理 }, function quryError(err) { alert(err) })if (result != null) { data = result //解析显示要素的属性信息 document.getElementById('code').value = result.SFEleArray[0].AttValue[2] document.getElementById('name').value = result.SFEleArray[0].AttValue[3] document.getElementById('spell').value = result.SFEleArray[0].AttValue[4] document.getElementById('population').value = result.SFEleArray[0].AttValue[40] //解析要素的几何信息 var GeompointArray = new Array() for (var pointlength = 0; pointlength < result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots.length; pointlength++) { var PntCartesian3 = Cesium.Cartesian3.fromDegrees(result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots[pointlength].x, result.SFEleArray[0].fGeom.RegGeom[0].Rings[0].Arcs[0].Dots[pointlength].y, 10) GeompointArray.push(PntCartesian3) } GeompointArray.push(GeompointArray[0]) //构造几何绘制控制对象 var entityController = new CesiumZondy.Manager.EntityController({ viewer: webGlobe.viewer, }) //构造区对象 var polygon = { name: '立体区', polygon: { //坐标点 hierarchy: GeompointArray, //是否指定各点高度 perPositionHeight: true, //颜色 material: new Cesium.Color(33 / 255, 150 / 255, 243 / 255, 0.5), //轮廓线是否显示 outline: true, //轮廓线颜色 outlineColor: Cesium.Color.BLACK, }, } //绘制图形通用方法：对接Cesium原生特性 var stericPolygon = entityController.appendGraphics(polygon)}
三维模型数据查询
基于三维模型数据的要素查询，提供几何、属性、OID查询方式，以及复合查询，即查询三维场景中加载的三维模型数据的要素信息，包括三维模型数据的属性、几何等要素信息。
具体实现：先构造CesiumZondy.Query.G3DDocQuery三维地图文档查询对象，配置相关参数后调用 queryG3DFeature方法执行查询，然后在回调中获取处理查询到的要素信息，并在三维场景中展示。
以几何查询为例：
Example:
var queryParam = new CesiumZondy.Query.G3DDocQuery()//查询图层的URL路径queryParam.gdbp = encodeURI('gdbp://MapGisLocal/示例数据/ds/三维示例/sfcls/景观_模型')//设置查询结果结构queryParam.structs = '{"IncludeAttribute":true,"IncludeGeometry":true,"IncludeWebGraphic":false}'//几何查询//设置查询方式queryParam.geometryType = 'Point3D'//设置查询的点坐标queryParam.geometry = 92.37674872254775 + ',' + 163.57024299752067 + ',' + 21//服务器的ipqueryParam.serverIp = ip queryParam.serverPort = port queryParam.queryG3DFeature( function(result) {}, function(err) {})
M3D单体查询
M3D单体查询，针对的是M3D数据，实现在三维场景中展示 M3D 模型数据并实现单体查询功能。
具体实现：结合鼠标点击事件，在点击事件回调函数中先通过Cesium.WebSceneControl.Scene类的pick()方法来选取要素，然后调用CesiumZondy.Manager.AnalysisManager类的startCustomDisplay()方法来实现模型高亮。
Example:
//构造鼠标事件管理对象var mouseEventManager = new CesiumZondy.Manager.MouseEventManager({ viewer: webGlobe.viewer,})//注册鼠标左键单击事件mouseEventManager.registerMouseEvent('LEFT_CLICK', highlightPicking)Example:
/*鼠标左键单击事件回调：模型高亮*/function highlightPicking(movement) { //根据鼠标点击位置选择对象 var pickedFeature = webGlobe.scene.pick(movement.position) //获取要素的瓦片集 var currentLayer = [pickedFeature.tileset] //获取名称属性 var title = pickedFeature.getProperty('name') //采用_分割 var values = title.split('_') //获取数组中第三个数值，即为要素的ID var vlueNumber = parseInt(values[2]) //构建数组 var idList = [vlueNumber] //构建参数：设置颜色 var options = { //高亮颜色 color: new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 1), //高亮模式：REPLACE为替换 colorBlendMode: Cesium.Cesium3DTileColorBlendMode.REPLACE, } //构造分析功能管理对象 var analysisManager = new CesiumZondy.Manager.AnalysisManager({ viewer: webGlobe.viewer, }) //开始闪烁查找到的模型 analysisManager.startCustomDisplay(currentLayer, idList, options)}
分析
具备全空间一体化分析能力，提供模型压平、动态剖切等专业分析功能；提供可视域分析、地形开挖、洪水淹没分析、填挖方计算等地形分析功能。
类名/方法名API说明Cesium.VisiblityAnalysis()通视分析CesiumZondy.Manager.AnalysisManager / createDynamicCutting()动态剖切、开挖分析、卷帘分析CesiumZondy.Manager.AdvancedAnalysisManager / createFlood()洪水淹没分析CesiumZondy.Manager.AdvancedAnalysisManager / createViewshedAnalysis()可视域分析CesiumZondy.Manager.AdvancedAnalysisManager / createSkyLine()天际线分析CesiumZondy.Manager.AdvancedAnalysisManager / createSceneProjector()视频投放CesiumZondy.Manager.AdvancedAnalysisManager / createModelFlatten()模型压平CesiumZondy.Manager.AdvancedAnalysisManager / createAspectAnalysis()坡向分析CesiumZondy.Manager.AdvancedAnalysisManager / createSlopeAnalysis()坡度分析CesiumZondy.Manager.AdvancedAnalysisManager / createCutFill()、startCutFill()填挖方计算CesiumZondy.Manager.AdvancedAnalysisManager / createAnimation()动画漫游
通视分析
通视分析，用于检测当前三维场景中两点之间是否可以没有阻碍的看到。
具体实现：通过 Cesium 三维球控件 Cesium.WebSceneControl() 对象的 registerMouseEvent() 方法在三维场景里面自定义注册鼠标事件完成通视分析两个点的拾取，通过两点通视分析对象 Cesium.VisiblityAnalysis()实现两点通视分析。
Step 1. 创建通视分析：
初始化两点通视分析对象 Cesium.VisiblityAnalysis() ;
Example:
//初始化通视分析类visiblity = new Cesium.VisiblityAnalysis();
Step 2. 添加通视分析：
将两点通视分析对象 Cesium.VisiblityAnalysis() 添加到 Cesium 三维球控件中;
Example:
//添加通视分析显示viewer.scene.VisualAnalysisManager.add(visiblity);
Step 3. 注册鼠标事件：
调用 Cesium 三维球控件 Cesium.WebSceneControl() 的 registerMouseEvent() 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数；
Example:
//注册事件webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {});webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {});webGlobe.registerMouseEvent('MOUSE_MOVE', function(e) {});
Step 4. 设置两点通视分析参数：
给两点通视分析对象设置进行两点通视分析使用的必要参数。
Example:
//设置通视分析观察点 visiblity.viewPosition = cartesian; //设置通视分析结果点 visiblity.targetPosition = cartesian;
动态剖切
此功能对已加载的M3D数据进行任意距离的剖切，动态的显示或隐藏一部分数据。
具体实现：创建分析功能管理类 CesiumZondy.Manager.AnalysisManager() ，调用 createDynamicCutting() 方法创建剖切对象实例，通过设置剖切面距离进行数据剖切分析。
Step 1. 创建切面：
初始化切面对象 Cesium.ClippingPlane() ;
Example:
//进行剖切分析的面，从上往下切，Cesium.Cartesian3中第一个参数是左右，第二个参数是前后，第三个参数是上下var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), -500.0)
Step 2. 获取剖切切面：
创建分析功能管理类 CesiumZondy.Manager.AnalysisManager() ，调用 createDynamicCutting() 方法创建剖切对象实例, 并获取剖切切面；
Example:
//初始化分析功能管理类 var analysisManager = new CesiumZondy.Manager.AnalysisManager({ viewer: webGlobe.viewer }); //创建剖切对象实例 dynaCut = analysisManager.createDynamicCutting(landscapeLayer, [plane], { color: new Cesium.Color(0.0, 1.0, 1.0, 0.3) });
Step 3. 设置剖切面距离：
通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。
Example:
//设置切面回调函数dynaCut.planes[0].plane.plane = new Cesium.CallbackProperty(function(date) { //设置剖切面距离 plane.distance = distance; return Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0));}, false);
开挖分析
开挖分析，指对已加载的M3D数据进行任意距离深度开挖，动态的显示或隐藏一部分数据。
具体实现： 先初始化M3D模型层管理类 CesiumZondy.Layer.M3DLayer 并调用 append() 方法加载M3D数据后，再创建 Cesium.ClippingPlane() 切面对象，创建分析功能管理类 CesiumZondy.Manager.AnalysisManager() ，调用 createDynamicCutting() 方法创建开挖分析对象通过设置剖切面距离进行数据开挖分析。
Step 1. 加载数据：
初始化M3D模型层管理类 CesiumZondy.Layer.M3DLayer 并调用 append() 方法传入M3D数据服务地址，即可加载浏览数据；
Example:
//构造M3D模型层管理对象var m3dLayer = new CesiumZondy.Layer.M3DLayer({ viewer: webGlobe.viewer});var drilllayer = m3dLayer.append( "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s", { autoReset: false, });//加载M3D地图文档（服务地址，配置参数）landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent', {});
Step 2. 创建切面：
初始化切面对象 Cesium.ClippingPlane() ;
Example:
//开挖面设置,这五个面分别表示前后左右，底面，其中底面用于控制开挖深度 var clippingPlanes = [ new Cesium.ClippingPlane(new Cesium.Cartesian3(3, 0.0, 0.0), -1500.0), new Cesium.ClippingPlane(new Cesium.Cartesian3(-3, 0.0, 0.0), -1500.0), new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 3, 0.0), -1500.0), new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -3, 0.0), -1500.0), new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -5), 0.0) ]
Step 3. 创建开挖分析：
化M3D模型层管理类 CesiumZondy.Layer.M3DLayer 并调用 append() 方法加载M3D数据后，创建 Cesium.ClippingPlane() 切面对象，创建分析功能管理类 CesiumZondy.Manager.AnalysisManager() ，调用 createDynamicCutting() 方法创建开挖分析对象, 并获取剖切切面；
Example:
//初始化分析功能管理类 var analysisManager = new CesiumZondy.Manager.AnalysisManager({ viewer: webGlobe.viewer }); //创建开挖分析实例 dynaCut = analysisManager.createExcavateAnalysis({ //图层信息 tileSet: landscapeLayer[0], //开挖面的形状 planes: planes, //裁剪面材质 material: new Cesium.Color(0.2, 0.4, 0.3, 0.7), //边界线颜色 edgeColor: new Cesium.Color(0.2, 0.4, 0.3, 0.7), //边界线宽度 edgeWidth: 3, //裁减法线方向，默认值为 false unionClippingRegions: false, //开挖坐标 longitude: 113.0402, latitude: 30.0264, height: 0 });
Step 4. 设置剖切面距离：
通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。
Example:
dynaCut.planes[0].plane.plane = new Cesium.CallbackProperty(function(date) { console.log(planes); for (var i = 0; i < planes.length; i++) { if (i === planes.length - 1) { var plane = planes[i]; plane.distance = distance; Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0)); } }}, false);
卷帘分析
卷帘分析目前通过剖切功能实现，即对已加载的两个M3D数据进行任意距离的剖切，动态的显示或隐藏一部分数据，一个显示的同时不显示另一个数据，打到卷帘效果。
具体实现：创建分析功能管理类 CesiumZondy.Manager.AnalysisManager() ，调用 createDynamicCutting() 方法创建两个M3D数据的切面对象通过设置剖切面距离进行数据剖切分析，实现卷帘效果。
Step 1. 创建切面对象：
创建切面对象 Cesium.ClippingPlane() ;
Example:
//进行剖切分析的面，向右切 var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(1, 0, 0), -200.0) //进行剖切分析的面，向左切 var plane1 = new Cesium.ClippingPlane(new Cesium.Cartesian3(-1, 0, 0), -200.0)
Step 2. 创建剖切对象：
创建分析功能管理类 CesiumZondy.Manager.AnalysisManager() ，调用 createDynamicCutting() 方法创建剖切对象实例, 并获取剖切切面；
Example:
//初始化分析功能管理类 var analysisManager = new CesiumZondy.Manager.AnalysisManager({ viewer: webGlobe.viewer }); //创建剖切对象实例 dynaCut = analysisManager.createDynamicCutting(landscapeLayer, [plane], { color: new Cesium.Color(0.0, 1.0, 1.0, 0.3) });
Step 3. 通过切面回调完成动态剖切分析：
通过设置切面回调函数，动态设置剖切面距离完成动态剖切分析。
Example:
//设置切面回调函数planetEntity.plane.plane = new Cesium.CallbackProperty(function(date) { //设置剖切面距离 plane.distance = distance; return Cesium.Plane.transform(plane, tileset[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0));}, false);//设置切面回调函数planetEntity1.plane.plane = new Cesium.CallbackProperty(function(date) { //设置剖切面距离 plane1.distance = distance1; return Cesium.Plane.transform(plane1, tileset[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0));}, false);
洪水淹没分析
洪水淹没分析，即在三维场景下动态模拟洪水淹没分析的场景，根据设定的高程与范围分析洪水淹没区域，可应用在抗洪抢险、水库管理等领域，辅助决策。支持三维模型、地形等数据应用场景。
具体实现：初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createFlood() 方法创建洪水淹没分析示例，将结果显示到三维球控件上。
Step 1. 创建洪水淹没分析：
初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createFlood() 方法创建洪水淹没分析示例；
Example:
//初始化高级分析功能管理类var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: viewer});//初始化洪水淹没分析类flood = advancedAnalysisManager.createFlood();//设置洪水淹没分析区域点集flood.dotsList = newArray;//设置洪水淹没区域最底高度flood.minHeight = Number(document.getElementById('minHeight').value <= 0 ? 0 : document.getElementById('minHeight').value);//设置洪水淹没区域最高高度flood.maxHeight = Number(document.getElementById('maxHeight').value <= 0 ? 30 : document.getElementById('maxHeight').value);//设置洪水上涨速度flood.floodSpeed = Number(document.getElementById('floodSpeed').value <= 0 ? 1 : document.getElementById('floodSpeed').value);//水纹频率 指波浪的个数flood.frequency = Number(document.getElementById('frequency').value <= 0 ? 1000 : document.getElementById('frequency').value);//水纹速度flood.animationSpeed = Number(document.getElementById('animationSpeed').value <= 0 ? 0.01 : document.getElementById('animationSpeed').value);//水波的高度flood.amplitude = Number(document.getElementById('amplitude').value <= 0 ? 10 : document.getElementById('amplitude').value);//指定水面颜色 和 透明度flood.floodColor = new Cesium.Color(0.2, 0.5, 0.4, 0.7);// 指定光线强度flood.specularIntensity = 3.0;
Step 2. 洪水淹没结果显示：
将结果显示到三维球控件上。
Example:
//添加洪水淹没结果显示webGlobe.scene.VisualAnalysisManager.add(flood);
可视域分析
可视域分析，用于检测当前三维场景中某个点朝一个方向看的时候可以看到的区域。
具体实现：先通过 Cesium 三维球控件 Cesium.WebSceneControl() 对象的 registerMouseEvent() 方法在三维场景里面自定义注册鼠标事件完成可视域分析点的拾取；然后初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createViewshedAnalysis() 方法实现可视域分析。
Step 1. 加载数据：
初始化 M3D 模型层管理类 CesiumZondy.Layer.M3DLayer 并调用 append() 方法传入 M3D 数据服务地址，即可加载浏览数据；
Example:
//构造M3D模型层管理对象var m3dLayer = new CesiumZondy.Layer.M3DLayer({ viewer: webGlobe.viewer});//加载M3D地图文档（服务地址，配置参数）landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {});
Step 2. 创建可视域分析：
初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createViewshedAnalysis() 方法实现可视域分析;
Example:
//初始化高级分析功能管理类var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: viewer});//创建可视化分析对象viewshed3d = advancedAnalysisManager.createViewshedAnalysis();
Step 3. 注册鼠标事件：
调用 Cesium 三维球控件 Cesium.WebSceneControl() 的 registerMouseEvent() 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数；
Example:
//注册事件webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {});webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {});webGlobe.registerMouseEvent('MOUSE_MOVE', function(e) {});
Step 4. 设置可视域分析参数：
给可视域分析对象设置进行可视域分析使用的必要参数；
Example:
//设置观察点坐标viewshed3d.viewPosition = cartesian;//设置可视域结果点viewshed3d.targetPosition = cartesian;
Step 5. 添加可视域分析：
将可视域分析对象 Cesium.ViewshedAnalysis() 添加到 Cesium 三维球控件中。
Example:
//添加可视域分析结果显示viewer.scene.VisualAnalysisManager.add(viewshed3d);
天际线分析
天际线分析，用于检测当前视角的天际线，并绘制在三维场景中。
具体实现：先初始化 M3D 模型层管理类 CesiumZondy.Layer.M3DLayer 并调用 append() 方法加载 M3D 数据后，再初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createSkyLine() 方法创建天际线分析。
Step 1. 加载数据：
初始化 M3D 模型层管理类 CesiumZondy.Layer.M3DLayer 并调用 append() 方法传入 M3D 数据服务地址，即可加载浏览数据；
Example:
//构造M3D模型层管理对象var m3dLayer = new CesiumZondy.Layer.M3DLayer({ viewer: webGlobe.viewer});//加载M3D地图文档（服务地址，配置参数）landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', {});
Step 2. 创建天际线分析：
初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createSkyLine() 方法创建天际线分析。
Example:
//初始化高级分析功能管理类var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer});//创建天际线实例skyLineAn = advancedAnalysisManager.createSkyLine()
视频投放
视频投放，即在三维场景中加载色块、图片、视屏等功能。
具体实现：主要初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createSceneProjector 方法创建场景投放示例，实现场景投影分析。
Step 1. 创建场景投影对象：
初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createSceneProjector() 方法创建场景投放示例;
Example:
//初始化高级分析功能管理类var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: viewer});//初始化场景投影对象scenePro = advancedAnalysisManager.createSceneProjector(2);
Step 2. 注册鼠标事件：
调用Cesium三维球控件 Cesium.WebSceneControl() 的 registerMouseEvent() 方法注册鼠标事件, 以下事例中的匿名函数为触发鼠标事件后执行的方法，完成此步后，在三维场景中点击鼠标左键可触发点击事件，点击完成后进入匿名函数；
Example:
//注册事件webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {});webGlobe.registerMouseEvent('RIGHT_CLICK', function(e) {});
Step 3. 设置场景投影参数：
给场景投影对象设置进行场景投影使用的必要参数。
Example:
//设置投影观察点scenePro.viewPosition = cartesian;//数据url路径scenePro.textureSource = './static/data/picture/world.jpg';//设置场景投影结果点scenePro.targetPosition = cartesian;
模型压平
模型压平，即将加载完成的M3D数据进行压平处理。一般可通过交互式方式实现模型压平功能。
具体实现：添加交互式绘制工具 Cesium.DrawPolygonTool() 选择绘制区域, 初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createModelFlatten() 方法，创建模型压平分析，将结果显示到三维球控件上。
Step 1. 创建交互式绘制区工具：
初始化 Cesium.DrawPolygonTool() 对象，完成交互式绘制区工具的创建；
Example:
//创建交互式绘制区工具var drawPolygon = new Cesium.DrawPolygonTool(webGlobe.viewer, getDrawResult);
Step 2. 激活交互式绘制区工具：
调用 Cesium.DrawPolygonTool() 对象的activeTool()方法，激活交互式绘制区工具，完成此步后，可在三维场景中通过鼠标左键点击绘制多边形。
Example:
//激活交互式绘制区工具drawPolygon.activeTool();
Step 3. 顶点处理：
将交互式选取的点处理；
Example:
/*对绘制区域的顶点循环处理一下，以便用于模型压平参数的赋值*/var array = [];for (let i = 0; i < positionsArray.length; i++) { let point = positionsArray[i]; let resPoint = new Cesium.Cartesian3; let invserTran = new Cesium.Matrix4; Cesium.Matrix4.inverse(tileset[0]._root.transform, invserTran); Cesium.Matrix4.multiplyByPoint(invserTran, point, resPoint); resPoint.y = -resPoint.y; array.push(new Cesium.Cartesian2(resPoint.x, resPoint.y));}array.push(array[0]);
Step 4. 创建模型压平分析：
初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createModelFlatten() 方法，创建模型压平分析
Example:
//初始化高级分析功能管理类var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer});advancedAnalysisManager.createModelFlatten(landscapeLayer[0], { //是否进行压平。值为true时执行压平 isFlatten: true, //将高度压到0 height: 0, //压平多边形的顶点序列长度 arrayLength: positionsArray.length, //顶点序列。顶点序列需要闭合，也就是说，例如一个矩形是四个顶点ABCD，那序列就应该是【ABCDA】 array: array});
Step 5. 结果显示：
将结果显示到三维球控件上。
Example:
//场景渲染（渲染最新的压平效果）webGlobe.viewer.scene.requestRender();
坡向分析
此功能用于地形数据的坡向分析。 坡向是指地表面上一点的切平面的法线在水平面的投影与该点的正北方向的夹角，描述该点高程值改变量的最大变化方向。坡向分析作用是：决定地表面局部地面接收阳光和重新分配太阳辐射量的重要地形因子，直接造成局部地区气候特征差异，影响各项农业生产指标。
具体实现：初始化地形图层管理类 CesiumZondy.Layer.TerrainLayer 并调用 append() 方法加载地形数据后，跳转视点，创建高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() ，调用 createAspectAnalysis() 方法进行坡向分析。
Step 1. 加载数据：
初始化地形图层管理类 CesiumZondy.Layer.TerrainLayer 并调用 append() 方法传入三维地形数据地图服务地址，即可加载浏览数据；
Example:
//构造地形图层管理类var terrain = new CesiumZondy.Layer.TerrainLayer({ viewer: webGlobe.viewer});//加载三维地形地图文档（服务地址，配置参数）var { protocol, ip, port } = window.webclient;var terrainlayer = terrain.append(`http://develop.smaryun.com:6163/igs/rest/g3d/terrain`, {});//初始化视图功能管理类var sceneManager = new CesiumZondy.Manager.SceneManager({ viewer: webGlobe.viewer});
Step 2. 坡向分析：
创建高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() ，调用 createAspectAnalysis() 方法进行坡向分析。
Example:
//初始化高级分析功能管理类 var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; //进行坡向分析 var aspectAna = advancedAnalysisManager.createAspectAnalysis([ Cesium.Color.ALICEBLUE, Cesium.Color.ANTIQUEWHITE, Cesium.Color.AQUA, Cesium.Color.AQUAMARINE, Cesium.Color.AZURE, Cesium.Color.BEIGE ]);
坡度分析
此功能用于地形数据的坡度分析。 坡度是指过地表一点的切平面与水平面的夹角，描述地表面在该点的倾斜程度。坡度分析的作用是：影响地表物质流动与能量转换的规模与强度，制约生产力空间布局。
具体实现：初始化地形图层管理类 CesiumZondy.Layer.TerrainLayer 并调用 append() 方法加载地形数据后，跳转视点，创建高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() ，调用 createSlopeAnalysis() 方法进行坡度分析。
Step 1. 加载数据：
初始化地形图层管理类 CesiumZondy.Layer.TerrainLayer 并调用 append() 方法传入三维地形数据地图服务地址，即可加载浏览数据；
Example:
//构造地形图层管理类var terrain = new CesiumZondy.Layer.TerrainLayer({ viewer: webGlobe.viewer});//加载三维地形地图文档（服务地址，配置参数）var { protocol, ip, port } = window.webclient;var terrainlayer = terrain.append(`http://develop.smaryun.com:6163/igs/rest/g3d/terrain`, {});//初始化视图功能管理类var sceneManager = new CesiumZondy.Manager.SceneManager({ viewer: webGlobe.viewer});
Step 2. 坡度分析：
创建高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() ，调用 createSlopeAnalysis() 方法进行坡度分析。
Example:
//初始化高级分析功能管理类 var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; //进行坡度分析 var slopeAna = advancedAnalysisManager.createSlopeAnalysis([ Cesium.Color.ALICEBLUE, Cesium.Color.ANTIQUEWHITE, Cesium.Color.AQUA, Cesium.Color.AQUAMARINE, Cesium.Color.AZURE, Cesium.Color.BEIGE ]);
填挖方计算
此功能提供用于计算将一定范围内的地形填平到某一高度时，需要挖开或填充的空间体积，可以应用于智慧城市，地质，公安等多个领域的业务功能，实用性强。
具体实现：初始化 Cesium.DrawElement() 对象在三维场景中添加交互式绘制区控件用来界定量算区域，初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager() 对象，调用高级分析功能管理类的 createCutFill() 方法创建填挖方分析对象, 调用高级分析功能管理类的 startCutFill() 方法执行填挖方分析。
Step 1. 创建交互式绘制工具：
初始化 Cesium.DrawElement() 对象，完成交互式绘制工具的创建；
Example:
//创建交互式绘制工具var drawElement = new Cesium.DrawElement(webGlobe.viewer);
Step 2. 激活交互式绘制区工具：
调用 Cesium.DrawElement() 对象的startDrawingPolygon()方法，激活交互式绘制区工具，完成此步后，可在三维场景中通过鼠标左键点击绘制多边形；
Example:
//激活交互式绘制区工具drawElement.startDrawingPolygon();
Step 3. 创建填挖方分析：
初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager（） 对象，调用高级分析功能管理类的 createCutFill() 方法创建填挖方分析对象；
Example:
//初始化高级分析功能管理类var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: viewer});//创建填挖方实例cutFill = advancedAnalysisManager.createCutFill(0.0, { //设置x方向采样点个数 xPaneNum: document.getElementById("x").value <= 0 ? 16 : document.getElementById("x").value, //设置y方向采样点个数参数 yPaneNum: document.getElementById("y").value <= 0 ? 16 : document.getElementById("y").value, //设置填挖规整高度 Height: document.getElementById("z").value <= 0 ? 16 : document.getElementById("z").value, //返回结果的回调函数 callback: function(result) { document.getElementById("height").value = result.minHeight.toFixed(2) + '~' + result.maxHeight.toFixed(2); document.getElementById("surfaceArea").value = result.surfaceArea; document.getElementById("cutVolume").value = result.cutVolume; document.getElementById("fillVolume").value = result.fillVolume; }});
Step 4. 执行填挖方分析：
调用高级分析功能管理类的 startCutFill() 方法执行填挖方分析。
Example:
//开始执行填挖方分析advancedAnalysisManager.startCutFill(cutFill, positions);
动画漫游
此功能用于在三维场景中实现动画漫游功能，即让模型沿着路径漫游，默认为第一人称漫游，可修改动画漫游方式。本示例实现让飞机模型按既定的路径漫游。在实际应用中，可结合具体应用场景开发，如绘制路径进行动画漫游等功能需求等。
具体实现：初始化高级分析功能管理类 CesiumZondy.Manager.AdvancedAnalysisManager 对象，调用高级分析功能管理类的 createAnimation() 方法创建动画漫游对象实例实现动画漫游功能。
Step 1. 创建动画漫游对象：
初始化高级分析功能管理类对象CesiumZondy.Manager.AdvancedAnalysisManager，调用createAnimation()方法创建动画漫游对象；
Example:
//初始化高级分析功能管理类 var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); //创建动画漫游对象 animation = advancedAnalysisManager.createAnimation({ exHeight: 9, isLoop: false, //漫游模型url modelUrl: './static/data/model/WuRenJi.glb', //完成动画漫游回调函数 complete: function () { alert('完毕'); } });
Step 2. 实现动画漫游控制：
通过动画漫游对象的属性和方法实现动画漫游控制，即通过属性设置漫游路径、漫游方式、速度、俯仰角、方位角等参数，分别通过调用方法start()、stop()开始和结束漫游。
Example:
//漫游路径 positions = Cesium.Cartesian3.fromDegreesArray([ 117.213063, 31.812956, 117.213162, 31.812389, 117.212929, 31.812056, 117.213275, 31.811582, 117.21348, 31.811513, 117.214141, 31.811682, 117.21497, 31.811691, 117.216318, 31.811454, 117.216962, 31.812037, 117.217893, 31.812298, 117.218607, 31.811488, 117.219466, 31.810935, 117.224439, 31.810929, 117.225266, 31.811119, 117.225308, 31.81131, 117.224819, 31.811724, 117.225189, 31.811928, 117.225676, 31.811624, 117.225843, 31.811943, 117.22625, 31.812183, 117.226292, 31.81281, 117.225888, 31.813287, 117.226093, 31.814059, 117.22564, 31.814582, 117.225953, 31.814731, 117.225611, 31.814954, 117.22576, 31.815233, 117.224073, 31.816329, 117.223694, 31.81627, 117.222769, 31.817007, 117.222259, 31.816871, 117.221922, 31.816707, 117.221653, 31.816788, 117.22151, 31.817002, 117.221039, 31.816891, 117.220395, 31.816352, 117.220166, 31.815734, 117.219804, 31.815607, 117.219461, 31.815122, 117.21878, 31.814846, 117.218297, 31.815275, 117.217975, 31.815172, 117.217142, 31.815229, 117.216753, 31.815124, 117.216652, 31.814308, 117.215726, 31.814049, 117.214769, 31.813517, 117.214111, 31.813717, 117.213552, 31.814099, 117.213024, 31.813954, 117.212897, 31.813892, 117.213224, 31.813681, 117.212788, 31.813147, 117.212928, 31.813018, 117.213063, 31.812956 ]); //设置路径 animation.positions = positions; //漫游方式：1-跟随、2-锁定第一视角、3-上帝视角 animation.animationType = 2; //漫游速度 animation.speed = 1;Example:
function start() { //开始漫游 animation.start(); } function pause() { //暂停漫游 animation.pause = true; } function stop() { //停止漫游 animation.stop(); }
场景特效
支持常用粒子特效，如雨、雪、雾、火焰、烟雾等，模拟自然天气或动态场景。
类名/方法名API说明CesiumZondy.Manager.AdvancedAnalysisManager / createRain()降雨粒子特效CesiumZondy.Manager.AdvancedAnalysisManager / createSnow()降雪粒子特效CesiumZondy.Manager.AdvancedAnalysisManager / createFog()雾粒子特效CesiumZondy.Manager.AdvancedAnalysisManager / createFire()火焰粒子特效CesiumZondy.Manager.AdvancedAnalysisManager / createStableParticle()自定义粒子特效
降雨特效
具体实现：首先构造CesiumZondy.Manager.AdvancedAnalysisManager高级分析功能类对象，然后调用createRain()方法添加降雨粒子特效，可通过可选参数实现降雨效果的调整。
Example:
//初始化高级分析功能管理类var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer });//添加下雨特效advancedAnalysisManager.createRain({ //色调调整 hueShift: 0.7});
降雪特效
具体实现：首先构造CesiumZondy.Manager.AdvancedAnalysisManager高级分析功能类对象，然后调用createSnow()方法添加降雪粒子特效，可通过可选参数实现降雪效果的调整。
Example:
//初始化高级分析功能管理类var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer });//添加下雪特效advancedAnalysisManager.createSnow({ //色调 hueShift: 0.7});
雾特效
具体实现：首先构造CesiumZondy.Manager.AdvancedAnalysisManager高级分析功能类对象，然后调用createFog()方法添加雾粒子特效，可通过可选参数实现雾效的调整。
Example:
//初始化高级分析功能管理类var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer });//添加雾效advancedAnalysisManager.createFog({ //雾特效透明度 alpha:0.5});
火焰特效
具体实现：首先构造CesiumZondy.Manager.AdvancedAnalysisManager高级分析功能类对象，然后调用createFire()方法添加火焰粒子特效，可通过可选参数实现火焰特效的调整。
Example:
//初始化高级分析功能管理类var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer })//位置点let position = [114.40103, 30.4679, 12]//火焰图片urllet imageUrl = './static/data/effect/fire.png'//添加火焰粒子特效fireObj = advancedAnalysisManager.createFire(imageUrl, position)Example:
if (name === 'emissionRate') { //排放率 fireObj.emissionRate = parseFloat(newValue); } if (name === 'particleSize') { var particleSize = parseFloat(newValue); //图像尺寸 fireObj.imageSize = new Cesium.Cartesian2(particleSize, particleSize); } if (name === 'particleLife') { //粒子生命 fireObj.particleLife = parseFloat(newValue); } if (name === 'speed') { //速度 fireObj.speed = parseFloat(newValue); } if (name === 'startScale') { //起始规模 fireObj.startScale = parseFloat(newValue); } if (name === 'endScale') { //终止规模 fireObj.endScale = parseFloat(newValue); }
自定义粒子特效（烟雾）
烟雾粒子特效，与火焰粒子特效相同，可以模拟火灾等各类火焰烟雾、水汽烟雾相关的场景。可通过自定义粒子特效接口实现烟雾粒子特效。
具体实现：首先构造CesiumZondy.Manager.AdvancedAnalysisManager高级分析功能类对象，然后调用createStableParticle()方法分别添加火焰与烟雾粒子特效，可通过可选参数实现烟雾特效的调整。
Example:
//初始化高级分析功能管理类 var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); //粒子发射位置点 let position = [114.40103, 30.4679, 12]; //火焰与烟雾图片url let imageUrl1 = './static/data/effect/fire1.png'; let imageUrl2 = './static/data/effect/smoke1.png'; //添加烟雾粒子特效 fireObj = advancedAnalysisManager.createStableParticle(imageUrl1, position, { emissionRate: 3, startScale: 1, endScale: 3 }); //添加烟雾粒子特效 smokeObj = advancedAnalysisManager.createStableParticle(imageUrl2, position, { emissionRate: 35, startScale: 5, endScale: 8 });Example:
if (name === 'emissionRate') { //排放率 smokeObj.emissionRate = parseFloat(newValue);}if (name === 'particleSize') { var particleSize = parseFloat(newValue); //图像尺寸 smokeObj.imageSize = new Cesium.Cartesian2(particleSize, particleSize);}if (name === 'particleLife') { smokeObj.particleLife = parseFloat(newValue);}if (name === 'speed') { smokeObj.speed = parseFloat(newValue);}if (name === 'startScale') { //起始规模 smokeObj.startScale = parseFloat(newValue);}if (name === 'endScale') { //终止规模 smokeObj.endScale = parseFloat(newValue);}
轨迹模拟
模型漫游
模型漫游，此功能用于在三维场景中添加模型动态运动显示效果。
具体实现：创建分析功能管理类 CesiumZondy.Manager.AnalysisManager() ，调用 cruiseModel() 方法创建模型漫游，通过 startCruiseModel() 方法开始模型漫游，通过 stopCruiseModel() 方法暂停模型漫游, 通过 clearCruiseModel() 方法清除模型漫游。
Step 1. 创建模型漫游:
创建分析功能管理类 CesiumZondy.Manager.AnalysisManager() ，调用 cruiseModel() 方法创建模型漫游；
Example:
//初始化分析功能管理类var analysisManager = new CesiumZondy.Manager.AnalysisManager({ viewer: webGlobe.viewer});//模型漫游var modelEntity = analysisManager.cruiseModel( //模型URL地址 './static/data/model/GroundVehicle.glb', //漫游点集 positionArr, //是否显示漫游路径 true, //漫游时钟频率 10);
Step 2. 开始模型漫游:
创建分析功能管理类 CesiumZondy.Manager.AnalysisManager() ，调用 startCruiseModel() 方法开始模型漫游。
Example:
/*开始漫游*/analysisManager.startCruiseModel();
动态航线
动态航线，此功能用于动态显示两点之间的动态飞行轨迹效果。
具体实现：初始化 CesiumZondy.Manager.AdvancedAnalysisManager()高级分析功能管理对象，然后调用 createDynamicPolyline() 方法创建动态航线。
Example:
//开启动画webGlobe.viewer.clock.shouldAnimate = true;//构造高级分析功能管理对象var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer});//创建动态航线var dynamicLine = advancedAnalysisManager.createDynamicPolyline( //航线起始城市经纬度 { lon: 114.302312702, lat: 30.598026044 }, //航线终点城市数组，经纬度 [ { "lon": 115.028495718, "lat": 30.200814617 }, { "lon": 110.795000473, "lat": 32.638540762 }, { "lon": 111.267729446, "lat": 30.698151246 }, { "lon": 112.126643144, "lat": 32.058588576 }, { "lon": 114.885884938, "lat": 30.395401912 }, { "lon": 112.190419415, "lat": 31.043949588 }, { "lon": 113.903569642, "lat": 30.932054050 }, { "lon": 112.226648859, "lat": 30.367904255 }, { "lon": 114.861716770, "lat": 30.468634833 }, { "lon": 114.317846048, "lat": 29.848946148 }, { "lon": 113.371985426, "lat": 31.704988330 }, { "lon": 109.468884533, "lat": 30.289012191 }, { "lon": 113.414585069, "lat": 30.368350431 }, { "lon": 112.892742589, "lat": 30.409306203 }, { "lon": 113.160853710, "lat": 30.667483468 }, { "lon": 110.670643354, "lat": 31.748540780 } ], { //是否已经添加动态航线 isAdd: false, //航线颜色：默认红色 color: new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1) });
客户端可视化
热力图
热力图，此功能用于在当前三维场景中添加热力图显示效果。
具体实现：创建分析功能管理类 CesiumZondy.Manager.AnalysisManager() ，调用关键接口 createHeatMap() 添加热力图。
Example:
var analysisManager = new CesiumZondy.Manager.AnalysisManager({ viewer: webGlobe.viewer})//创建热力图（范围、最大值、最小值）var instance = analysisManager.createHeatMap(bounds, valueMin, valueMax, data, options);
动态圆
动态圆，此功能用于在当前场景中绘制动态的圆显示效果，可应用于任意场景中。
具体实现：先初始化 Cesium.CircleScanEffect() 动态圆对象，然后通过分析功能管理类CesiumZondy.Manager.AnalysisManager 的addSceneEffect()方法添加动态圆显示；removeSceneEffect()方法移除动态圆显示。
Step 1. 创建动态圆：
初始化动态圆对象 Cesium.CircleScanEffect()，注意使用动态圆功能必须开启深度检测 ；
Example:
//开启地形深度检测（必须）webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true;//初始化动态圆对象var scanEffect = new Cesium.CircleScanEffect(webGlobe.viewer, { center: Cesium.Cartesian3.fromDegrees(114.06, 22.54, 20), maxRadius: 5000, scanColor: new Cesium.Color(1, 0, 0, 1), duration: 8000});
Step 2. 添加/移除动态圆：
调用Cesium三维球分析功能管理类CesiumZondy.Manager.AnalysisManager 的addSceneEffect()方法添加动态圆显示，相应可调用removeSceneEffect()方法移除。
Example:
//初始化分析功能管理类var analysisManager = new CesiumZondy.Manager.AnalysisManager({ viewer: webGlobe.viewer});//添加添加场景特效-动态圆analysisManager.addSceneEffect(scanEffect);//通过removeSceneEffect()移除场景特效//analysisManager.removeSceneEffect(scanEffect);
雷达扫描圆
雷达扫描圆，此功能用于在当前场景中添加雷达扫描圆显示效果，可应用于任意场景中。
具体实现：初始化高级分析管理类 CesiumZondy.Manager.AdvancedAnalysisManager 的createRadarScan()方法创建雷达扫描圆对象，然后分别通过分析功能管理类CesiumZondy.Manager.AnalysisManager 的addSceneEffect()方法与removeSceneEffect()方法来添加与移除雷达扫描圆显示功能。
Step 1. 创建雷达扫描圆：
初始化高级分析功能管理类对象 CesiumZondy.Manager.AdvancedAnalysisManager ，调用createRadarScan()方法创建雷达扫描圆对象，注意必须开启深度检测 ；
Example:
//开启深度检测（必须） webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true; //初始化高级分析功能管理类 var advancedAnalysisManager = new CesiumZondy.Manager.AdvancedAnalysisManager({ viewer: webGlobe.viewer }); //创建一个雷达扫描圆对象 var radarScanEffect = advancedAnalysisManager.createRadarScan( //雷达中心点 Cesium.Cartesian3.fromDegrees(120.9558, 23.4481, 3657), //扫描半径 5000, //扫描区域颜色 new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), //周期时间,单位毫秒 8000 );
Step 2. 添加/移除雷达扫描圆显示：
调用分析功能管理类CesiumZondy.Manager.AnalysisManager 的addSceneEffect()方法添加雷达扫描圆显示，相应可调用removeSceneEffect()方法移除。
Example:
//初始化分析功能管理类var analysisManager = new CesiumZondy.Manager.AnalysisManager({ viewer: webGlobe.viewer});//添加场景特效-雷达扫描圆analysisManager.addSceneEffect(radarScanEffect);//移除场景特效-雷达扫描圆//analysisManager.removeSceneEffect(radarScanEffect);
客户端可视化-Echarts
在三维场景中接入百度ECharts，支持三维场景中加载ECharts散点图、热力图、路径图、渐近线、自定义网格专题图等。
百度 ECharts：ECharts完整、详细使用方法可参考官方教程API，开发库下载可参考官方下载
对接Echarts特别说明：MapGIS Client for JavaScript在Cesium中对接了百度Echarts图表插件，若插件本身存在问题，请优先参考Echarts官网解决方案
**以散点图-空气质量为例：实现在三维场景中加载ECharts散点图，基于全国主要城市空气质量数据实现散点图的可视化。**通过关键接口CesiumZondy.Overlayer.EchartsLayer()来实现ECharts图层的加载。
Step 1. 数据准备：
准备全国主要城市的数据，包括名称、坐标点、空气质量，并按照格式要求进行处理；
Example:
function initData() { data = [ {name: '海门',value: 9}, {name: '鄂尔多斯',value: 12}, {name: '招远',value: 12}, {name: '舟山',value: 12}, ··· ]; geoCoordMap = { '海门': [121.15, 31.89], '鄂尔多斯': [109.781327, 39.608266], '招远': [120.38, 37.35], '舟山': [122.207216, 29.985295], ··· };}function convertData(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res;};
Step 2. 配置参数项：
创建各种需要的组件，如标题、图例、提示框等，其中最关键的是“series-系列”组件，构造完成后，即可调用CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map)方法，将ECharts图层添加到三维场景中。
Example:
function initEcharts() { option = { title: { text: '全国主要城市空气质量 - 百度地图提供数据', textStyle: { color: '#eee' }, subtext: 'data from PM25.in', sublink: 'http://www.pm25.in', left: 'center' }, legend: { orient: 'vertical', y: 'top', x: 'left', data: ['pm2.5'], textStyle: { color: '#fff' } }, tooltip: { trigger: 'item' }, cesium: { roam: true }, series: [{ name: 'pm2.5', type: 'scatter', coordinateSystem: 'cesium', data: convertData(data), symbolSize: function (val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: true } }, itemStyle: { normal: { color: '#ddb926' } }, zlevel: 1 }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'cesium', data: convertData(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 6)), symbolSize: function (val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: '#f4e925', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 } ] } layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);}
客户端可视化-MapV
在三维场景中接入MapV，支持三维场景中加载MapV热力图、等。
对接Mapv特别说明：MapGIS Client for JavaScript在Cesium中对接了MapV插件，若插件本身存在问题，请优先参考Mapv官方教程寻找解决方案
以MapV热力图为例：实现在三维场景中加载MapV热力图，热力图采用特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域。通过关键接口 CesiumZondy.Overlayer.MapvLayer() 来实现MapV图层的加载。
Step 1. 创建 DataSet 对象：
首先构造DataSet对象需要的数据，然后使用数据创建DataSet对象。DataSet对象使用Mapv框架的原生API创建，更多详细信息参考Mapv官方教程；
Example:
var randomCount = 1000;var data = [];var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];// 构造数据while (randomCount--) { var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]); data.push({ geometry: { type: 'Point', coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4] }, count: 30 * Math.random(), time: 100 * Math.random() });}var dataSet = new mapv.DataSet(data);
Step 2. 构造 options 参数：
options参数参考Mapv框架的原生API创建，更多详细信息参考Mapv官方教程；
Example:
var options = { context: '2d', size: 13, gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)" }, max: 60, animation: { type: 'time', stepsRange: { start: 0, end: 100 }, trails: 10, duration: 4, }, draw: 'heatmap' }
Step 3. 数据展示：
根据前面的步骤，将 map 、 dataSet 、 options 三个参数传入 CesiumZondy.Overlayer.MapvLayer 中创建对象，创建完成数据在三维场景中加载展示。
Example:
var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options);
客户端空间分析
在三维场景中接入第三方开源空间分析库Turf.js，支持客户端实现缓冲区分析、泰森多边形、TIN三角网、中心点、插值、光滑曲线、求交判断等功能。
Turf.js： turf是JavaScript编写的模块化地理空间引擎，具体使用请查看turf官方教程和下载
GeoJSON.js： 地理数据转换成GeoJSON格式，GeoJSON.js官方地址
以缓冲区分析为例，给定一个缓冲半径进行缓冲区分析，单位支持 miles 米，kilometers 千米，degrees 度。
具体实现：先通过Cesium三维球控件 Cesium.WebSceneControl() 加载三维场景控件后，使用 Turf.js 空间分析库的 turf.buffer() 方法进行缓冲区分析。
Step 1. 执行缓冲区分析：
准备点、线、面要素数据，根据缓冲区分析算法得到缓冲区分析结果，实现关键步骤如下：
（1）准备点、线、面要素数据
Example:
var origindata = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [114.24270629882811,30.622550184776674] } }, { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [114.34810638427734,30.634958017061198], [114.2856216430664,30.554869984737515], [114.246826171875,30.4954261715298] ] } }, { "type": "Feature", "properties": {}, "geometry": { "type": "Polygon", "coordinates": [ [ [114.33815002441406,30.502230042106245], [114.34398651123045,30.485071542395932], [114.3728256225586,30.472348632640834], [114.38278198242188,30.49010107130931], [114.35256958007811,30.50518809826035], [114.33815002441406,30.502230042106245] ] ] } } ] };
（2）执行 缓冲区分析算法，返回缓冲结果要素数据
Example:
geojson = turf.buffer(origindata, 1.5, { units: 'miles' });
Step 2. 显示缓冲区分析结果：
更新数据，将得到的缓冲结果要素数据添加到地图中。
Example:
map.dataSources.add(Cesium.GeoJsonDataSource.load(geojson, { stroke: Cesium.Color.BLACK, fill: Cesium.Color.GRAY, strokeWidth: 15 }));
