@mapgis/webclient-vue-cesium

mapgis webclient-vue-cesium

Usage no npm install needed!

<script type="module">
  import mapgisWebclientVueCesium from 'https://cdn.skypack.dev/@mapgis/webclient-vue-cesium';
</script>

README

Webclient-Vue-Cesium

简介

webclient-vue-cesium 是基于 Cesium 的 vue 组件开发库，提供构建 Web 三维 GIS 应用的常用 vue 组件。

模块说明

模块说明

特点

  • 组件式风格

通过 Vue 的组件方式调用 layers, markers, popups， 并且使用同步 props synchronized props 来控制状态

  • Vue 控制

面向对象编程：地图元素拥有 Vue 的生命周期，将原生地图事件封装成 Vue 的事件

安装

npm install --save @mapgis/webclient-vue-cesium
# 或者
yarn add @mapgis/webclient-vue-cesium

在 main.js 中全局引入组件

import "@mapgis/webclient-vue-ui/dist-libs/webclient-vue-ui.css";

import MapgisUi from "@mapgis/webclient-vue-ui";
import Mapgis3d from "@mapgis/webclient-vue-cesium";

Vue.use(MapgisUi);
Vue.use(Mapgis3d);

cesium 库引入

webclient-vue-cesium 依赖 @mapgis/cesium，安装@mapgis/webclient-vue-cesium的时候会自动安装依赖@mapgis/cesium，@mapgis/cesium的包结构展示如下：

代码结构

将上述 cesium 文件夹统一拷贝到你的 vue 工程对应的 public 文件夹下的某个目录中，记录对应的路径为

# quasar 的静态资源目录为src/static
# 常见的静态资源目录为 public
# 主Cesium主体路径
$path/cesium/dist/Cesium.js # public/cesium/dist/Cesium.js
# Cesium拓展插件路径
$path/cesium/dist/webclient-cesium-plugin.min.js # public/cesium/dist/webclient-cesium-plugin.min.js

WebClient-Vue-Cesium 组件使用以上两个文件的方式如下所示:

<template>
  <mapgis-web-scene
    ref="webgloberef"
    libPath="$path/cesium/dist/Cesium.js"
    pluginPath="$path/cesium/dist/webclient-cesium-plugin.min.js"
  >
    <mapgis-3d-igs-tile-layer />
  </mapgis-web-scene>
</template>

如果在浏览器中，访问 http://localhost:xxxx/$path/cesium/dist/Cesium.js 成功则说明整个 Cesium 的环境准备已经完毕。

相关链接

项目依赖