Vue Cesium学习-流动线

最新推荐文章于 2024-09-02 09:50:02 发布

爱吃黄瓜的喵

最新推荐文章于 2024-09-02 09:50:02 发布

阅读量2.1k

点赞数

分类专栏： vue 文章标签： vue cesium 地图组件

本文链接：https://blog.csdn.net/weixin_42152696/article/details/109210379

版权

本文介绍如何在Vue Cesium中实现流动线效果，适合初学者。通过安装Cesium并全局注册，结合组件代码，展示Vue Cesium在地图开发中的应用。

摘要由CSDN通过智能技术生成

Vue Cesium 是一款好用的地图开发工具，对于初学者非常友好

官网地址： https://zouyaoji.top/vue-cesium/ cesium - 流动线学习【已封装成vue组件】

代码效果
在这里插入图片描述

安装Cesium

1、需要进行安装
npm install vue-cesium --save

main.js全局注册

import VueCesium from 'vue-cesium';
Vue.use(VueCesium);

组件代码如下

<template>
  <div class="viewer">
    <vc-viewer @ready="ready">
      <!-- 抛物线 -->
      <template v-for="(item, index) in positionsParabola">
        <vc-trail-polyline
          :key="'parabola2' + index"
          :positions="item"
          color="yellow"
          imageUrl="https://zouyaoji.top/vue-cesium/statics/SampleData/images/colors.png"
          :width="2"
          ref="parabola"
          :clampToGround="true"
          :loop="true"
        ></vc-trail-polyline>
      </template>
      <template v-for="(item, index) in points">
        <vc-entity :position="item" :key="index">
          <vc-graphics-point
            :key="index"
            :color="item.color"
            :pixelSize="item.size"
            :disableDepthTestDistance="Number.POSITIVE_INFINITY"
          ></vc-graphics-point>
        </vc-entity>
      </template>
      <!-- 这里是地球样式区域,官方demo是高清版本，这个token后续需要注意一下 -->
      <vc-layer-imagery>
        <vc-provider-imagery-tianditu
          mapStyle="img_c"
          token="436ce7e50d27eede2f2929307e6b33c0"
        ></vc-provider-imagery-tianditu>
      </vc-layer-imagery>
    </vc-viewer>
  </div>
</template>
<script>
export default {
    
  props: {
    
      // 节点数据
      nodeInfo: {
    
          required: true,
          type: Array
      }
  },
  data() {
    
    return {
    
      // node节点数据
      points: [