react使用supermap webgl

最新推荐文章于 2023-08-28 15:41:47 发布

崽崽的谷雨

最新推荐文章于 2023-08-28 15:41:47 发布

阅读量1.5k

点赞数

分类专栏： js React Cesium

本文链接：https://blog.csdn.net/weixin_44058725/article/details/105683985

版权

React 同时被 3 个专栏收录

77 篇文章 8 订阅

订阅专栏

53 篇文章 2 订阅

订阅专栏

Cesium

10 篇文章 15 订阅

订阅专栏

我在使用supermap webgl加载镶嵌地形的时候报错DeveloperError: Expected scalar to be typeof number, actual typeof was undefined Error。找了很久的原因原来是使用版本太低只要，更新到新版本即可（10i，9D）下载地址

SuperMap iClient 3D for WebGL 一款在服务式 GIS 架构体系中，无任何插件，跨浏览器的客户端产品。它基于Cesium开源框架,面向 HTML 5 的三维应用开发，快速构建内容丰富、响应迅速、体验流畅的三维真空间应用。(需要配合iserver一起使用)。

一.react中使用webgl

1.下载下来文件格式如下：

文件格式

2.进入Build把Cesium文件夹复制下来（核心用到Cesium其他文件都是例子可以不用管）

3.把这个文件复制到static,public或者自己新创建一个文件。如果报这个错就把Cesium放到src目录下即可（这个错就是不能引入src目录之外的东西）

Module not found: You attempted to import ****** which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

我就是开了一个新文件夹

4.在index.html里引入文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="./Cesium/Widgets/widgets.css">//引入css
  <script type="text/javascript" src="./Cesium/Cesium.js"></script>//引入js
</head>

<body>
  <div id="root"></div>
</body>

</html>

主要代码：

5.创建3d地球

import React from "react";
class CesiumMap extends React.Component {
   
    componentDidMount() {
        const imageryProvider = new Cesium.SingleTileImageryProvider({//提供单个顶级图像图块。
            url:img
        });
        const terrainProvider = new Cesium.CesiumTerrainProvider({ //为椭球表面提供地形或其他几何形状
            url:'',
            requestWaterMask: true, 
            requestVertexNormals: true, 
            isSct: true,
        });
       
     
        let cesiumView = new Cesium.Viewer('cesium'  //用于构建应用程序的基本小部件 它将所有标准Cesium小部件组合成一个可重用的包 可查看https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html?classFilter=Viewer
            , {
                animation: false,
                baseLayerPicker: false,
                fullscreenButton: false,
                geocoder: false,
                homeButton: false,
                infoBox: false,
                sceneModePicker: false,
                selectionIndicator: true,
                timeline: false,
                navigationHelpButton: false,
                scene3DOnly: true,
                 imageryProvider,
                terrainProvider
            }
        )
        this.Viewer = cesiumView;
    }
    componentWillUnmount(){
    
      }
    render() {
        return (
            <div id="cesium" className={styles.cesium} >
                <div id="bubble" style={{ bottom: 0, left: '82%', display: 'none', position: 'absolute', 'zIndex': '100', backgroundColor: '#fff', borderRadius: '5px', padding: '10px', boxShadow: '3px 3px 5px 0px rgba(33, 33, 33, 0.5)' }} >
                    <div style={{ overflowY: 'scroll', height: '150px', lineHeight: '24px' }} id="tableContainer"></div>
                </div>
            </div>
        )
    }
}

这样就可以了。写的不好或有错请谅解。我是初学者。

vue使用可参考：vue使用webgl vue使用webgl2

html使用：参考1-4步骤

cesium原生方法api：cesium原生api

cesium原生示例：cesium原生示例

supermap iclent官网网址：supermap iclent官网网址

supermap webgl示例：supermp webgl官网示例

supermap webgl api:supermap webgl api

cesium官网：cesium官网

supermap问答社区有问题可以去问找答案：supermap问答社区

cesium社区：cesium社区

最后因为superMap这些产品都基于cesium源码开发，cesium原生方法也适用于supermap.

崽崽的谷雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
react使用supermap webgl

我在使用supermap webgl加载镶嵌地形的时候报错DeveloperError: Expected scalar to be typeof number, actual typeof was undefined Error。找了很久的原因原来是使用版本太低只要，更新到新版本即可（10i，9D）下载地址SuperMap iClient 3D for WebGL 一款在服务式 GIS 架构...
复制链接

扫一扫