Vue 2.x components for CesiumJS.

Last update: May 23, 2022

VUE CESIUM

Vue 2.x components for CesiumJS. Load Cesium built package or other third-party packages which are built on Cesium.

Travis npm npm license Coverage Status Package Quality

Languages

Links

Get Start

VueCesium using the built CesiumJS library. You can use online, local, official native libraries or third-party libraries built on Cesium depending on your project needs. The SuperMap iClient 3D for WebGL and the EarthSDK of CesiumLab have been tested.

Developed components.

In the gradual improvement...

Installation

npm i --save vue-cesium

Usage

import Vue from 'vue'
import VueCesium from 'vue-cesium'
import lang from 'vue-cesium/lang/zh-hans'
// import lang from 'vue-cesium/lang/en-us'
Vue.use(VueCesium)
// or
// Vue.use(VueCesium, {
//   // cesiumPath is path of Cesium.js', for example:
//   // local Cesium Build package:
//   // cesiumPath: '/static/Cesium/Cesium.js'
//   // Online Cesium Build package:
//   // cesiumPath: 'https://zouyaoji.top/vue-cesium/statics/Cesium/Cesium.js'
//   // cesiumPath: 'https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/Cesium.js',
//   // cesiumPath: 'https://unpkg.com/cesium/Build/CesiumUnminified/Cesium.js',
//   // cesiumPath: 'https://unpkg.com/[email protected]/Build/Cesium/Cesium.js',
//   cesiumPath: 'https://unpkg.com/cesium/Build/Cesium/Cesium.js',  // default
//   accessToken: `Your accessToken`,
//   lang: lang // 2.0.3+ //  zh-hans
// })
<template>
  <div class="viewer">
    <vc-viewer></vc-viewer>
  </div>
</template>

<style>
  .viewer {
    width: 100%;
    height: 400px;
  }
</style>

Contributing

Contributing Guide

License

MIT License

Copyright (c) 2018-present, zouyaoji [email protected]

Donate

Your support is the driving force for me to move forward and better support the open source cause! ~

  • PayPal

  • WeChat | AliPay

    WeChat AliPay

QQGroup

16533444

开心农场 数字视觉

Reference

Two good vue components projects: vue-baidu-map and vuelayers.

GitHub

