cesium快速掌握教程 Cesium开发工具篇01组件重写

在刚开始的入门篇中,我们讲过 Cesium 小组件的显隐,感兴趣的小伙伴可以查看我前面写过的文章 Cesium初始化界面介绍及相关小组件显隐 。那问题来了,这些组件除了能控制显隐,是否能在不修改源码的基础上对其进行扩展重写呢?答案是当然可以!但并不是所有的组件都能重写,本节主要讲解在不修改源码的基础上,如何对以下三个常用的控件进行修改,以达到快速实现实际中业务需求的功能。当然,如果您对 Cesium 源码研究得比较深入,也可以通过修改源码的方式实现。

homeButton组件

homeButton 功能在实际的应用场景中很常见而且功能也很实用,该组件的主要功能是返回到系统初始化时的位置。默认是整个球的位置,如下图:

cesium快速掌握教程 Cesium开发工具篇01组件重写(1)

但是在实际的业务场景中,一般初始化范围都是某一个城市或园区的位置,如果使用 Cesium 自带的 homeButton 组件,就需要对其进行修改,使我们在点击homeButton时,相机不是定位到Cesium自带的默认位置,而是定位到我们想要的位置。我们该如何修改呢?

1)修改相机的默认矩形范围

Cesium.Camera.DEFAULT_VIEW_RECTANGLE=Cesium.Rectangle.fromDegrees( 110.15, 34.54, 110.25, 34.56 );//Rectangle(west,south,east,north)

2)在 homeButton 的 viewModel 中添加监听事件

if(viewer.homeButton){ viewer.homeButton.viewModel.command.beforeExecute.addEventListener( function(e){ e.cancel=true; //你要飞的位置 viewer.camera.flyTo({ destination:Cesium.Cartesian3.fromDegrees(117.16,32.71,15000.0), }); } ); }

Geocoder组件

Geocoder 是地理编码的意思,我们常用的 POI 搜索就是就是 Geocoder 的功劳。通过查看 Cesium 源码(Source/Widgets/Geocoder/GeocoderViewModel.js 第73行),我们发现Cesium 默认采用的是 Bing 地图服务来实现地理编码的功能,并且是通过 geocode 方法实现的。那么我们就可以通过覆写 geocoder 方法的方式来实现自定义的地理编码服务,下面我们重写geocode方法,将 Cesium 默认的 Bing 地图服务改为OSM地图服务。

functionOpenStreetMapNominatimGeocoder(){} OpenStreetMapNominatimGeocoder.prototype.geocode=function(input){ varurl="https://nominatim.openstreetmap.org/search"; varresource=newCesium.Resource({ url:url, queryParameters:{ format:"json", q:input, }, }); returnresource.fetchJson().then(function(results){ varbboxDegrees; returnresults.map(function(resultObject){ bboxDegrees=resultObject.boundingbox; return{ displayName:resultObject.display_name, destination:Cesium.Rectangle.fromDegrees( bboxDegrees[2], bboxDegrees[0], bboxDegrees[3], bboxDegrees[1] ), }; }); }); }; varviewer=newCesium.Viewer("cesiumContainer",{ geocoder:newOpenStreetMapNominatimGeocoder(), });

BaseLayerPicker组件

Cesium为我们提供了默认的底图、地形图的选择面板,通过修改baseLayerPicker的属性ture或false来控制显隐,通过选择面板中的底图或地形图来实现对应图层的切换与显示。Cesum 提供的默认选择面板如下图所:

cesium快速掌握教程 Cesium开发工具篇01组件重写(2)

这些图层都是在线的资源,如果是离线环境,或者是只显示客户提供的几个图层数据,我们该如何实现呢。要实现这个功能,首先,我们看一下 BaseLayerPicker 的主要逻辑关系图,如下图。

cesium快速掌握教程 Cesium开发工具篇01组件重写(3)

从上图我们可以看出,对于开发者而言,要实现不同的ImageryProvider,只需要提供不同的ProviderViewModel,比如BingMap、OSM、ArcGIS、GoogleMaps的,这样在BaseLayerPicker的UI中,就会有多个Provider供用户选择,而交互则由BaseLayerPickerViewModel类负责,用户并不需要关心内部的实现,BaseLayerPickerViewModel类已经帮我们都实现了。下面我们利用 BaseLayerPicker 的逻辑关系,实现自定义的 ImageryProvider(高德矢量图)和 TerrainPovider(ArcGIS地形),并将其显示在选择器面板中。下面为核心代码和结果截图。

//自定义影像图层 varimageProviderVMs=[]; letgaodeImageProvider=newCesium.UrlTemplateImageryProvider({ url: "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", subdomains:["1","2","3","4"], }); vargaodeVM=newCesium.ProviderViewModel({ name:"高德矢量", iconUrl:Cesium.buildModuleUrl( "Widgets/Images/ImageryProviders/openStreetMap.png" ), tooltip:"高德矢量地图服务", creationFunction:function(){ returngaodeImageProvider; }, }); imageProviderVMs.push(gaodeVM); viewer.baseLayerPicker.viewModel.imageryProviderViewModels=imageProviderVMs;

//自定义地形图层 varterrainProviderVMs=[]; varterrainProvider=newCesium.ArcGISTiledElevationTerrainProvider({ url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer", token: "KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..", }); vararcgisVM=newCesium.ProviderViewModel({ name:"ArcGIS地形", iconUrl:Cesium.buildModuleUrl( "Widgets/Images/TerrainProviders/Ellipsoid.png" ), tooltip:"ArcGIS地形服务", creationFunction:function(){ returnterrainProvider; }, }); terrainProviderVMs.push(arcgisVM); viewer.baseLayerPicker.viewModel.terrainProviderViewModels=terrainProviderVMs;

cesium快速掌握教程 Cesium开发工具篇01组件重写(4)

获取完整代码,可查看本人 GitHub 地址https://github.com/ls870061011/cesium_training/tree/main/examples 中的3_1部分。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页