Fellow Travellers

DIST-Vue-SuperMap

3D
汪洋
字数统计: 2.6k阅读时长: 13 min
2018/10/12 Share

DIST VUE SUPERMAP


基于 VUE 2.x 的 SuperMap iClient 3D for WebGL(built on Cesium)组件

1. 介绍

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

  • SuperMap iServer 服务
  • 地图服务
  • 数据服务
  • 量算服务
  • 查询服务
  • 空间关系服务
  • 专题图服务
  • 空间分析服务类
  • SuperMap 云服务
  • OGC 标准的服务 (WMS、WFS、WMTS、KML)
  • 其他第三方服务，如天地图等

2. 安装

2.1 NPM

1
$ npm install dist-3d-loader --save

2.2 CDN

  • 待完善

3. 快速上手

3.1 使用

3.1.1 全局注册

全局注册将一次性引入超图 Cesium 组件库的所有组件。

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
import Loader from 'dist-3d-loader'

Vue.use(Loader, {
  // cesiumPath 是指引用的Cesium的文件夹路径， 如
  //cesiumPath: './static/Cesium'
  //在线引用
  cesiumPath: 'http://elb-zentao-361931552.cn-northwest-1.elb.amazonaws.com.cn:5335/xdata/FellowTravellers/DIST-3D-Loader/tree/master/docs/Cesium'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<div class="content">
  <sm-viewer>
  </sm-viewer>
</div>
</template>

<style>
.content {
  background-color: #f9f9f9;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

3.1.2 局部注册

如果有按需引入组件的需要，可以选择局部注册超图 Cesium 组件，这将减少工程打包后的容量尺寸。局部注册的 SmViewer 组件必须声明 cesiumPath 属性。所有的独立组件均存放在 DIST-3D-Loader/components 文件夹下，按需引用即可。由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 include 和 exclude 选项命中了组件库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="content">
    <sm-viewer cesiumPath="YOUR_CESIUM_LIB_PATH"></sm-viewer>
  </div>
</template>

<script>
import SmViewer from 'DIST-3D-Loader/components/cesium/viewer.vue'
export default {
  components: {
    SmViewer
  }
}
</script>

<style>
.content {
  background-color: #f9f9f9;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

3.1.3 CDN 全局注册

  • 待完善

3.2 常见问题

  • SmViewer 组件容器本身是一个空的块级元素，如果容器不定义高度，viewer将渲染在一个高度为 0 不可见的容器内。
  • 该项目是通过动态添加script标签引入Cesium 的，因此 SmViewer 组件及其所有子组件的渲染是异步的。因此，请使用在组件的 ready 事件来执行场景 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 Cesium 类，更不要在这些时机修改 model 层。

3.2.1 错误用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <sm-viewer :animation="animation" :camera="camera"></sm-viewer>
</template>
<script>
export default {
  data () {
    return {
      camera: {
        position: {
          longitude: 121.50109,
          latitude: 31.23691,
          height: 2000
        },
        heading: 360,
        pitch: -90,
        roll: 0
      },
      animation: false
    }
  },
  mounted () {
    this.camera.position.longitude = 121.50109
    this.camera.position.latitude = 31.23691
    this.camera.position.height = 500
    this.animation = true
  }
}
</script>

3.2.2 正确用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <sm-viewer :animation="animation" :camera="camera" @ready="ready"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      camera: {
        position: {
          longitude: 121.50109,
          latitude: 31.23691,
          height: 2000
        },
        heading: 360,
        pitch: -90,
        roll: 0
      },
      animation: false
    }
  },
  methods: {
    ready (param) {
      this.camera.position.longitude = 121.50109
      this.camera.position.latitude = 31.23691
      this.camera.position.height = 500
      this.animation = true
    }
  }
}
</script>

3.2.3 Hello world

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <sm-viewer class="viewer" :animation="true" :camera="camera" >
  </sm-viewer>
</template>
<script>
export default {
  data () {
    return {
      camera: {
        position: {
          longitude: 121.50109,
          latitude: 31.23691,
          height: 1000
        },
        heading: 360,
        pitch: -90,
        roll: 0
      }
    }
  }
}
</script>

<style>
.viewer {
  width: 100%;
  height: 400px;
}
</style>
<doc-preview>
  <template>
    <sm-viewer class="viewer" :animation="true" :camera="camera" @ready="ready">
    </sm-viewer>
  </template>
  <script>
  export default {
    data () {
      return {
        camera: {
          position: {
            longitude: 121.50109,
            latitude: 31.23691,
            height: 100000
          },
          heading: 360,
          pitch: -90,
          roll: 0
        }
      }
    },
    methods: {
      ready (param) {
        let imageryLayers = param.viewer.imageryLayers
           let imagery = new Cesium.TiandituImageryProvider({
            mapStyle : Cesium.TiandituMapsStyle.IMG_C
        })
        imageryLayers.addImageryProvider(imagery)
        let labelImagery = new Cesium.TiandituImageryProvider({
            mapStyle : Cesium.TiandituMapsStyle.CIA_C
        })
        imageryLayers.addImageryProvider(labelImagery)
        param.viewer.entities.add({
          id: 'Cesium欢迎你',
          position: param.Cesium.Cartesian3.fromDegrees(121.50109, 31.23691, 100),
          billboard: new param.Cesium.BillboardGraphics({
            image: 'http://elb-zentao-361931552.cn-northwest-1.elb.amazonaws.com.cn:5335/xdata/SH2017GH131/front-end/DIST-3D-Loader/blob/master/docs/favicon.png',
            scale: 0.1
          }),
          label: new param.Cesium.LabelGraphics ({
            text: 'Welcome to Shanghai',
            font: '24px sans-serif',
            horizontalOrigin: 1,
            outlineColor: new Cesium.Color(0, 0, 0, 1),
            outlineWidth: 2,
            pixelOffset: new Cesium.Cartesian2(17, -5),
            style: Cesium.LabelStyle.FILL
          })
        })
      }
    }
  }
  </script>
  <style>
  .viewer {
    width: 100%;
    height: 400px;
  }
  </style>
</doc-preview>

4. 基础

4.1 全局组件事件

事件名 参数 描述
ready {Cesium, viewer} viewer组件渲染完毕时触发，返回一个Cesium的核心类和viewer实例。该项目组件是异步加载，请不要尝试在组件的生命周期中访问 Cesium 核心类和 viewer 实例，如有需要，请在所需组件的 ready 事件回调函数的参数中获取。

4.2 全局组件实例方法

方法名 参数 描述
load 组件加载时执行的抽象方法。
unload 组件卸载时执行的抽象方法。
reload 完成一次组件卸载 / 重新加载的方法。

4.3 常量

  • 待完善

4.4 私有类型

Position

用于描述场景中点的经纬度。

结构
1
2
3
4
5
{
  longitude: Number,
  latitude: Number,
  height: Number
}

4.4 参考

超图WebGL3D官方文档

5. 场景容器

SmViewer是用于构建 Cesium 应用程序的基础部件，它将所有标准的 Cesium 部件组合成一个可重复使用的包。 此部件通常可以利用 mixin 来扩展，以此增加对各种应用程序有用的功能函数。\
场景容器的实质是通过 Cesium.Viewer 初始化的一个 DOM 节点，用于挂载其他 DOM 节点或者组件。此部件初始化完成后默认会有 Cesiumwidget, dataSources、 如果需要二次开发或者手动控制其子组件，可以在 ready 事件中使用返回的 Cesium 和 Viewer 实例进行手动控制。

每一个 Viewer 都会自动初始化一个 CesiumWidget.

5.1 实例属性

静态属性

仅且可以初始化配置，不支持响应式。

Name Type Default Description
navigation Instructions InitiallyVisible Boolean false optional True if the navigation instructions should initially be visible, or false if the should not be shown until the user explicitly clicks the button.
scene3DOnly Boolean false optional When true, each geometry instance will only be rendered in 3D to save GPU memory.
clockViewModel ClockViewModel new ClockViewModel (options.clock) optional The clock view model to use to control current time.
selected Imagery Provider View Model ProviderViewModel optional The view model for the current base imagery layer, if not supplied the first available base layer is used. This value is only valid if options.baseLayerPicker is set to true.
imagery Provider View Models Array.\ createDefaultImagery ProviderViewModels() optional The array of ProviderViewModels to be selectable from the BaseLayerPicker. This value is only valid if options.baseLayerPicker is set to true.
selected Terrain Provider View Model ProviderViewModel optional The view model for the current base terrain layer, if not supplied the first available base layer is used. This value is only valid if options.baseLayerPicker is set to true.
terrain Provider View Models Array.\ createDefaultTerrain ProviderViewModels() optional The array of ProviderViewModels to be selectable from the BaseLayerPicker. This value is only valid if options.baseLayerPicker is set to true.
imagery Provider ImageryProvider new BingMapsImagery Provider() optional The imagery provider to use. This value is only valid if options.baseLayerPicker is set to false.
terrain Provider TerrainProvider new Ellipsoid TerrainProvider() optional The terrain provider to use
skyBox SkyBox optional The skybox used to render the stars. When undefined, the default stars are used.
skyAtmosphere SkyAtmosphere optional Blue sky, and the glow around the Earth’s limb. Set to false to turn it off.
fullscreen Element Element | String document.body optional The element or id to be placed into fullscreen mode when the full screen button is pressed.
use Default Render Loop Boolean true optional True if this widget should control the render loop, false otherwise.
targetFrameRate Number optional The target frame rate when using the default render loop.
show Render Loop Errors Boolean true optional If true, this widget will automatically display an HTML panel to the user containing the error, if a render loop error occurs.
automatically Track DataSource Clocks Boolean true optional If true, this widget will automatically track the clock settings of newly added DataSources, updating if the DataSource’s clock changes. Set this to false if you want to configure the clock independently.
contextOptions Object optional Context and WebGL creation properties corresponding to options passed to Scene.
mapProjection MapProjection new Geographic Projection() optional The map projection to use in 2D and Columbus View modes.
globe Globe new Globe (mapProjection.ellipsoid) optional The globe to use in the scene. If set to false, no globe will be added.
order Independent Translucency Boolean true optional If true and the configuration supports it, use order independent translucency.
creditContainer Element | String optional The DOM element or ID that will contain the CreditDisplay. If not specified, the credits are added to the bottom of the widget itself.
creditViewport Element | String optional The DOM element or ID that will contain the credit pop up created by the CreditDisplay. If not specified, it will appear over the widget itself.
dataSources DataSourceCollection new DataSource Collection() optional The collection of data sources visualized by the widget. If this parameter is provided, the instance is assumed to be owned by the caller and will not be destroyed when the viewer is destroyed.
terrainShadows ShadowMode ShadowMode. RECEIVE_ONLY optional Determines if the terrain casts or receives shadows from the sun.
mapMode2D MapMode2D MapMode2D. INFINITE_SCROLL optional Determines if the 2D map is rotatable or can be scrolled infinitely in the horizontal direction.
request RenderMode Boolean false optional If true, rendering a frame will only occur when needed as determined by changes within the scene. Enabling improves performance of the application, but requires using Scene#requestRender to render a new frame explicitly in this mode. This will be necessary in many cases after making changes to the scene in other parts of the API. See Improving Performance with Explicit Rendering.
maximumRender TimeChange Number 0.0 optional If requestRenderMode is true, this value defines the maximum change in simulation time allowed before a render is requested. See Improving Performance with Explicit Rendering.

响应式属性

可以初始化配置，也支持响应式。

Name Type Default Description
selectionIndicator Boolean true optional 是否显示选择指示符
infoBox Boolean true optional 是否显示信息框
geocoder Boolean false optional 是否显示地理编码器搜索框
homeButton Boolean false optional 是否显示主页按钮
sceneModePicker Boolean false optional 是否显示场景模式切换按钮
projectionPicker Boolean false optional 是否显示投影切换按钮
baseLayerPicker Boolean false optional 是否显示基础图层切换按钮
navigationHelpButton Boolean false optional 是否显示导航帮助按钮
animation Boolean false optional 是否显示动画控件
timeline Boolean false optional 是否显示时间轴控件
fullscreenButton Boolean false optional 是否显示全屏切换按钮
vrButton Boolean false optional 是否显示 VR 功能按钮
navigation Boolean false optional 是否显示导航控件
sceneMode SceneMode SceneMode.SCENE3D optional 场景模式.
shouldAnimate Boolean false optional true if the clock should attempt to advance simulation time by default, false otherwise.
terrainExaggeration Number 1.0 optional 地形缩放比例
shadows Boolean false optional 是否显示太阳阴影
camera Object optional 场景相机位置.

5.2 事件

事件名 参数 描述 来源
selectedEntityChanged Entity 场景选中实体发生改变时触发此事件。 Viewer
trackedEntityChanged Entity 场景跟踪实体发生改变时触发此事件。 Viewer
dataSourceAdded DataSource 场景添加一个数据源时触发此事件。
CATALOG
  1. 1. DIST VUE SUPERMAP
    1. 1.1. 1. 介绍
    2. 1.2. 2. 安装
      1. 1.2.1. 2.1 NPM
      2. 1.2.2. 2.2 CDN
    3. 1.3. 3. 快速上手
      1. 1.3.1. 3.1 使用
        1. 1.3.1.1. 3.1.1 全局注册
        2. 1.3.1.2. 3.1.2 局部注册
        3. 1.3.1.3. 3.1.3 CDN 全局注册
      2. 1.3.2. 3.2 常见问题
        1. 1.3.2.1. 3.2.1 错误用法
        2. 1.3.2.2. 3.2.2 正确用法
        3. 1.3.2.3. 3.2.3 Hello world
      3. 1.3.3. 4. 基础
        1. 1.3.3.1. 4.1 全局组件事件
        2. 1.3.3.2. 4.2 全局组件实例方法
        3. 1.3.3.3. 4.3 常量
        4. 1.3.3.4. 4.4 私有类型
          1. 1.3.3.4.1. Position
            1. 1.3.3.4.1.1. 结构
      4. 1.3.4. 4.4 参考
    4. 1.4. 5. 场景容器
      1. 1.4.1. 5.1 实例属性
        1. 1.4.1.1. 静态属性
        2. 1.4.1.2. 响应式属性
      2. 1.4.2. 5.2 事件
Total : 82
2020
2019
2018
2017
Linux 3D iOS Android BS运维 React Vue Kotlin GIS Java JavaScript ArcEngine C# Dubbo Tomcat Docker CI Jmeter Oracle HTML5 C++ loadrunner WebSocket MiniProgram postgresql postgis WebGL SuperMap
万世威 刘小标 汪洋 王凯伟 孙俊祥 王振州 张泉 万峥嵘 陈广禄 肖健 张永朋 刘俊 胡飞玲 于佳鑫 殷萧鹏 郑家骜 陈伟红 白青壮 田银伟 黄震 吴伟豪 于福豪