https://github.com/zouyaoji/vue-cesium
Comments
  • 1. 引用第三方cesium插件报错

    使用npm install cesium-navigation --save安装后在vue中进行如下引用:

    import Cesium from 'cesium/Cesium'; import widgets from'cesium/Widgets/widgets.css'; import '../../node_modules/cesium-navigation/navigation.js';

    //指北针插件 viewer.extend(Cesium.viewerCesiumNavigationMixin, {});

    然后浏览器报错: Uncaught Error: No ../lib/weakmap navigation.js?946e:114 at callDep (navigation.js?946e:114) at req (navigation.js?946e:213) at v (navigation.js?946e:3091) at eval (navigation.js?946e:3105) at Object.eval (navigation.js?946e:3106) at eval (navigation.js?946e:4) at Object.eval (navigation.js?946e:7) at eval (navigation.js:11906) at Object../node_modules/cesium-navigation/navigation.js (app.js:1056) at webpack_require (app.js:679) 不知道怎么截图显示不出来

    Reviewed by DLFouge at 2018-11-23 03:15
  • 2. [Bug Report] 移动端标绘线面时无法终止

    VueCesium version

    3.0.11

    OS/Browsers version

    win10/google latest

    Vue version

    3.2.31

    Cesium version

    1.91.0

    Reproduction Link

    www.github.com

    Steps to reproduce

    因为标绘线面时,预设是鼠标双击结束绘制事件,但是移动端触摸事件无法识别“二次点击”,导致线面的标绘事件无法停止。

    What is Expected?

    触摸双击停止线、面的标绘事件

    What is actually happening?

    无法停止

    Reviewed by ValjeanWill at 2022-03-23 08:24
  • 3. 按照文档按需加载会出问题,貌似按需加载还是有些问题的,有些组件使用vc开头的没有内部引用(例如绘制量算等)。

    [BUG 反馈] 按照文档按需加载会出问题

    浏览器版本号

    Google Chrome 版本 87.0.4280.66(正式版本) (64 位)

    Vue 版本号

    2.6.11

    组件库版本号

    2.1.6

    现象描述

    按需加载会出现  Cannot read property 'scriptPromise' of undefined
    

    完整异常信息

    Uncaught (in promise) TypeError: Cannot read property 'scriptPromise' of undefined
        at VueComponent.beforeInit$ (index.js?22a4:1038)
        at tryCatch (runtime.js?96cf:63)
        at Generator.invoke [as _invoke] (runtime.js?96cf:293)
        at Generator.eval [as next] (runtime.js?96cf:118)
        at tryCatch (runtime.js?96cf:63)
        at invoke (runtime.js?96cf:154)
        at eval (runtime.js?96cf:189)
        at new Promise (<anonymous>)
        at callInvokeWithMethodAndArg (runtime.js?96cf:188)
        at AsyncIterator.enqueue [as _invoke] (runtime.js?96cf:211)
    

    在线示例 / 仓库 URL

    复现代码

    赋值按需加载的demo,其余没有变化。就是文档的示例代码,我按需加载引用viewer
    

    预期输出

    出现viewer的视图
    

    实际输出

    没有出现视图
    
    Reviewed by FrozenQ at 2020-11-30 06:19
  • 4. [Bug Report] VcDrawings>Pin,billboardOpts.image动态切换,会导致已经画好的点标记图标被切换

    VueCesium version

    3.0.10

    OS/Browsers version

    win10,firefox

    Vue version

    3.2.31

    Cesium version

    1.91.0

    Reproduction Link

    www.github.com

    Steps to reproduce

    先画一些标记点,动态切换pinDrawingOpts.billboardOpts.image属性,会导致已经画好的标记点图标被切换

    What is Expected?

    看起来像是options应该clone后再用,不过我不知道应该怎么改,能否告知下如何快速修复这个问题呢

    What is actually happening?

    待处理

    Reviewed by brantroy at 2022-03-07 02:10
  • 5. How do I make the initial load time faster?

    [文档问题] How do I make the initial load time faster?

    相关文档 URL

    https://github.com/zouyaoji/vue-cesium

    问题描述

    The initial load of map imagery takes approximately 30 seconds. How can I expedite this? Can I load a lower resolution map as a placeholder? 
    
    My component looks like this:
    
    
        <vc-viewer :requestRenderMode="true"
                   :infoBox="false"
                   :geocoder="geocoder"
                   :terrainExaggeration="100"
                   @ready="ready"
                   :camera="camera"
                   @selectedEntityChanged="selectedEntityChanged"
                   @moveEnd="onMoveEnd">
            <!-- We loop through our community billboards and render each as a Vue-Cesium entity -->
            <vc-entity v-if="billboards.length > 0" v-for="billboard in billboards"
                       :ref="billboard.id"
                       :position="billboard.position"
                       :billboard="billboard"
                       :key="billboard.id"
                       :id="billboard.id.toString()"></vc-entity>
            <!-- Our Vue Cesium imagery layer. We use Bing Maps -->
            <vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast">
                <vc-provider-imagery-bingmaps :url="url" :bmKey="bmKey" :mapStyle="mapStyle"/>
            </vc-layer-imagery>
        </vc-viewer>
    

    改进建议

    Document a way to make the map imagery load faster initially.
    
    Reviewed by boriskogan81 at 2020-04-01 18:39
  • 6. Destroying one of many vc-viewer instances causes Cesium to crash

    [BUG 反馈] Destroying one of many vc-viewer instances causes Cesium to crash

    浏览器版本号

    Firefox & Chrome

    Vue 版本号

    2.6.11

    组件库版本号

    2.1.0

    现象描述

    Destroying one of many vc-viewer instances causes Cesium to crash. 
    It is caused by line 983 in https://github.com/zouyaoji/vue-cesium/blob/master/src/components/viewer/Viewer.vue - the Cesium instance is being destroyed when it should not - there can be other elements using it.
    

    完整异常信息

    Cesium just stops working.
    

    在线示例 / 仓库 URL

    I'll add later.

    复现用例

    I'll add later.
    

    预期输出

    Cesium will still work, so other vc-viewer instances could be created.
    

    实际输出

    Cesium doesn't work.
    
    Reviewed by alicjamusial at 2020-05-11 17:48
  • 7. [Bug Report] 和CesiumVectorTile 一起使用报错

    VueCesium version

    3.0.9

    OS/Browsers version

    windows

    Vue version

    3.2.31

    Cesium version

    1.90.0

    Reproduction Link

    https://codepen.io/zouyaoji/pen/sdsasasdasd

    Steps to reproduce

    在ready函数中加载本地shp文件

    onViewerReady ({ Cesium, viewer }) {
                
                // eslint-disable-next-line no-unused-vars
                var worldLayer = null
                // eslint-disable-next-line no-unused-vars
                var worldProvider = new VectorTileImageryProvider({
                    source: 'http://localhost:1379/map/shp/区域_全球国界.shp',
                    defaultStyle: {
                        outlineColor: 'rgb(255,0,0)',
                        lineWidth: 1,
                        fill: false,
                        tileCacheSize: 200,
                        showMaker: false,
                        showCenterLabel: true,
                        fontColor: 'rgba(255,0,0,1)',
                        labelOffsetX: -10,
                        labelOffsetY: -5,
                        fontSize: 13,
                        fontFamily: '黑体',
                        centerLabelPropertyName: 'NAME'
                    },
                    maximumLevel: 20,
                    minimumLevel: 1,
                    simplify: false
                })
                worldProvider.readyPromise.then(function () {
                    worldLayer = viewer.imageryLayers.addImageryProvider(worldProvider)
                })
            }
    

    报错信息: Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'defaultAccessToken') at load (webpack-internal:///./node_modules/vue-cesium/es/components/viewer/src/useViewer.mjs:487:28)

    What is Expected?

    。。

    What is actually happening?

    。。。

    Reviewed by DuShuYuan at 2022-02-16 01:04
  • 8. Using a static image for billboards needs to be documented more clearly

    [文档问题] Using a static image for billboards needs to be documented more clearly

    相关文档 URL

    https://zouyaoji.top/vue-cesium/#/en/entity/vc-graphics-billboard

    问题描述

    I am deploying my app, using Vue Cesium, to Heroku, and have a .png in my static assets folder which I am trying to use for a billboard, like this: 
    
                this.billboards = this.$store.state.communities.map(community => {
                    return {
                        position: {lng: community.coordinates.x, lat: community.coordinates.y},
                        image: '/img/TentLogo.png',
                        scale: 0.1,
                        id: community.id
                    };
                })
    
    
    I can see the .png file if I navigate to baseAddress/img/TentLogo.png, but the billboards are not showing up on the map. 
    
    Previously, this worked ok locally, so I suspect it may have something to do with the environment, but am not sure how to troubleshoot it. 
    
    Could I request a bit more detail on how linking static images in billboards works? 
    

    改进建议

    A bit more documentation on this issue.
    
    Reviewed by boriskogan81 at 2020-05-21 20:28
  • 9. 绘制点线面时可视化效果问题

    [BUG 反馈] 绘制点线面时可视化效果问题

    浏览器版本号

    Google Chrome 已是最新版本 版本 79.0.3945.79(正式版本) (64 位)

    Vue 版本号

    官网案例

    组件库版本号

    官网案例

    现象描述

    绘制的几何体边不能完整显示
    

    完整异常信息

    缺省
    

    在线示例 / 仓库 URL

    https://zouyaoji.top/vue-cesium/#/zh/tools/vc-drawing

    复现用例

    缺省
    

    预期输出

    缺省
    

    实际输出

    缺省
    
    Reviewed by GTXpeter at 2019-12-17 02:54
  • 10. 知乎上有人说不要把viewer挂到this上,会严重影响性能,

    [BUG 反馈] 知乎上有人说不要把viewer挂到this上,会严重影响性能,

    浏览器版本号

    最新

    Vue 版本号

    2.x

    组件库版本号

    x

    现象描述

    求解释
    

    完整异常信息

    求解释
    

    在线示例 / 仓库 URL

    https://zhuanlan.zhihu.com/p/157721176?from_voters_page=true

    复现代码

    求解释
    

    预期输出

    求解释
    

    实际输出

    求解释
    
    Reviewed by 531431988 at 2021-02-03 07:43
  • 11. [Bug Report] Entity's Event always reporting errors (Entity事件函数总是报错)

    VueCesium version

    3.0.12

    OS/Browsers version

    windows10 / latest version of chrome

    Vue version

    3.2.25

    Cesium version

    1.92.0

    Reproduction Link

    see description below(见下方描述)

    Steps to reproduce

    <!-- 
     The error can be reproduced locally, but it seems that the event function does not work in codepen or codesandbox. 
     The error cannot be reproduced
    (本地可以复现错误,但是在 codepen 或者 codesandbox 貌似事件函数不起作用。导致错误无法复现)
     -->
    
    <script setup lang="ts">
    import { VcViewer, VcDatasourceCustom } from 'vue-cesium';
    import type { VcEntityProps } from 'vue-cesium';
    
    const entities = reactive([
      {
        onMouseover: (evt) => {
          console.log('evt: ', evt);
        },
        position: {
          lng: 103.3,
          lat: 33,
        },
        label: {
          text: 'Hello World',
          pixelOffset: [0, 80],
        },
        billboard: {
          image: 'https://zouyaoji.top/vue-cesium/favicon.png',
          scale: 0.5,
        },
      },
    ]);
    </script>
    

    What is Expected?

    execute the event function normally(正常执行事件函数)

    What is actually happening?

    all event functions report the following error(所有事件函数全都报下面这个错误)

    Uncaught TypeError: fn is not a function
        at index.ts:181:15
        at Array.forEach (<anonymous>)
        at Object.pickedAction (index.ts:178:21)
        at handleMouseMove (Cesium.js:48:185483)
        at handlePointerMove (Cesium.js:48:191389)
        at HTMLCanvasElement.r (Cesium.js:48:181877)
    
    Reviewed by heibaige123 at 2022-04-22 16:53
  • 12. [Bug Report] vue-cesium-v2同时启用arcgis地形+导航控件非常卡顿

    VueCesium version

    2.2.5

    OS/Browsers version

    Windows10/Chrome最新版

    Vue version

    3.1.4

    Reproduction Link

    详见 测试代码

    Steps to reproduce

    • vue版本:2.6.12
    • vue-cesium-v2最新版本:2.2.5

    测试发现同时启用arcgis-tiled-elevation地形 vc-navigation导航控件时会导致cesium非常卡顿。 测试代码 如下:

    <template>
      <div class="viewer">
        <vc-viewer @ready="ready">
          <vc-layer-imagery>
            <vc-provider-imagery-bingmaps
              url="https://dev.virtualearth.net"
              bmKey="AgcbDCAOb9zMfquaT4Z-MdHX4AsHUNvs7xgdHefEA5myMHxZk87NTNgdLbG90IE-"
              mapStyle="Aerial"
            ></vc-provider-imagery-bingmaps>
          </vc-layer-imagery>
          <vc-provider-terrain-arcgis-tiled-elevation
            :url="'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'"
          ></vc-provider-terrain-arcgis-tiled-elevation>
          <vc-navigation></vc-navigation>
        </vc-viewer>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          terrainUrl:
            "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
        }
      },
      methods: {
        ready(cesiumInstance) {
          const { Cesium, viewer } = cesiumInstance
          var target = new Cesium.Cartesian3(
            300770.50872389384,
            5634912.131394585,
            2978152.2865545116
          )
          var offset = new Cesium.Cartesian3(
            6344.974098678562,
            -793.3419798081741,
            2499.9508860763162
          )
          viewer.camera.lookAt(target, offset);
          viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
    
          //调试信息:FPS帧数
          viewer.scene.debugShowFramesPerSecond = true
        },
      },
    }
    </script>
    

    What is Expected?

    平均帧率50fps左右,界面流畅顺滑

    What is actually happening?

    测试发现同时启用arcgis-tiled-elevation地形 vc-navigation导航控件时会导致cesium非常卡顿, 帧率下降到10fps以下

    Reviewed by liuqun at 2021-07-05 03:46
