在vue2中使用cesium

我最经的项目中要使用cesium，cesium使用起来倒是简单原生的话直接复制就可以用了，但是在vue上就有点麻烦了。<!DOCTYPE html><html lang="cn"><head><meta charset="utf-8"><!-- Include the CesiumJS JavaScript and CSS files --&g

91周先生

2677人浏览 · 2022-05-11 11:13:20

91周先生 · 2022-05-11 11:13:20 发布

我最经的项目中要使用cesium，cesium使用起来倒是简单原生的话直接复制就可以用了，但是在vue上就有点麻烦了。

<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken =
      'you token';

    const viewer = new Cesium.Viewer('cesiumContainer', {
    
    });
    const tileSet = new Cesium.Cesium3DTileset({
      url: "./terra_b3dms/tileset.json"
    });

   
  </script>
  </div>
</body>

</html>

VUE_CESIUM

因为我的情况不太一样，我的项目是用的vue2.6和vue-cil2建立的，现在网上的插件和教程多半都是新的，不太能通用。然后如果自己手动配置cesiumjs的话极其麻烦，要在webpack配置，本人水平不够。cesium版本间的区别还挺大的，后来我发现了一个我可以用的插件了就是VUE CESIUM。这个插件是有2.x和3.x版本的2.x就是vue2版本，其实我用这个插件就是不想自己配置cesium，导入这个就可以直接用了，你甚至可以直接写原生，不用他的组件。

<template>
  <div class="viewer">
    <vc-viewer ref="vcViewer" @ready="ready">
      <vc-layer-imagery :sort-order="10">
        <vc-provider-imagery-amap
          :map-style="mapStyle"
          :projection-transforms="projectionTransforms"
        >
        </vc-provider-imagery-amap>
      </vc-layer-imagery>
      <!-- <vc-primitive-tileset :url="url"> </vc-primitive-tileset> -->
    </vc-viewer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      baseLayerPicker: true,
      mapStyle: "6",
      projectionTransforms: {
        form: "BD09",
        to: "WGS84",
      },
      url: "http://localhost:9003/model/dZGhGwL9/tileset.json",
    };
  },
  mounted() {
    this.$refs.vcViewer.createPromise.then(({ Cesium, viewer }) => {
      console.log("viewer is loaded.");
      console.log({ Cesium, viewer });
    });
  },
  methods: {
    ready(cesiumInstance) {
      console.log("cesiumInstance", cesiumInstance);
      const { Cesium, viewer } = cesiumInstance;
      viewer.scene.globe.depthTestAgainstTerrain = true;
      viewer.scene.globe.enableLighting = true;
      this.fullscreenElement = this.$refs.viewerContainer;
      const tileSet = new Cesium.Cesium3DTileset({
      // url: "http://localhost:9003/model/dZGhGwL9/tileset.json"
      url: "http://192.168.50.149/static/terra_b3dms/tileset.json"
    });

    const tx = 0;
    const ty = 0;
    const tz = -80;

    tileSet.readyPromise.then(function (argument) {
      viewer.scene.primitives.add(tileSet);
      const cartographic = Cesium.Cartographic.fromCartesian(tileSet.boundingSphere.center);
      const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic
        .height);
      const m = Cesium.Transforms.eastNorthUpToFixedFrame(surface);

      //平移
      const _tx = tx ? tx : 0;
      const _ty = ty ? ty : 0;
      const _tz = tz ? tz : 0;
      const tempTranslation = new Cesium.Cartesian3(_tx, _ty, _tz);
      const offset = Cesium.Matrix4.multiplyByPoint(m, tempTranslation, new Cesium.Cartesian3(0, 0, 0));
      const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
      tileSet.modelMatrix = Cesium.Matrix4.fromTranslation(translation);


      viewer.flyTo(tileSet);
      //参照点
    
    });
      // viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(119.85331, 28.42777, 1000),
      // });
    },
  },
};
</script>

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

注意：如果要用的话使用2.8版本的前面的版本bug比较多

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^