# SM3D-Core

基于 SuperMap WebGL 3D 进行封装的 Vue 地图组件以及相应的工具类。

当前主要内容：

Viewer : 地图展示组件
Manager : 功能通用入口
Manager.loader: 场景图层加载
Manager.layer : 图层显隐，管理
Manager.mouse : 鼠标交互事件（含量测）
Manager.query : 图层查询
Manager.tool : 通用工具（坐标转换等）
Manager.three : three 场景对象

# 安装与使用

# 安装

$ npm install @dist/sm3d-core

本库位于私服，需先登录或配置auth

http://elb-791125809.cn-northwest-1.elb.amazonaws.com.cn:7799/repository/dist-front/

# 使用

# Initialization

import Vue from "vue";
import sm3d from "@dist/sm3d-core";

Vue.use(sm3d, {
  // cesiumPath is the path of the Cesium library, such as
  // cesiumPath: './public/Cesium'
  // use online reference for http
  // cesiumPath: 'http://support.supermap.com.cn:8090/webgl/Build'
  // use online reference for https
  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

# Usage

<template>
  <div class="content">
    <sm-viewer @ready="ready"> </sm-viewer>
  </div>
</template>

<script>
import { manager } from "@dist/sm3d-core"
methods: {
  ready: function() {
    // 此时 地图组件viewer 与 入口manager已经初始化完毕

    // let imageLayers = manager.viewer.imageryLayers;

    // let serviceUrl =
    // "http://52.83.134.236:8090/iserver/services/map-mvt-XZQH/restjsr/v1/vectortile/maps/XZQH";

    // manager.viewer.scene.addVectorTilesLayer({ url: serviceUrl};
  }，
  test: function() {
      manager.mouse.setHandler(ACTION.POINT, result => {
            manager.mouse.clear();
            manager.mouse.activate();
  }
}
</script>

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

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
31
32
33
34
35
36
37

# Three 模块说明

# 使用 three v0.84.0 版本与 cesium 版本结合，统一到一个场景

# 通过 useDefaultRender 参数关闭自渲染，确认同时使用 three 和 cesium

     <sm-viewer
      @ready="ready"
      :useDefaultRenderLoop='false'
    ></sm-viewer>

1
2
3
4
5

# 通过 three.js 构建实体，传递经纬度和 mesh，添加到场景中

      var geometry = new manager.THREE.BoxGeometry(20000, 20000, 20000)
      var material = new manager.THREE.MeshBasicMaterial({ color: 0x00ff00 })
      var cube = new manager.THREE.Mesh(geometry, material)

      let _3DOB = new manager.ThreeObj(cube, { x: 115.23, y: 39.55 })
      manager.three.objs.push(_3DOB)

1
2
3
4
5
6
7

# Layer 模块说明

包含常用加载场景图层的封装，以及其他类型数据的加载，设置，管理。

加载一个场景下所有图层示例如下：

   manager.layer.addServiceLayer(serviceUrl, () => {
      //图层加载完可调用
   })

1
2
3

# Mouse 模块说明

包含三维场景中，鼠标点击，绘制等交互操作工具

如点击事件：

  manager.mouse.setHandler(manager.ACTION.POINT, result => {
    // 返回坐标
  })