蔣雪雪-GeoScene JS API 高級開發.pdf

《蔣雪雪-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數據結合微件，樓層構建器與剖切城市白?？梢暬Ч赪ebGL,對渲染器的擴展三維場景視頻投放地理坐標系、世界坐標系、相機坐標系、紋理坐標系的相互轉換三維分析能力 限高分析根據網格數據坐標Z值的大小，條件渲染三維分析能力 可視域分析繪制視線，得到觀察角度、分析半徑、計算空間模型網格面可見性