亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue2中配置Cesium全過(guò)程

 更新時(shí)間：2023年05月19日 10:16:47   作者：愿為浪漫渡此劫  
這篇文章主要介紹了Vue2中配置Cesium全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

基于Vue2配置Cesium

本文是關(guān)于基于Vue2，對(duì)Cesium，進(jìn)行在線使用和離線（內(nèi)網(wǎng)）使用配置

一、安裝Cesium依賴(lài)

npm i Cesium

二、在線Cesimu配置（在vue.config.js文件中進(jìn)行如下配置）

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const cesiumSource = "./node_modules/cesium/Source";
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  // 基本路徑
  // publicPath: "./portal", // 打包
  publicPath: "./",
  runtimeCompiler: true,
  // 輸出文件目錄
  outputDir: "dist",
  configureWebpack: {
    output: {
      sourcePrefix: "", // 1 讓webpack 正確處理多行字符串配置 amd參數(shù)
    },
    amd: {
      toUrlUndefined: true, // webpack在cesium中能友好的使用require
    },
    resolve: {
      extensions: [".js", ".vue", ".json"],
      alias: {
        vue$: "vue/dist/vue.esm.js",
        "@": path.resolve("src"),
        components: path.resolve("src/components"),
        assets: path.resolve("src/assets"),
        views: path.resolve("src/views"),
        cesium: path.resolve(__dirname, cesiumSource),
      },
    },
    plugins: [
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Workers"), to: "Workers" },
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Assets"), to: "Assets" },
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
      ]),
      new CopyWebpackPlugin([
        {
          from: path.join(cesiumSource, "ThirdParty/Workers"),
          to: "ThirdParty/Workers",
        },
      ]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./"),  // 本地
        //CESIUM_BASE_URL: JSON.stringify("./portal"),  // 打包后
      }),
    ],
    // 導(dǎo)致打包出現(xiàn)length undefined
    // // webpack在cesium中能友好的使用import.meta 
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: "@open-wc/webpack-import-meta-loader",
          },
        },
      ],
    }
  },
  assetsDir: "assets",
  filenameHashing: false,
  lintOnSave: process.env.NODE_ENV !== "production",
  // lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    host: "0.0.0.0",
    port: 8080, // 端口號(hào)
    https: false, // https:{type:Boolean}
    open: true, //配置自動(dòng)啟動(dòng)瀏覽器
    proxy: {
      "/pre": {
        target: "http://192.168.102.54:8733/",
        changeOrigin: true, 
        pathRewrite: {
          "^/pre": "",
        },
      },
    },
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "./src/assets/css/theme.scss";`, // scss 的目錄文件
      },
    },
  },
};

三、離線Cesium配置

1、將Cesium資源文件夾

放在public/libs/Cesium，如圖所示

這個(gè)Cesium文件夾來(lái)源于，node-modules下的，如圖所示

2、單頁(yè)面 public/index.html引入

<script src="./libs/Cesium/Cesium.js" type="text/javascript"></script>

3、vue.config.js 如下配置

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const cesiumSource = "./node_modules/cesium/Source";
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  // 基本路徑
  // publicPath: "./portal", // 打包
  publicPath: "./",
  runtimeCompiler: true,
  // 輸出文件目錄
  outputDir: "dist",
  configureWebpack: {
    output: {
      sourcePrefix: "", // 1 讓webpack 正確處理多行字符串配置 amd參數(shù)
    },
    amd: {
      toUrlUndefined: true, // webpack在cesium中能友好的使用require
    },
    resolve: {
      extensions: [".js", ".vue", ".json"],
      alias: {
        vue$: "vue/dist/vue.esm.js",
        "@": path.resolve("src"),
        components: path.resolve("src/components"),
        assets: path.resolve("src/assets"),
        views: path.resolve("src/views"),
        cesium: path.resolve(__dirname, cesiumSource),
      },
    },
    plugins: [
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium',
          to: 'libs/Cesium',
          filter: (resourcePath) => {
            if (/cesium[\\/]Build[\\/]Cesium[\\/]Cesium.js$/.test(resourcePath)) {
              return false;
            } else if (/cesium[\\/]Build[\\/]Cesium[\\/]Cesium.d.ts$/.test(resourcePath)) {
              return false;
            }
            return true;
          },
        },
      ]),
      new webpack.DefinePlugin({
        // CESIUM_BASE_URL: JSON.stringify("./"),  // 本地
        CESIUM_BASE_URL: JSON.stringify('libs/Cesium'),
        //CESIUM_BASE_URL: JSON.stringify("./portal"),  // 打包后
      }),
    ],
    optimization : {
      splitChunks : {
        chunks : "all",
        cacheGroups : {
          cesium: {
            name: 'Cesium',
            priority: 30,
            test: /[\\/]node_modules[\\/]@smart[\\/]cesium[\\/]Build[\\/]Cesium[\\/]Cesium.js/
          },
        }
      }
    },
    // 導(dǎo)致打包出現(xiàn)length undefined
    // // webpack在cesium中能友好的使用import.meta 
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: "@open-wc/webpack-import-meta-loader",
          },
        },
      ],
    }
  },
  assetsDir: "assets",
  filenameHashing: false,
  lintOnSave: process.env.NODE_ENV !== "production",
  // lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    host: "0.0.0.0",
    port: 8080, // 端口號(hào)
    https: false, // https:{type:Boolean}
    open: true, //配置自動(dòng)啟動(dòng)瀏覽器
    proxy: {
      "/sso": {
        target: "http://192.168.102.194:8098/",
        changeOrigin: true, //開(kāi)啟代理：在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問(wèn)題
        pathRewrite: {
          "^/sso": "", //這里理解成用'/api'代替target里面的地址,比如我要調(diào)用'http://40.00.100.100:3002/user/add'，直接寫(xiě)'/api/user/add'即可
        },
      },
      // 共享中心
      "/pre": {
        target: "http://192.168.102.54:8733/",   // zk
        // target: "http://192.168.102.43:8733/",   // s
        changeOrigin: true, 
        pathRewrite: {
          "^/pre": "", 
        },
      },
      "/zk": {
        target: "http://192.168.102.54:8736/",
        changeOrigin: true,
        pathRewrite: {
          "^/zk": "", 
        },
      },
      "/scene": {
        target: "http://192.168.102.43:8070/",
        changeOrigin: true, 
        pathRewrite: {
          "^/scene": "",
        },
      },
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "./src/assets/css/theme.scss";`, // scss 的目錄文件
      },
    },
  },
};

