vue-cesium 使用方法

最新推荐文章于 2025-04-07 15:21:17 发布

Meta_moke

最新推荐文章于 2025-04-07 15:21:17 发布

阅读量4.3k

点赞数 1

分类专栏：前端实用工具文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/AngelTp/article/details/121958927

版权

前端实用工具专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Vue Cesium构建一个3D地图应用，包括加载Bing Maps和自定义图层，展示地形，添加交互式点数据，以及集成视频播放功能。通过Vue组件方式设置Cesium Ion的accessToken，实现地图的导航、定位和弹窗展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Mate
Life is Like a Fuxking Movie

安装

npm i vue-cesium@2.2.6

使用

public > index.html

  <!-- include VueCesium -->
  <script src="https://unpkg.com/vue-cesium@latest/lib/index.umd.js"></script>

main.js

import VueCesium from 'vue-cesium'
import 'video.js/dist/video-js.css'
Vue.use(VueCesium, {
  // cesiumPath 是指引用的Cesium.js路径，如
  // 项目本地的Cesium Build包，vue项目需要将Cesium Build包放static目录：
  // cesiumPath: /static/Cesium/Cesium.js
  // 个人在线Cesium Build包：
  // cesiumPath: 'https://zouyaoji.top/vue-cesium/statics/Cesium/Cesium.js'
  // 个人在线SuperMap Cesium Build包（在官方基础上二次开发出来的）：
  // cesiumPath: 'https://zouyaoji.top/vue-cesium/statics/SuperMapCesium/Cesium.js'
  // 官方在线Cesium Build包，有CDN加速，推荐用这个：
  cesiumPath: 'https://unpkg.com/cesium/Build/Cesium/Cesium.js',
  // 指定Cesium.Ion.defaultAccessToken，使用Cesium ion的数据源需要到https://cesium.com/ion/申请一个账户，获取Access Token。不指定的话可能导致 Cesium 在线影像加载不了
  accessToken: '自己申请的Access Token'
})

vue

/*** 
 * @Author: Mo ke
 * @Date: 2021-08-16 15:56:46
 * @LastEditTime: 2021-10-25 14:17:08
 * @LastEditors: Moke
 * @Description: 
 * 
 */
<template>
  <div class="viewer" style="width: 100%; height: 100%">
    <vc-viewer @ready="ready">
      <!-- 坐标显示start -->
      <vc-navigation ref="navigation" :options="options"></vc-navigation>
      <!-- 坐标end -->

      <!-- 图层start -->
      <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-layer-imagery>
        <vc-provider-imagery-urltemplate
          :url="jsonurl"
        ></vc-provider-imagery-urltemplate>
      </vc-layer-imagery>

      <!-- <vc-layer-imagery ref="wms">
        <vc-provider-imagery-wms
          :url="wmsurl"
          :layers="layers"
          :parameters="parameters"
        ></vc-provider-imagery-wms>
      </vc-layer-imagery> -->
      <!-- 图层end -->

      <!-- 地形 -->
      <vc-provider-terrain-cesium ref="terrain"></vc-provider-terrain-cesium>

      <!-- 弹框start -->
      <vc-overlay-html
        :position="positionModal"
        :pixelOffset="{ x: 0, y: -250 }"
      >
        <div class="vc-dialog" v-show="showModal">
          <div class="line"></div>

          <div class="main">
            <div class="close" @click="close"></div>
            <div
              v-html="Element"
              v-show="show"
              style="width: 100%; height: 100%"
            ></div>
            <div
              v-show="!show"
              id="video-div"
              style="width: 100%; height: 100%"
            >
              <video
                id="videos"
                style="width: 90%; height: 96%"
                ref="video"
                class="video-js vjs-default-skin"
                loop
                muted
                autoplay
                preload
              ></video>
            </div>
          </div>
        </div>
      </vc-overlay-html>
      <!-- 弹框end -->
      <!-- 雷达扫描start -->
      <!-- <vc-scan-radar
        :radius="30"
        :interval="3000"
        :color="'#fff'"
        :position="position"
      ></vc-scan-radar> -->
      <!-- 雷达扫描end -->
      <!-- 3dtitles start -->
      <vc-primitive-tileset
        :url="url"
        @readyPromise="readyPromise"
        @initialTilesLoaded="initialTilesLoaded"
        @allTilesLoaded="allTilesLoaded"
        @loadProgress="loadProgress"
        @tileFailed="tileFailed"
        @tileLoad="tileLoad"
        @tileUnload="tileUnload"
        @tileVisible="tileVisible"
      >
      </vc-primitive-tileset>
      <!-- 3dtitles end -->
      <a href="javascript:;" class="location">
        <div
          type="submit"
          @click="btn"
          class="iconfont icon-dizhidingweiweizhi"
        ></div>
      </a>
      <div
        style="
          position: absolute;
          color: #fff;
          z-index: 3;
          padding: 10px;
          font-size: 27px;
          user-select: none;
        "
      >
        地质灾害监测系统
      </div>
    </vc-viewer>
  </div>