Related tags
Vue 2 components for Leaflet maps
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

May 24, 2022
Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

May 24, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

May 19, 2022
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

May 26, 2022
Web map Vue 3.x components with the power of OpenLayers
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

May 26, 2022
Reactive Vue 3 components for Google maps

Vue 3 Google maps Components Set of mostly used Google Maps components for Vue.js. Why this library exists? We heavily use Google Maps in our projects

May 23, 2022
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

May 26, 2022
a library of vue components used by mapping applications
a library of vue components used by mapping applications

phila-vue-mapping (@phila/vue-mapping in npmjs.com) phila-vue-mapping is a library of Vue components that can be used in mapping apps which use Vue.js

Apr 21, 2022
Vuejs 2 components for interacting with mapbox-gl-js

VueMapbox Combine powers of Vue.js and Mapbox Gl JS Vue-mapbox is wrapper around Mapbox GL JS library that provides vueish-way to interact with the ma

May 16, 2022
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

office-map Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable загрузка из JSON информации о

May 9, 2022
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

May 24, 2022
A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Mar 21, 2022
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Feb 12, 2022
Integrate Google Maps in your Vue application
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Apr 10, 2022
A cloned & maintained version of vue-mapbox

V-Mapbox ?? Combine powers of Vue.js and Mapbox GL JS NOTE: This is a maintained version of vue-mapbox V-Mapbox is wrapper around Mapbox GL JS library

May 15, 2022
A lightweight Google Maps plugin for Vue
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Apr 22, 2022
vue google map custom marker component
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

May 17, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

May 10, 2022
Wrapper for vue-mapbox-geocoder

v-mapbox-geocoder ?? v-mapbox plugin for mapbox-gl-geocoder support. Setup First of all you need to install mapbox-gl-geocoder and v-mapbox. See v-map

Sep 18, 2021