Appearance
快速上手
引入
首先我们提供两种引入方式,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 = '/';