V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
w3cfed
V2EX  ›  程序员

搭建了一个简单的 Vue Cesium 架子,可以直接拉取项目,自己扩展。骗个 star

  •  1
     
  •   w3cfed · 2020-08-22 16:25:02 +08:00 · 1472 次点击
    这是一个创建于 1536 天前的主题,其中的信息可能已经有所发展或是发生改变。

    搭建了一个简单的 Vue Cesium 架子,可以直接拉取项目,自己扩展。

    https://github.com/martinageradams/vue-cesium-example

    vue-cesium-example

    vue-cesium-example

    Project setup

    use

    git clone [email protected]:martinageradams/vue-cesium-example.git
    
    yarn install
    

    Compiles and hot-reloads for development

    yarn serve
    

    Compiles and minifies for production

    yarn build
    

    Run your unit tests

    yarn test:unit
    

    Lints and fixes files

    yarn lint
    

    vue.config.js

    // vue.config.js
    const CopyWebpackPlugin = require("copy-webpack-plugin");
    const webpack = require("webpack");
    
    module.exports = {
      configureWebpack: {
        plugins: [
          // Copy Cesium Assets, Widgets, and Workers to a static directory
          new CopyWebpackPlugin({
            patterns: [
              { from: "node_modules/cesium/Build/Cesium/Workers", to: "Workers" },
              {
                from: "node_modules/cesium/Build/Cesium/ThirdParty",
                to: "ThirdParty"
              },
              { from: "node_modules/cesium/Build/Cesium/Assets", to: "Assets" },
              { from: "node_modules/cesium/Build/Cesium/Widgets", to: "Widgets" }
            ]
          }),
          new webpack.DefinePlugin({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify("")
          })
        ],
        module: {
          // Removes these errors: "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"
          // https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/issues/6
          unknownContextCritical: false,
          unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
        }
      }
    };
    

    Map.vue

    <template>
      <div id="cesiumContainer"></div>
    </template>
    
    <script>
    import "cesium/Build/Cesium/Widgets/widgets.css";
    import * as Cesium from "cesium";
    
    export default {
      name: "Map",
      mounted() {
        this.init();
      },
      methods: {
        init() {
          let viewer = new Cesium.Viewer("cesiumContainer");
    
          let imageryLayers = viewer.imageryLayers;
    
          let googleMap = new Cesium.UrlTemplateImageryProvider({
            url: "http://www.google.com/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}"
          });
    
          imageryLayers.addImageryProvider(googleMap);
    
          // fly
          viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              114.296063,
              30.55245,
              20000000
            ),
            orientation: {
              heading: Cesium.Math.toRadians(0),
              pitch: Cesium.Math.toRadians(-90),
              roll: 0.0
            },
            duration: 10 // fly time 10s
          });
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    #cesiumContainer {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    </style>
    

    Customize configuration

    See Configuration Reference.

    2 条回复    2020-08-23 08:13:09 +08:00
    RYAN0UP
        1
    RYAN0UP  
       2020-08-22 18:56:42 +08:00 via iPhone
    amazing,已 star 。
    w3cfed
        2
    w3cfed  
    OP
       2020-08-23 08:13:09 +08:00
    @RYAN0UP 感谢,主要是 Webpack 配置比较坑。我找了半天才配置好。但是突然发现了一个 npm 专门解决这个配置问题。哈哈哈。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3625 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:30 · PVG 12:30 · LAX 20:30 · JFK 23:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.