《蒋雪雪-GeoScene JS API 高级开发.pdf》由会员分享,可在线阅读,更多相关《蒋雪雪-GeoScene JS API 高级开发.pdf(40页珍藏版)》请在三个皮匠报告上搜索。
1、GeoScene JS API 高级开发易智瑞信息技术有限公司基本介绍01新特性02三维应用场景展示与分析案例分享03目录一、GeoScene JS API 基本介绍工作机制与核心功能工作机制Javascript APIGeodatabaseGeoscene ServerREST APIHTTP浏览器端服务器端核心类概括 功能性服务端:封装对Rest API的访问访问数据库GP、NA等多种服务的调用高级的空间分析数据的增删改查客户端功能切片、矢量、三维等服务屏幕绘制、计算几何的绘制、客户端分析数据的展示与可视化微件工具即拿即用的小部件工具量测、剖切、天气、日照等核心类概括 逻辑层面数据加载符号
2、可视化查询、分析微件工具核心类数据与可视化数据与可视化 MapMap、View(View(MapViewMapView、SceneViewSceneView)LayerLayer 各类各类RenderersRenderers、SymbolSymbol 查询、分析、计算查询、分析、计算 QueryQuery GeoprocessorGeoprocessor、NetworkNetwork RasterFunctionRasterFunction 即拿即用的微件即拿即用的微件 测量测量 MeasurementMeasurement 日照日照 DaylightDaylight 高程剖面高程剖面 Ele
3、vationProfileElevationProfile 阴影分析阴影分析 ShadowCastShadowCast 其他其他 PopupPopup、PopupTemplatePopupTemplate DrawDraw、Point/Polyline/Polygon/MeshPoint/Polyline/Polygon/Mesh WatchUtilsWatchUtils、ReactiveUtilsReactiveUtils 地图与视图 Map/ViewMapView(2D)SceneView(3D)const map=new Map(basemap:street);const view=ne
4、w SceneView(container:viewDiv,map:map);const map=new Map(basemap:“street);const view=new MapView(container:viewDiv,map:map);local/global模式模式viewingMode图层 LayerJS API中提供了许多可用于访问和显示图层数据的图层类。所有类都继承自Layer类。使用的类取决于数据的格式和数据的存储位置。查询 Query查询分为三种类型:属性、空间和统计。服务器端(Layer)(Feature|Scene)Layer.queryFeatures()/返回要
5、素集 FeatureSet.queryExtent()/查询要素范围.queryFeatureCount()/查询要素的记录数.queryObjectIds()/查询要素并返回要素的objectIds数组客户端(LayerView)(Feature|CSV|GeoJSON|WFS)Layer(Feature|CSV|GeoJSON|OGCFeature|Scene|Stream)LayerView.queryFeatures()/查询要素并返回要素集 FeatureSet.queryExtent()/查询满足条件的要素范围.queryFeatureCount()/查询要素的记录数.queryO
6、bjectIds()/查询要素并返回要素的objectIds数组调用rest服务查询接口,后台查询查询视图当前可见的要素,前端查询过滤 Filter过滤是指影响图层中或图层视图中要素的可见性。满足过滤器要求的要素将显示在视图中。服务器端(Layer)definitionExpression 属性(Feature|Scene|Stream)Layer.definitionExpression=type=object;客户端(LayerView)definitionExpression 属性或 filter 属性(Feature|CSV|GeoJSON|WFS)Layer.definitionEx
7、pression=“id 100;(Feature|CSV|GeoJSON|OFCFeature|Scene|Stream|WFS)LayerView.filter=new FeatureFilter(where:“id 100”,geometry:filterPolygon);在服务端根据过滤条件,属性过滤针对rest地图服务或客户端服务显示在当前视图中的要素,属性或空间过滤可视化相关 Renderers/Symbols1、按位置使用 2D 和 3D 符号通过简单的渲染器设置图层样式。2、根据数据值使用不同的符号设置图层样式。3、大型、高密度数据集的可视化。4、3D 可视化。5、视觉变量。主
8、要以两种方式使用:专题制图和反映真实世界大小。包括颜色、尺寸、透明度、旋转等视觉变量。数百个可直接复用的 2D 和 3D Web 样式符号,以及常用的颜色色带渲染器类、符号类的自动映射 Autocasting/定义渲染器jsonconst rendererJSON=type:simple,/autocasts a new SimpleRenderersymbolLayers:type:simple-fill,/autocasts a new SimpleFillSymbolcolor:235,235,235,255,;/设置属性值,自动映射成渲染器实例layer.renderer=render
9、erJSON;通过自动映射,不必导入渲染器和符号类。只要设置属性,自动将 json 对象转换成对应类型的实例,而不需要导入对应的 js 模块。视觉变量 visualVariablesconst crownRenderer=type:simple,/autocasts as new SimpleRenderer()symbol:sym,/树的符号visualVariables:type:size,axis:height,field:“treeTall”,/树高valueUnit:Meters,type:size,axis:width,field:“Crown_EW”,/树冠横向宽度valueUn
10、it:Meters,type:size,axis:depth,field:“Crown_NS”,/树冠纵向宽度valueUnit:Meters;layer.renderer=crownRenderer;点聚类 FeatureReductionClusterlayer.featureReduction=type:cluster,/最小符号大小clusterMinSize:10,/标注信息labelingInfo:,/弹窗信息popupTemplate:;3D 符号可视化layer.renderer=type:simple,/autocasts as new SimpleRenderer()sym
11、bol:type:web-style,/autocasts as new WebStyleSymbol()styleName:My3DSymbolsStyle,name:MySymbolName;layer.renderer=type:simple,symbol:type:point-3d,symbolLayers:type:object,resource:href:./model.gltf;微件 widget微件的使用分两个部分:微件和微件的 viewModel。微件类负责处理用户界面(UI),即微件如何通过 DOM 显示和处理用户交互,例如Sketch 微件。viewModel 部分负责小
12、部件的底层功能,也就是它的业务逻辑,例如SketchViewModel。const sketch=new Sketch(layer:graphicsLayer,view:view,polygonSymbol:polygonSymbol);const sketchViewModel=new SketchViewModel(view:view,layer:graphicsLayer,polygonSymbol:polygonSymbol);二、GeoScene JS API 新特性新特性以及特色功能介绍Task 任务已被弃用,并更新到 rest 模块。不需要构造函数,直接使用,便于模块化管理。原:
13、引入task/QueryTask 需要初始化var queryTask=new QueryTask(url:queryUrl);var query=new Query();query.where=objectid 100;queryTask.executeForCount(query).then(function(results)console.log(results););新:引入rest/query 无需初始化query.executeForCount(queryUrl,where:objectid 100).then(function(count)console.log(count);)
14、;Task弃用MediaLayer 类 用于将图像(ImageElement)或 视频(VideoElement)元素添加到地图上的指定位置。可用于显示天气数据、卫星图像、航拍和无人机图像或视频等。媒体图层 MediaLayer设置四至范围以及平面的旋转角度,确定图像或视频的矩形范围。通过设置四边形的四个角点,确定图像或视频的边框范围。CornersGeoreferenceExtentAndRotationGeoreference四至范围和旋转:媒体图层 MediaLayerconst imageElement=new ImageElement(image:media/logo.png,geo
15、reference:newExtentAndRotationGeoreference(extent:new Extent(spatialReference:wkid:102100,xmax:12959698.393847818,xmin:12952758.156301834,ymax:4855126.079752774,ymin:4851681.0902764015,),rotation:30);/设置媒体图层数据源const layer=new MediaLayer(source:imageElement,title:image_extentRotation,);map.add(layer)
16、;角点设置:媒体图层 MediaLayerconst videoElement=new VideoElement(video:media/video.mp4,georeference:new CornersGeoreference(bottomRight:new Point(x:12961110.445705527,y:4854279.7765457565,spatialReference:wkid:102100),bottomLeft:new Point(x:12955034.806689683,y:4857787.940998493,spatialReference:wkid:102100
17、),topRight:new Point(x:12964921.528035542,y:4858736.962676982,spatialReference:wkid:102100),topLeft:new Point(x:12957363.7325022,y:4863196.465240972,spatialReference:wkid:102100);const videolayer=new MediaLayer(source:videoElement,opacity:0.9,title:video_Corners,);map.add(videolayer);体素图层VoxelLayerV
18、oxelLayer图层表示多维的体积数据。例如,大气或海洋数据、地下地质模型或时空立方体都可以可视化为体素图层。VoxelLayer的常用属性:currentVariableId:当前显示变量Id。renderMode:渲染模式,包括volume和surfaces两种。VoxelVolumeStyle的verticalExaggeration:用于调整垂直比例,夸张化显示体素。Binning 将数据聚合到预定义的单元格,有效地将点数据表示为网格多边形图层。通常,网格采用连续色带进行样式设置,并标有网格中包含的点数。是在MapView中实现点密度的一种可视化方式。客户端分箱聚合 FeatureR
19、eductionBinning类似AggregatePoint工具客户端分箱聚合 FeatureReductionBinninglayer.featureReduction=type:binning,fixedBinLevel:3,fields:/添加聚类的字段,renderer:type:simple/分箱格网的样式,popupTemplate:content:“这个格网包含aggregateCount 点要素.,/分箱格网的弹出框设置,labelingInfo:/分箱格网的样式;通过向FeatureLayer、CSVLayer、GeoJSONLayer、WFSLayer或OGCFeatur
20、eLayer的featureReduction属性提供一个FeatureReductionBinning实例来配置分箱。fixedBinLevel定义了用于聚合的geohash 级别。数字越大,分辨率越高。等级宽度()高度()宽度(公里)高度(公里)145455,0094,985211.2511.251,2521,24632.8132.81331331240.7030.703787850.1760.176201960.0440.0444.94.970.0110.0111.21.280.0030.0030.3060.30490.0010.0010.0760.076PieChartRenderer
21、 可以为图层中的每个要素创建一个饼图。每个饼图的值和颜色在attributes 属性中指定。限制:仅在 2D MapView中渲染;仅支持包含点或多边形几何的图层类型:FeatureLayer、CSVLayer、GeoJSONLayer、WFSLayer和OGCFeatureLayer;不支持设置了FeatureReductionCluster的图层;饼图渲染 PieChartRendererlayer.renderer=type:pie-chart,/autocasts as new PieChartRenderer()attributes:field:ELEMENTARY_SCHOOL,l
22、abel:“小学,color:red,field:MIDDLE_SCHOOL,label:“中学,color:blue,field:HIGH_SCHOOL,label:“高中,color:orange,.;新版本:1、HeatmapRenderer 使用 WebGL 进行渲染。2、计算密度的底层算法已更新为使用内核密度而不是高斯模糊。与Pro中密度工具算法一致。3、添加了referenceScale属性,允许您将热图可视化锁定在特定比例,以便在放大和缩小时显示一致。热力图渲染 HeatmapRendererlayer.renderer=type:heatmap,field:crime_coun
23、t,colorStops:ratio:0,color:rgba(255,255,255,0),ratio:0.2,color:rgba(255,255,255,1),ratio:0.5,color:rgba(255,140,0,1),ratio:0.8,color:rgba(255,140,0,1),ratio:1,color:rgba(255,0,0,1),minDensity:0,maxDensity:500,radius:10;renderer.referenceScale=10000;天气微件 weather widget天气微件具有丰富的天气效果,如晴天、多云、下雨、下雪和有雾等。v
24、iew.environment.weather=type:rainy,cloudCover:0.7,precipitation:0.3;/初始化微件const widget=newWeather(view:view);/加载到布局中view.ui.add(widget,top-right);WebGL 扩展 externalRenderersSceneView使用WebGL在屏幕上呈现地图场景。externalRenderers 类,可获取场景的webgl对象,来集成外部的渲染器。开发者既可以直接编写WebGL 代码,也可以与第三方 WebGL 库集成。自定义的渲染器,通过add和remove
25、方法添加到ScenView或从ScenView中移除。地理坐标与世界坐标(右手)坐标系地理坐标与世界坐标(右手)坐标系let myExternalRenderer=vbo:null,setup:function(context)/创建缓冲区对象,用于存储顶点和着色器数据this.vbo=context.gl.createBuffer();/绑定缓冲区对象并写入数据context.gl.bindBuffer(gl.ARRAY_BUFFER,this.vbo);let positions=new Float32Array(0,0,0,1,0,0,0,1,0);context.gl.bufferDa
26、ta(gl.ARRAY_BUFFER,positions,gl.STATIC_DRAW),render:function(context)context.gl.bindBuffer(gl.ARRAY_BUFFER,this.vbo);/绘制三角形图元context.gl.drawArrays(gl.TRIANGLES,0,3);externalRenderers.add(view,myExternalRenderer);三、三维应用场景分享白模、BIM、倾斜等数据的应用场景展示与分析三维数据的查询统计数据的查询、统计BIM模型场景展示BIM数据结合微件,楼层构建器与剖切城市白模可视化效果基于WebGL,对渲染器的扩展三维场景视频投放地理坐标系、世界坐标系、相机坐标系、纹理坐标系的相互转换三维分析能力 限高分析根据网格数据坐标Z值的大小,条件渲染三维分析能力 可视域分析绘制视线,得到观察角度、分析半径、计算空间模型网格面可见性