Skip to content
On this page

快速上手

引入

首先我们提供两种引入方式,npm 和 cdn 方式。

NPM引入方式

下载安装依赖

shell
npm install smart3d --registry http://172.16.11.21:4873

安装好依赖后,import使用

shell
import * as Cesium from '@smart/cesium';
import * as smart3d from 'smart3d';
import 'smart3d/dist/smart3d/smart3d.css';

CDN使用方式:(或去下载产品,本地使用)

shell
<link rel="stylesheet" href="http://www.southsmart.com/smartmap/smart3d/smart3d/smart3d.css">
<script type="text/javascript" src="http://www.southsmart.com/smartmap/smart3d/Cesium/Cesium.js"></script>
<script type="text/javascript" src="http://www.southsmart.com/smartmap/smart3d/smart3d/smart3d.js"></script>

创建Viewer

我们可以简单的创建Viewer, 详细请看Viewer

shell
var viewer = new smart3d.Viewer('container', {
  sceneMode: smart3d.SceneMode.SCENE3D,
  scene3DOnly: true
});

创建好viewer,那么接下来可以基于我们的smart3d viewer创建你自己的场景。例如:使用测量API的距离测量

shell
var distanceHandler = new smart3d.MeasureHandler(viewer, smart3d.MeasureMode.Distance);
distanceHandler.activate();

提示

SMART3D_GLOBAL_CONFIG 是Smart3D库提供的全局配置项,它可以配置静态路径,天地图Token等。

SMART3D_GLOBAL_CONFIG.SMART3D_BASE_URL 若是引入相对路径时,可以不写,但若是出现静态资源加载404,需要设置该值,让库去找你的静态资源位置。

shell
window.SMART3D_GLOBAL_CONFIG = {
  SMART3D_BASE_URL: 'smart3d' // smart3d的路径
};
// 记得 Cesium 也需要配置哦
window.CESIUM_BASE_URL = '/';

Released From SouthSmart