【vue-cesium】加载地图影像

最新推荐文章于 2024-05-19 16:54:03 发布

顾鸟

最新推荐文章于 2024-05-19 16:54:03 发布

阅读量799

点赞数 1

分类专栏： cesium 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_40881695/article/details/126115340

版权

cesium 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一. 介绍

需要提前安装和引入 vue-cesium ，这里不做介绍。地图影像用的是天地图，高德地图层级有问题，其他地图没试。

二. 效果

在这里插入图片描述

三. 实现

<template>
  <div class="viewer">
    <vc-viewer @ready="ready">
      <vc-layer-imagery>
        <vc-provider-imagery-tianditu
          protocol="http"
          map-style="img_w"
          token="436ce7e50d27eede2f2929307e6b33c0"
          :projectionTransforms="projectionTransforms"
        ></vc-provider-imagery-tianditu>
      </vc-layer-imagery>
    </vc-viewer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mapStyle: "6",
      ltype: "0",
      projectionTransforms: { from: "WGS84", to: "GCJ02" },
    };
  },
  methods: {
    // 地图初始化，cesium实例最好不要挂载到data中，data中的数据会实时更新
    ready(cesiumInstance) {
      const { Cesium, viewer } = cesiumInstance;
      window.$cesiumInstance = cesiumInstance;
      window.Cesium = Cesium;
      window.viewer = viewer;
    }
  },
};
</script>

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