4、在Cesium初始化時(shí)

如下使用

 init() {
      const Cesium = this.cesium;
      this.highlightColor = Cesium.Color.GREEN.withAlpha(0.6);
      this.normalColor = Cesium.Color.YELLOW.withAlpha(0.6);
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        //先行禁止infoBox彈出
        selectionIndicator: false,
        infoBox: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        fullscreenButton: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fulllscreenButtond: false,
        vrButton: false,
        // 加載本地離線Cesium資源
        imageryProvider: new Cesium.TileMapServiceImageryProvider({
          url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
        }),
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隱藏版權(quán)
    },

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue之子組件如何修改父組件的值

    vue之子組件如何修改父組件的值

    這篇文章主要介紹了vue之子組件如何修改父組件的值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-07-07
  • vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的實(shí)例代碼(rem適配)

    vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的實(shí)例代碼(rem適配)

    不管是移動(dòng)端的適配,還是大屏需求,都離不開(kāi)不一個(gè)單位rem,rem是相對(duì)于根元素的字體大小的單位,下面這篇文章主要給大家介紹了關(guān)于vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • vue使用canvas手寫(xiě)輸入識(shí)別中文

    vue使用canvas手寫(xiě)輸入識(shí)別中文

    這篇文章主要介紹了vue使用canvas手寫(xiě)輸入識(shí)別中文，工作時(shí)遇到一些項(xiàng)目如：系統(tǒng)上的輸入法使用不方便，客戶(hù)要求做一個(gè)嵌入web網(wǎng)頁(yè)的手寫(xiě)輸入法。下面我們來(lái)看看文章得具體描述吧
    2021-11-11
  • vue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法

    vue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法

    下面小編就為大家?guī)?lái)一篇vue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-11
  • vue中如何安裝使用jquery

    vue中如何安裝使用jquery

    這篇文章主要介紹了vue中如何安裝使用jquery的教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • 詳解Vue2.0組件的繼承與擴(kuò)展

    詳解Vue2.0組件的繼承與擴(kuò)展

    這篇文章主要介紹了詳解Vue2.0組件的繼承與擴(kuò)展，主要分享slot、mixins/extends和extend的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • Element 的 el-table 表格實(shí)現(xiàn)單元格合并功能

    Element 的 el-table 表格實(shí)現(xiàn)單元格合并功能

    這篇文章主要介紹了Element 的 el-table 表格實(shí)現(xiàn)單元格合并功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
    2024-07-07
  • vue-cropper實(shí)現(xiàn)裁剪圖片

    vue-cropper實(shí)現(xiàn)裁剪圖片

    這篇文章主要為大家詳細(xì)介紹了vue-cropper實(shí)現(xiàn)裁剪圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-05-05
  • vue.js中導(dǎo)出Excel表格的案例分析

    vue.js中導(dǎo)出Excel表格的案例分析

    這篇文章主要介紹了vue.js中如何導(dǎo)出Excel表格,在項(xiàng)目中經(jīng)常會(huì)遇到這樣的需求，今天小編分步驟通過(guò)實(shí)例代碼給大家詳細(xì)介紹，需要的朋友可以參考下
    2019-06-06
  • vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作

    vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作

    這篇文章主要介紹了vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11

最新評(píng)論