我在使用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>
主要代码:
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">//引入css
<script type="text/javascript" src="./Cesium/Cesium.js"></script>//引入js
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.