</template>

<script>
import videojs from "video.js";
import "vue-cesium/lib/vc-navigation.css";
import "vue-cesium/lib/style.css";
export default {
  data() {
    return {
      tileset: null, //生成的模型
      playerList: [], //播放源
      show: false, //视频的显示
      showModal: false, //popup框显示
      jsonurl: "http://IP/C12C13_3857_tiles/{z}/{x}/{y}.png",
      wmsurl: "http://localhost:8080/geoserver/mo/wms",
      layers: "mo:C12C13",
      parameters: {
        service: "WMS",
        format: "image/png",
        transparent: true,
      },

      // position: { lng: 115.91899, lat: 40.14371 },
      positionModal: { lng: x坐标, lat: y坐标, height: 660 },

      Element: null,
      url: "http://IP/data/3dtiles3857/tileset.json",
      options: {
        enableCompass: true,
        enableZoomControl: true,
        // enableZoomControl: {
        //   // 缩放比例
        //    zoomAmount: 2,
        //   // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是经纬度{lng: number, lat: number, height: number}或者 rectangle{west: number,south: number,east: number,north: number}
        //   defaultResetView: {
        //     lng: 105, lat: 29.999999999999993, height: 19059568.497290563, heading: 360, pitch: -90, roll: 0
        //   },
        //   overrideCamera: false
        // },
        enableDistanceLegend: true,
        enableLocationBar: true,
        // enableLocationBar: {
        //   // 获取更精确的高程
        //   gridFileUrl: './statics/SampleData/WW15MGH.DAC'
        // },
        enableCompassOuterRing: true,
        enablePrintView: true,
        // enablePrintView: {
        //   // 是否添加 Credit
        //   showCredit: true,
        //   // 是否自动打印
        //   printAutomatically: false
        // },
        // enableMyLocation: true,
        enableMyLocation: {
          // 使用高德api定位
          amap: {
            key: "42d22e6ed83f077bc28b7864718726de",
          },
        },
      },
      // 点数据
      AddspotDatas: [
        {
          id: 1, //唯一id
          x: 115.95551, //经度
          y: 40.14098, //纬度
          z: 660, //高度
          icon: require("../assets/铁塔.png"), //图标
          HtmlVal: ` <ul>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >传感器型号：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >C-201923</span
                >
              </li>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >温度：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >30℃</span
                >
              </li>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >x偏移：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >30</span
                >
              </li>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >y偏移：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >30</span
                >
              </li>
            </ul>`, //弹出框内容
          description: ``, //默认弹出框内容
        },
        {
          id: 2,
          x: 115.96176,
          y: 40.14075,
          z: 500,
          icon: require("../assets/logo3.png"),
          HtmlVal: ``,
          description: ``,
        },
        {
          id: 3,
          x: 115.96983,
          y: 40.13983,
          z: 500,
          icon: require("../assets/房子.png"),
          HtmlVal: ` <ul>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >地址：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >小沙村</span
                >
              </li>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >温度：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >25℃</span
                >
              </li>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >区域：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >山区</span
                >
              </li>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >湿度：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >适中</span
                >
              </li>
            </ul>`, //弹出框内容

          description: ``,
        },
        {
          id: 4,
          x: 115.9763,
          y: 40.13926,
          z: 400,
          icon: require("../assets/配电站.png"),
          HtmlVal: ` <ul>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >地址：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >电-00045</span
                >
              </li>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >温度：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >25℃</span
                >
              </li>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >设备情况：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >正常</span
                >
              </li>
              <li style="font-size: 18px; width: 300px; list-style: none">
                <span
                  style="
                    text-align: right;
                    margin-right: 20px;
                    display: inline-block;
                    width: 116px;
                    font-size: 18px;
                    font-weight: 900;
                  "
                  >运行时间：</span
                ><span
                  style="
                    text-align: left;

                    display: inline-block;
                    width: 116px;
                  "
                  >1100H</span
                >
              </li>
            </ul>`, //弹出框内容

          description: ``,
        },
        {
          id: 5,
          x: 115.98615,
          y: 40.13863,
          z: 500,
          icon: require("../assets/logo3.png"),
          HtmlVal: ``,
          description: ``,
        },
      ],
    };
  },

  methods: {
    clicked(a) {
      console.log(a);
    },
    close() {
      this.showModal = false;
      this.show = false;
    },
    ready(cesiumInstance) {
      var self = this;
      this.cesiumInstance = cesiumInstance;
      const { Cesium, viewer } = cesiumInstance;
      // viewer.imageryProvider = new Cesium.BingMapsImageryProvider({
      //   url: "https://dev.virtualearth.net",
      //   key: "AgcbDCAOb9zMfquaT4Z-MdHX4AsHUNvs7xgdHefEA5myMHxZk87NTNgdLbG90IE-",
      //   mapStyle: Cesium.BingMapsStyle.AERIAL,
      // });
      // viewer.terrainProvider = Cesium.createWorldTerrain();
      // viewer.imageryLayers.addImageryProvider(
      //   new Cesium.WebMapServiceImageryProvider({
      //     url: "http://localhost:8080/geoserver/mo/wms?", //服务地址
      //     layers: "mo:C12C13", //服务图层，修改成自己发布的名称
      //     parameters: {
      //       service: "WMS",
      //       format: "image/png",
      //       transparent: true,
      //     },
      //   })
      // );

      // 循环加点

      self.AddspotDatas.map((item) => {
        self.Addspot(item);
      });

      viewer.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      );
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      //绑定鼠标单击
      handler.setInputAction((movement) => {
        var pick = viewer.scene.pick(movement.position);
        if (Cesium.defined(pick) && pick.primitive) {
          let WorldCoordinates = pick.primitive._position;
          let HtmlVal = pick.id._HtmlVal;

          switch (Cesium.defined(pick) && pick.id._id) {
            case 2:
              self.show = false;
              self.Popup({ WorldCoordinates });

              self.play({
                src: "m3u8格式链接",
                type: "application/x-mpegURL",
              });

              break;
            case 5:
              self.show = false;
              self.Popup({ WorldCoordinates });

              self.play({
                src: "/video2.mp4",
                type: "video/mp4",
              });

              break;

            default:
              self.Popup({ WorldCoordinates, HtmlVal });
              self.show = true;
              break;
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    // 添加点函数
    Addspot(data) {
      const { Cesium, viewer } = this.cesiumInstance;
      viewer.entities.add({
        description: data.description,
        id: data.id,
        HtmlVal: data.HtmlVal,
        position: Cesium.Cartesian3.fromDegrees(data.x, data.y, data.z),
        billboard: {
          // 图像地址，URI或Canvas的属性
          image: data.icon,
          // 设置颜色和透明度
          color: Cesium.Color.WHITE.withAlpha(0.8),
          // 高度（以像素为单位）
          height: 30,
          // 宽度（以像素为单位）
          width: 30,
          // 逆时针旋转
          rotation: 0,
          // 大小是否以米为单位
          sizeInMeters: false,
          // 相对于坐标的垂直位置
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          // 相对于坐标的水平位置
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
          // pixelOffset: new Cesium.Cartesian2(10, 0),
          // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
          scale: 1.0,
          // 是否显示
          show: true,
        },
      });
    },
    // 显示信息并绑定坐标
    Popup(data) {
      let { WorldCoordinates, HtmlVal } = data;

      const { Cesium, viewer } = this.cesiumInstance;
      // 世界坐标转经纬度 start
      var ellipsoid = viewer.scene.globe.ellipsoid;
      var cartograhpinc = ellipsoid.cartesianToCartographic(WorldCoordinates);
      var lat = Cesium.Math.toDegrees(cartograhpinc.latitude);
      var lng = Cesium.Math.toDegrees(cartograhpinc.longitude);
      var height = cartograhpinc.height;
      // 世界坐标转经纬度end
      this.Element = HtmlVal;
      this.showModal = true; //控制popup框显示
      this.positionModal = { lng, lat, height }; //popup显示的坐标绑定
    },
    // 播放视频
    play(data) {
      this.playerList = [];

      var myPlayer = videojs(
        "videos",
        {
          muted: true,
          controls: true,
          loop: false,
          autoplay: false,
          sources: [
            {
              src: data.src,
              type: data.type,
            },
          ],
        },
        function onPlayerReady() {
          console.log("muted", this.muted());
          this.muted(false);

          this.volume(0.5); //调整音量 0~1
          this.play();
          videojs.log("播放开始了1!");
        }
      );

      //改变播放内容
      myPlayer.src(data);

      // videojs.getPlayer("videos").on("ended", function () {
      //   videojs.log("播放结束了2!");
      //   this.dispose(); //销毁该实例,解除所有绑定事件并移除对应video元素
      //   console.log("是否已销毁", this.isDisposed());
      // });
    },
    btn() {
      const { Cesium, viewer } = this.cesiumInstance;

      // this.viewer.zoomTo(this.tileset, new Cesium.HeadingPitchRange(0.0, -0.5, this.tileset.boundingSphere.radius * 2.0))
      viewer.camera.flyTo({
        //定位过去115.91899, 40.09571,
        destination: Cesium.Cartesian3.fromDegrees(x坐标, y坐标,镜头高),
        orientation: {
          heading: Cesium.Math.toRadians(0), // east, default value is 0.0 (north) //东西南北朝向
          pitch: Cesium.Math.toRadians(-50), // default value (looking down)  //俯视仰视视觉
          roll: 0.0, // default value
        },
        duration: 6, //3秒到达战场
      });
    },

    readyPromise(tileset) {
      const { Cesium, viewer } = this.cesiumInstance;
    },
    allTilesLoaded() {},
    initialTilesLoaded() {},
    loadProgress(numberOfPendingRequests, numberOfTilesProcessing) {
      if (numberOfPendingRequests === 0 && numberOfTilesProcessing === 0) {
        return;
      }
    },
    tileFailed(error) {},
    tileLoad(tile) {},
    tileUnload(tile) {},
    tileVisible(tile) {},
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
.vc-box {
  width: 200px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 16px;
}
.vc-dialog {
  /*重要*/
  user-select: none; /*禁止选中*/
  pointer-events: none; /*鼠标穿透*/
  top: 0;
  left: 0;
  min-width: 320px;
  min-height: 250px;
  z-index: 99999;
  position: absolute;
}
.vc-dialog .line {
  position: absolute;
  left: 0;
  width: 0;
  height: 100px;
  bottom: 0;
  background: url("/line.png");
  animation: goLine 0.5s forwards;
}
@keyframes goLine {
  from {
    width: 0;
  }
  to {
    width: 50px;
  }
}
.vc-dialog .main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 100px;
  background: url("/bg.png") no-repeat;
  background-size: 100% 100%;
  color: white;
  padding: 20px 5px 5px 10px;
  font-size: 14px;
  user-select: text;
  pointer-events: auto;
  opacity: 0;
  animation: goDynamicLayer 0.5s forwards;
  animation-delay: 0.5s;
}
.vc-dialog .main .close {
  position: absolute;
  top: 3px;
  right: 8px;
  transition: 1s;
  text-decoration: none;
}

.vc-dialog .main .close:hover {
  transform: rotate(180deg);
}
.vc-dialog .main .close::before {
  content: "✖";
  color: #f1f2f6;
}
@keyframes goDynamicLayer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.vc-dialog .light {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.cesium-infoBox-visible {
  opacity: 0;
}
.cesium-infoBox {
  display: none !important;
}
.cesium-viewer-bottom {
  display: none !important;
}
.vc-location-distance {
  display: none !important;
}
.vc-navigation-controls {
  display: none !important;
}

.location {
  font-size: 22px;
  font-weight: 900;
  background: rgb(255, 255, 255);
  position: absolute;
  color: rgb(81, 12, 0);
  z-index: 1001;
  right: 28px;
  top: 235px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  user-select: none;
  text-decoration: none;
}
.location:hover {
  cursor: pointer;
}
</style>