Vue-iClient3D-WebGL

此为 supermap 官方为 vue 提供的组件

• SuperMap (opens new window)
• SuperMap/Vue-iClient3D-WebGL (opens new window)
• cesiumjs (opens new window)
• cesiumjs-api (opens new window)

安装

• npm 安装

npm install @supermap/vue-iclient3d-webgl

• 引入静态文件

<link href="Cesium/Widgets/widgets.css" rel="stylesheet" />
<script src="Cesium/Cesium.js"></script>

• 更改打包配置

  chainWebpack: configParams => {
    const config = configParams
    config.module
      .rule('rules')
      .test(/\.(png|jpe?g|gif|svg|cur)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .end()
    config.resolve.alias
      .set('css', path.join(__dirname, 'src/assets/css'))
      .set('font', path.join(__dirname, 'src/assets/font'))
      .set('img', path.join(__dirname, 'src/assets/img'))
      .set('js', path.join(__dirname, 'src/assets/js'))
      .set('public', path.join(__dirname, 'public'))
    return config
  },

• 引入组件并使用

// vue-iclient3d-webgl组件库
import "@supermap/vue-iclient3d-webgl/dist/styles/vue-iclient3d-webgl.min.css";
import tool from "./tool/index.js";
window.URL_CONFIG = URL_CONFIG;

Vue.config.productionTip = false;
Vue.use(VueiClient);

内置组件

Viewer

参数

• sceneUrl:加载场景数据，由 supermap 的 iserver 发布提供的场景
• s3mScps:加载 s3m 切片
• collapsed： 开启折叠面板，只有在组合模式时生效

使用

<sm-viewer>
  <sm3d-measure />
</sm-viewer>

除此之外，开可以使用Cesium进行拓展开发

// 使用本地的一张图片初始化地球，建议图片长宽比2:1
let singleTileImageryProvider = new Cesium.SingleTileImageryProvider({
  url: "img/BlackMarble_2016_3km.jpg",
});
viewer.imageryLayers.addImageryProvider(singleTileImageryProvider);

其他组件

• measure: 测量

<sm3d-measure></sm3d-measure>

• viewshed: 可视域分析

<sm3d-viewshed :spatial-analysis-url="spatialAnalysisUrl"></sm3d-viewshed>

• profile: 剖面分析

<sm3d-profile></sm3d-profile>

• shadowquery: 阴影分析

<sm3d-shadowquery></sm3d-shadowquery>

• sightline: 通视分析

<sm3d-sightline></sm3d-sightline>

• sightline: 裁剪 Box

<sm3d-clip-box></sm3d-clip-box>

Cesium

• BingMapsImageryProvider

使用 Bing Maps imagery REST API 提供拼接图像

new Cesium.BingMapsImageryProvider({
  url: "https://dev.virtualearth.net",
  mapStyle: Cesium.BingMapsStyle.AERIAL,
  key: URL_CONFIG.BING_MAP_KEY,
});

• Cartesian3

一个三维笛卡尔点

 new Cesium.Cartesian3.fromDegrees(106.3537, 39.0265, 20),

• SingleTileImageryProvider

提供单个顶级图像平铺。假设单个图像使用 GeographicTilingSchema

let singleTileImageryProvider = new Cesium.SingleTileImageryProvider({
  url: "img/BlackMarble_2016_3km.jpg",
});

• Primitive

基本体表示场景中的几何体

new Cesium.Primitive({
  geometryInstances: instance,
  appearance: new Cesium.EllipsoidSurfaceAppearance({
    material: Cesium.Material.fromType("Checkerboard"),
  }),
});