react-cesiumgo

// ++++
const cesiumSource = 'node_modules/react-cesiumgo/dist';
const cesiumWorkers = '../dist/Workers';
const CopyWebpackPlugin = require('copy-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

return {
  amd: {
        toUrlUndefined: true,// ++++
  },
  resolve:{
    alias: { 
        'react-native': 'react-native-web',
        cesium: path.resolve(cesiumSource),// ++++
      },
  },
  plugins:[
    new NodePolyfillPlugin(),// ++++
      new CopyWebpackPlugin({// ++++
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
        ]
      }), 
      new webpack.DefinePlugin({// ++++
        CESIUM_BASE_URL: JSON.stringify('/'),
      }),
  ]
}

import React, { Component } from 'react';
import { Map, Cesium } from 'react-cesiumgo';

class App extends Component {
  componentDidMount() {
     this.viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(116.34453261995247, 39.996079774527296, 3000),
      orientation: {
        heading: Cesium.Math.toRadians(45.0), // east, default value is 0.0 (north)
        pitch: Cesium.Math.toRadians(-90),    // default value (looking down)
        roll: Cesium.Math.toRadians(100),                            // default value
      }
    });
  }
  render() {
    return (
      <div className="App" style={{ width: "100%", height: "100%" }}> 
          <Map ref={e => { this.viewer = e?.viewer }} />
      </div>
    );
  }
}

export default App;

隐藏内置按钮

复位按钮

this.viewer.homeButton._container.style.display = "none";

位置查询按钮

this.viewer.scene.globe.depthTestAgainstTerrain = true;

切换底图按钮

this.viewer.baseLayerPicker._container.style.display = "none";

2D/3D切换按钮

this.viewer.sceneModePicker._container.style.display = "none";

props

prop	描述	类型	默认值
ref	获取地图视图（Viewer）	(e) => Viewer	-
options	地图初始化的参数	object	{}

options

prop	描述	类型	默认值
initOptions	地图初始化参数	object	{infoBox:false,selectionIndicator: false, scene3DOnly: true,}
defaultShow	是否隐藏内置按钮和logo	boolean	true
debugShow	是否展示帧数、深度测试	boolean	false
initPosition	初始坐标	array	-
clickMapEvent	地图点击事件	( position, handler, event ) => { }	false

Brand添加div，并跟随坐标

import React, { Component } from 'react';
import { Map,  Brand, Cesium } from 'react-cesiumgo';

Cesium.Ion.defaultAccessToken = ''
class App extends Component {
  state = {}
  componentDidMount() {
    this.setState({ viewer: true })
  }
  render() {
    return (
      <div className="App" style={{ position: "relative", overflow: "hidden" }}>
        <Map ref={e => { this.viewer = e?.viewer }} />
        {
          this.viewer && this.state.viewer ? (
            <Brand
              viewer={this.viewer}
              point={true}// 是否显示箭头动画凸显
              param={{
                position: [112.651343833, 22.0013314003],// 坐标
                zIndex: 1,// 层级
                hide: true,// 显隐
                Offset: [0, 0],// 偏移量
                maxHeight: 1000000,// 最大高度
                minHeight: 100,// 最小高度
              }}
            >
              <div className='Small-brand'>
                <div className='Small-brand-title'>北洋水尺</div>
                <div className='Small-brand-param'>29.36 m³/s</div>
              </div>
            </Brand>
          ) : null
        }
      </div>
    );
  }
}

export default App;	

LayerSkyMap 加载天地图

用于从支持OGC Web Map Tile Service (WMTS)标准的服务中获取和显示地图瓦片的类。以下是该类的一些关键API参数、方法及其功能：

const SkyMap = new LayerSkyMap(viewer, props)

• viewer: 视图对象，用于显示图像

• props: 属性对象，用于设置实例的属性

实例化LayerSkyMap后打印SkyMap.props可查看具体参数

LayerSkyMap

prop	描述	类型	默认值
init	初始化天地图	function	-
remove	销毁天地图	function	-
setLayerHide	设置天地图显隐	setLayerHide (true/false)	-

import React, { Component } from 'react';
import { Map, Cesium } from 'react-cesiumgo';
import MapProp, { LayerSkyMap } from 'react-cesiumgo/dist/lib';

Cesium.Ion.defaultAccessToken = '';
class App extends Component {
  state = {}
  componentDidMount() {
    // 只渲染一个服务时可以这样
    // 在线天地图（影像）服务地址(墨卡托投影)
    new LayerSkyMap(this.viewer, { url: MapProp.SkyMapUrl.TDT_IMG_W.URL, token: "", }).init();
    // 在线天地图（影像）中文标记服务(墨卡托投影)
    new LayerSkyMap(this.viewer, { url: MapProp.SkyMapUrl.TDT_CIA_W.URL, token: "", }).init();
    // *****************换种方式******************
    // 需要渲染多个服务时可以这样	
    const SkyMap = new LayerSkyMap(this.viewer, {token: "token"})
    // 初始化
    const imageryLayers = SkyMap.init({ url: "url",key:"key" });
    // 隐藏
    SkyMap.setLayerHide("name", false);
    // 销毁
    SkyMap.remove("name");
    // 获取此实例下的所有服务
    console.log(SkyMap.imageryLayersList);// 是一个对象
  }
  render() {
    return (
      <div className="App" style={{ width: "100%", height: "100%" }}>
        <Map ref={e => { this.viewer = e?.viewer }} />
      </div>
    );
  }
}

export default App;

LayerGeoServer加载GeoServer服务

用于从支持OGC Web Map Service (WMS)标准的服务中获取和显示地图瓦片的类。这个类允许Cesium应用程序集成来自各种地理信息服务器提供的卫星影像、地形和其他栅格数据。以下是该类的一些关键API参数、方法及其功能：

const ctrGeoServer = new LayerGeoServer(viewer, props)

• viewer: 视图对象，用于显示图像
• props: 属性对象，用于设置实例的属性

实例化LayerGeoServer后打印ctrGeoServer.props可查看具体参数

LayerGeoServer

prop	描述	类型	默认值
init	初始化服务	function	-
remove	销毁服务	function	-
setLayerHide	设置服务显隐	setLayerHide (true/false)	-

import React, { Component } from 'react';
import { Map, Cesium } from 'react-cesiumgo';
import MapProp, { LayerGeoServer } from 'react-cesiumgo/dist/lib';

Cesium.Ion.defaultAccessToken = '';
class App extends Component {
  state = {}
  componentDidMount() {
    // 只渲染一个服务时可以这样
    const imageryLayers = new LayerGeoServer(this.viewer, { url: "url", layers: "name" }).init()
    // *****************换种方式******************
    // 需要渲染多个服务时可以这样
    const ctrGeoServer = new LayerGeoServer(this.viewer)
    // 初始化
    const imageryLayers = ctrGeoServer.init({ url: "url", layers: "name", zIndex: 20  });
    // 隐藏
    ctrGeoServer.setLayerHide("name", false);
    // 销毁
    ctrGeoServer.remove("name");
    // 获取此实例下的所有服务
    console.log(ctrGeoServer.imageryLayersList);// 是一个对象
    MapProp.layerSort(this.viewer);// 对图层服务排序（只对有zIndex属性服务排序）
  }
  render() {
    return (
      <div className="App" style={{ width: "100%", height: "100%" }}>
        <Map ref={e => { this.viewer = e?.viewer }} />
      </div>
    );
  }
}

export default App;

...