react +cesium 加载六种数据模型

一、数据格式（一部分）

数据源类型	服务类型
Shp	web地图二维服务（wfs） web地图瓦片服务（wmts）（推荐）放在第一行
3dtiles	三维数据服务
geoJSON	web地图二维服务
glTF	三维数据服务
postGIS	web地图二维服务（wfs） web地图瓦片服务（wmts）（推荐）放在第一行
Tiff	web地图二维服务（w

二、不同数据渲染方式和交互
（1）数据源类型Shp
    服务类型为wfs

const viewer = new Cesium.Viewer("cesiumContainer", {
  sceneMode: Cesium.SceneMode.SCENE2D,
  timeline: false,
  animation: false,
});

const dataSource = Cesium.GeoJsonDataSource.load(serverUrl); // serverUrl为服务地址
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource); //移动到指定视图位置

wfs数据加载后，在地球上看不到，利用viewer.zoomTo定位到数据所在位置
测试时，发现加载某些wfs数据时，ceisum报错，查询资料是cesium加载GeoJSON默认不支持EPSG:3857，添加如下代码即可解决：

import { default as proj4 } from 'proj4';

Cesium.GeoJsonDataSource.crsNames["urn:ogc:def:crs:EPSG::3857"] = Cesium.GeoJsonDataSource.crsNames["EPSG:3857"] =
    function (
        coordinates
    ) {
        const firstProjection =
            'PROJCS["WGS 84 / Pseudo-Mercator",GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]],PROJECTION["Mercator_1SP"],PARAMETER["central_meridian",0],PARAMETER["scale_factor",1],PARAMETER["false_easting",0],PARAMETER["false_northing",0],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AXIS["X",EAST],AXIS["Y",NORTH],EXTENSION["PROJ4","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs"],AUTHORITY["EPSG","3857"]]';
        const secondProjection =
            'GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]]';

        const xa = coordinates[0];
        const ya = coordinates[1];

        const newCoordinates = proj4(
            firstProjection,
            secondProjection,
          [xa, ya]
        );
        return Cesium.Cartesian3.fromDegrees(
            newCoordinates[0],
            newCoordinates[1],
            0
        );
    };

服务类型为wmts

const viewer = new Cesium.Viewer("cesiumContainer", {
  sceneMode: Cesium.SceneMode.SCENE2D,
  timeline: false,
  animation: false,
});

const image = new Cesium.WebMapTileServiceImageryProvider({
  	url : serverUrl, //serverUrl为服务地址
		layer: layer,    // 请查看上述（2）serverUrl服务地址参数拼接
		// format: "image/png",
		style:'',
		maximumLevel: 21,
		tileMatrixSetID: "EPSG:900913",
});

viewer.imageryLayers.addImageryProvider(image);

viewer.camera.flyTo({
  	destination : Cesium.Rectangle.fromDegrees(...bbox) //bbox为west, south, east, north
});

wmts数据加载后，在地图上看不到，viewer.camera.flyTo定位到数据所在位置

（2）数据源类型3dtiles

const viewer = new Cesium.Viewer("cesiumContainer", {
  sceneMode: Cesium.SceneMode.SCENE2D,
  timeline: false,
  animation: false,
});

const leadorOut_tileset = l3d.tiles.load3DTiles(viewer, {
	url: serverUrl, //数据url
	sparsenessNum: 32, //数据加载密度，值越大数据越稀疏
	transformParams: {
        rx: 0,
        ry: 0,
        rz: 0,
        scale: 1,
        tx: 116.305379,
        ty: 39.979507,
        tz: 27,
	}, //数据旋转角度
});

l3d.camera.flyToFeatures(this.viewer, {
		feature: leadorOut_tileset, //定位要素
		pitch: -60, //俯仰角
		range: 200, //视角范围
		duration: 2, //飞行时间
});

transformParams 中7个参数，为可编辑调整参数，接口返回中没有这些参时，前端默认展示一些固定参数，前端设置参数后，下次渲染时，接口会返回设置的值，用这些值展示。

（3）数据源类型geoJSON
          同（1）数据源类型Shp 中 wfs服务类型数据
（4）数据源类型glTF

const viewer = new Cesium.Viewer("cesiumContainer", {
  sceneMode: Cesium.SceneMode.SCENE2D,
  timeline: false,
  animation: false,
});

const gltf = viewer.entities.add({
	name: 'gltf',
	position: new Cesium.Cartesian3.fromDegrees(
		114.395204381122,
		30.4454315702456,
		0,
	),
	model: {
		uri: serverUrl, // 模型路径
	},
});
viewer.zoomTo(gltf);

数据加载后，在地图上看不到，viewer.zoomTo定位到数据所在位置。
此数据类型可调整参数rx,ry,rz,scale,tx,ty,tz 有7个，接口返回中没有这些参时，前端默认展示一些固定参数，前端设置参数后，下次渲染时，接口会返回设置的值，用这些值展示。

（5）数据源类型postGIS

        同（1）数据源类型Shp

（6）数据源类型Tiff
         服务类型为wms 

const viewer = new Cesium.Viewer("cesiumContainer", {
  sceneMode: Cesium.SceneMode.SCENE2D,
  timeline: false,
  animation: false,
});

const provider22 = new Cesium.WebMapServiceImageryProvider({
	url: URL,
	layers: layer,
	parameters: {
		service : 'WMS',
		format: "image/png",
		transparent: true,
	}
});
  
viewer.imageryLayers.addImageryProvider(provider22);//加载geoserver 发布的wms服务

viewer.camera.flyTo({
  	destination : Cesium.Rectangle.fromDegrees(...bbox) //bbox为west, south, east, north
});

wms数据加载后，在地图上看不到，viewer.camera.flyTo定位到数据所在位置

服务类型为wmts
同（1）数据源类型Shp 中 wmts服务类型数据

若有收获，就点个赞吧