Cesium加载各类数据总结

Posted 2021-03-26 xiaoguniang0204

接触到的加载数据类型：源地图、shp、Geojson、png、wms、地形底图

1、Cesium加载各类源地图（在线的影像服务）

#此类加载的本质在于 new Cesium.ImageryProvider()

Api defination：“Provides imagery to be displayed on the surface of an ellipsoid. This type describes an interface and is not intended to be instantiated directly.”

imagerProvider不能直接实例化，必须使用具体的接口

var viewer = new Cesium.Viewer("cesiumContainer",

{imageryProvider:new Cesium.加载数据方式{

  url:加载数据类型}),

　其他控件设置

});

 

#加载在线影像服务的方式主要包括：

ArcGisMapserverImageryProvider - Arcgis地图服务

BingMapsImageryProvider - BIngMaps地图服务

createOpenStreetMapImageryProvider

createTileMapServiceImageryProvider -提供已发布的瓦片格式（provides tiled imagery as generated by MapTiler, GDAL2Tiles, etc.）

　　　　　　　　　　　　　　　　　　　　　地图加载：TMS、GDAL2Tiles处理后的发布数据

GoogleEarthEnterpriseImageryProvider -Provides tiled imagery using the Google Earth Enterprise REST API

singleTileImageryProvider -单一瓦片加载方式

TileCoordinationImageryProvider - 常用于地形加载

UrlTemplateImageryProvider -url模版的影像服务加载，较为常用的方式，

　　　　　　　　　　　　　　　　api中url : ‘https://cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg‘以及其他地图的api地址

WebMapServiceImageryProvider:Provides tiled imagery hosted by a Web Map Service (WMS) server.

　　　　　　　　　　　　　　　　提供瓦片化的wms服务

WebMapTilesServiceImageryProvider:提供一种兼容性的瓦片wms服务

　　

#追加地图服务：

var addlayer = viewer.scene.imagerlayers;Imagerylayers影像图层容器

var newmap = addlayer.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url:地址},其他设置)；

可以对newmap 设置透明度、亮度等：newmap.alpha（0透明，1不透明），newmap.brightness(>1增加亮度，<1降低亮度)

#追加个别影像

var specilaMap = addlayer.addImageryProvider(new Cesium.SingleTileImageryProvider(

　　　　　　　　　　　　　　　　　　　　　　　　　　{url:....png},

　　　　　　　　　　　　　　　　　　　　　　　　　　rectangle:cesium.rectangle.fromDegrees(111,31,113,33))//放置范围

#官方的ImageryProvider详细说明：

Cesium内置以下ImageryProvider：

• Web Map Service (WMS) – OGC标准，用于从分布式地理空间数据库中请求地理区域的地图块。在Cesium中，请参见WebMapServiceImageryProvider。
• Tile Map Service (TMS) – 访问瓦片图的Rest接口。瓦片图被转换为MapTiler或GDAL2Tiles.参见TileMapServiceImageryProvider。
• OpenGIS Web Map Tile Service (WMTS) – 一个OGC标准，用于在互联网上提供预先绘制的地理参考瓦片图。在Cesium中，请参见WebMapServiceImageryProvider。
• OpenStreetMap – 访问OpenStreetMap瓦片图或任何Slippy瓦片图。有几种方式可以host these tiles 在Cesium中，请参加createOpenStreetMapImageryProvider。
• Bing Maps – 使用Bing Maps REST Services访问瓦片图。 在https://www.bingmapsportal.com/创建Bing地图的keys。在Cesium中, 请参见BingMapsImageryProvider。
• Esri ArcGIS MapServer – 使用ArcGIS Server REST API来访问ArcGIS MapServer上的瓦片图. 在Cesium中,请参见ArcGisMapServerImageryProvider。
• Google Earth Enterprise – 提供对存储Google Earth Enterprise服务器中的图层的访问。在Cesium中，请参见GoogleEarthImageryProvider。
• Mapbox – 使用Mapbox API访问瓦片图. 创建一个账户并提供access token. 在Cesium中, 请参见MapboxImageryProvider。
• Standard image files – 从图片中创建图层。在Cesium中, 请参见SingleTileImageryProvider。
• Custom tiling schemes – 使用UrlTemplateImageryProvider,通过使用URL模板，我们可以连接到大量图像源。 例如, TMS的url模板是 //cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg.
• Tile coordinates – 通过绘制每个瓦片图周围的边界并用其水平、X和Y坐标标记它，显示如何在特定的瓦片方案中将地球划分为多个瓦片图。

2、加载shp主要将shp格式转换为可加载的格式Geojson,或者kml

处理数据可用方法：https://mapshaper.org/或者Geoserver

#直接加载

   var pro = viewer.dataSources.add(Cesium.GeoJsonDataSource.load(“json地址”,

      stroke:Cesium.Color.RED,

      strokeWidth:5,

      fill:Cesium.Color.RED.withAlpha(0.1)

      fill:new Cesium.Color(0, 0, 0, 0)//设置纯透明后，必须点击到polygon边界才显示提示框

     }));

#entity方式加载

      var promise =Cesium.GeoJsonDataSource.load("json地址");

      promise.then(function(dataSource){

        viewer.dataSources.add(dataSource);

        var entities = dataSource.entities.values;

        for (let i = 0; i < entities.length; i++) {

          let entity = entities[i];

          entity.polygon.fill=false;//设置无填充后，必须点击到polygon边界才显示提示框

          entity.polygon.outline = true;

          entity.polygon.outlineColor = Cesium.Color.RED;

          entity.polygon.width=5//无效，polygon.width不能超过1         

        }});

 3、加载geoson同上

topojson、Geojson、普通json三种方式

4、加载图片 一般用于具体位置的放置 SingleTileImageryProvider接口

  var mypic =new Cesium.SingleTileImageryProvider({

    url:"图片地址",

    rectangle:Cesium.Rectangle.fromDegrees(113,31,114,33) //放置样式有很多种，比如ellipse

    });

　viewer.scene.imageryLayers.addImageryProvider(mypic);

//后续追加的一些设置

  mypic.hasAlphaChannel=true;

  mypic.defaultAlpha=0.5;  //初始化的图片透明度修改,此外还可以设置对比度，亮度   

 

5、发布的wms

使用Geoserver发布，网上有很多教程如何使用，使用接口WebMapServiceImageryProvider

      var wmsLayer = new Cesium.WebMapServiceImageryProvider({

          url:"http://127.0.0.1:8083/geoserver/cesium/wms",

          layers:"cesium:county",//Geoserver中的cesium组county层

          fill:false,  //Cesium.Color.PINK.withAlpha(0.1),

          parameters:{

            service:"WMS",

            format:"image/png",

            transparent:true                  

          }});

　　　　viewer.scene.imageryLayers.add(wmsLayer);

 

6、