wise-map/README.md

一款基于WebGL技术实现的三维地球客户端开发平台 wise-map

# wise-map 介绍

wise-map 三维可视化平台 是一款基于 WebGL 技术实现的三维客户端开发平台，基于 Cesium (opens new window)优化提升与 B/S 架构设计，支持多行业扩展的轻量级高效能 GIS 开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种 GIS 数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。

wise-map 平台可用于构建无插件、跨操作系统、 跨浏览器的三维 GIS 应用程序。平台使用 WebGL 来进行硬件加速图形化，跨平台、跨浏览器来实现真正的动态大数据三维可视化。通过 wise-map 产品可快速实现浏览器和移动端上美观、流畅的三维地图呈现与空间分析。

这里封装了一套完整的 vue 组件库，可快速实现地图的加载，及各个功能是快速实现，可在短时间内搭建地图相关的项目。

## 官方链接

> <a href="http://www.gisroad.com/wisemap/zz3d/webgis/">基础展示</a>

> <a href="https://www.gisroad.com/wisemap/index_v1.html?suburl=./zz3d/webgis/WiseMapDoc">wise-map 组件文档</a>

> <a href="https://www.gisroad.com/wisemap">WiseMap 介绍</a>

> <a href="https://www.gisroad.com">公司官网</a>


# 快速开始

<font color=red>请提前配置安装 Node，npm/yarn，Vue CLI 脚手架,建议使用 VSCode 开发工具;</font>

## 安装

```js
npm install wise-map
或
yarn add wise-map
```

## 引用

> 把 WiseMapLib 拷贝到 public 文件夹中 (<font color=gren>WiseMapLib 联系管理员获取</font>)

> 在 index.html 文件中引用

```html
<script type="text/javascript" src="WiseMapLib/include-lib.js" libpath="WiseMapLib/" include="haoutil,turf,zz3d,zz3d-camera,font-awesome,web-icons,POI,dom2img,ZZWiseMap"></script>
```

> 在 vue 工程中 main.js 中引用

```js
import WiseMap from 'wise-map';
import 'wise-map/index.css';
Vue.use(WiseMap);
```

## 快速使用

> 替换 App.vue 内容

```js
<template>
  <div id="app">
    <zz-map :list="list" :isRotate="true" @createSceneFinish="createSceneFinish" @loadMapServeFinish="loadMapServeFinish"></zz-map>
    <zz-layer v-if="isViewer" :list="treeList" @checkChange="checkChange"></zz-layer>
    <zz-baselayer v-if="isViewer"></zz-baselayer>
    <zz-toolbar v-if="isViewer" :checkLayers="checkLayerList"></zz-toolbar>
  </div>
</template>
<script>
export default {
  name: "MapHome",
  components: {},
  data() {
    return {
      list: [
        {
          url: "http://localhost:18080",
          name: "示例数据",
          resourceId: ["Library://示例数据/地图/示例数据.MapDefinition"],
          type: "WISEMAP"
        },
      ],
      isViewer: false,
      checkLayerList: [],
      treeList: [],
    };
  },
  mounted() {},
  methods: {
    createSceneFinish(viewer) {
      window.viewer = viewer;
    },
    loadMapServeFinish({ originalData, processData, localLayers, treeList, SESSION, mapConfig, mapListConfig }) {
      this.isViewer = true;
      this.treeList = treeList;
    },
    checkChange(list) {},
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
```

启动服务

```js
npm run serve
```

> <font color=yellow>恭喜你已完成可以预览了！</font>