Cesium功能集完整源码下载整理

总要学点什么

已于 2022-07-03 11:13:58 修改

阅读量3.9k

点赞数 3

分类专栏： Cesium 文章标签： Cesium WebGL VUE GIS JavaScript

于 2022-06-13 20:42:59 首次发布

本文链接：https://blog.csdn.net/qq_34205305/article/details/125266858

版权

Cesium 专栏收录该内容

18 篇文章

订阅专栏

简要说明

记录基于Cesium实现的130多个DEMO，每一个都配有专门的博文介绍以及完整的源代码（未加密/未删减）资源包下载。不定时更新^_^

资源目录

002-完美集成展示Echarts柱状图/折线图/饼状图
 完整demo和源代码下载

代码风格：Cesium + VUE

<template>
  <div id="cesiumContainer">
    <tools></tools>
  </div>
</template>
<script>
import Tools from "./components/tools.vue";
const Cesium = window.Cesium;
let viewer = undefined;
export default {
  components: { Tools },
  data() {
    return {};
  },
  mounted() {
    let key =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZDhhOThhNy0zMzUzLTRiZDktYWM3Ni00NGI5MGY2N2UwZDUiLCJpZCI6MjQzMjYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODUwMzUwNDh9.DYuDF_RPKe5_8w849_y-sutM68LM51O9o3bTt_3rF1w";
    Cesium.Ion.defaultAccessToken = key;
    window.viewer = viewer = new Cesium.Viewer("cesiumContainer", {
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      }),
      // terrainProvider: this.Cesium.createWorldTerrain(),
      geocoder: true,
      homeButton: true,
      sceneModePicker: true,
      baseLayerPicker: true,
      navigationHelpButton: true,
      animation: true,
      timeline: true,
      fullscreenButton: true,
      vrButton: true,
      //关闭点选出现的提示框
      selectionIndicator: true,
      infoBox: true,
    });
    viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    this.initCamera();
  },
  methods: {
    initCamera() {
      viewer.camera.flyTo({
        destination: window.Cesium.Cartesian3.fromDegrees(
          110.62898254394531,
          40.02804946899414,
          1000.0
        ), //初始定位
      });
    },
    getLocation() {
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
      handler.setInputAction(function (event) {
        let earthPosition = viewer.scene.pickPosition(event.position);
        if (Cesium.defined(earthPosition)) {
          let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
          let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
          let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
          let height = cartographic.height.toFixed(2);
          console.log(earthPosition, {
            lon: lon,
            lat: lat,
            height: height,
          });
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
  },
};
</script>
<style lang="scss" scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>