準備工作

需要安裝好nodejs，nodejs下載地址，下載對應(yīng)的版本向?qū)桨惭b即可。

安裝完成后，控制臺輸入node -v，顯示版本號即安裝成功。
下載完成后，默認將緩存路徑和下載路徑設(shè)置的C盤，可以使用如下命令修改：

npm config set prefix "下載默認路徑"
npm config set cache “緩存路徑”

設(shè)置之后需要將上面兩個地址添加到環(huán)境變量中。

安裝vue

# - g為全局安裝，將安裝到node_global目錄下，否則只會安裝到當前目錄
npm install vue -g

安裝完成之后控制臺輸入vue -V，顯示版本號則安裝成功。

安裝后遇到的問題：
執(zhí)行vue時報錯：

vue : 無法加載文件…/vue.ps1，因為在此系統(tǒng)上禁止運行腳本，有關(guān)詳細信息，…

解決方案：控制臺輸入以下命令
（1）查看當前的執(zhí)行策略

Get-ExecutionPolicy

（2）修改執(zhí)行策略為RemoteSigned

Set-ExecutionPolicy -Scope CurrentUse

創(chuàng)建vue項目

控制臺進入到要創(chuàng)建vue項目的目錄下，執(zhí)行如下命令：

vue create ***(項目名，字母只能小寫)

接著選擇vue項目的配置，我這里選擇的是vue3，其他的配置如下圖：

啟動vue項目：進入項目的目錄下，執(zhí)行npm run serve 啟動。訪問http://localhost:8080/ 顯示vue界面即啟動成功。
修改vue項目的端口可以通過項目根目錄下package.json文件修改serve：“serve”: “vue-cli-service serve --port 8002”

安裝OpenLayers

在項目根目錄下執(zhí)行

npm install ol

安裝ElementUI

由于選擇的是vue3項目，所以需要配合使用element plus,在項目根目錄下執(zhí)行

npm install element-plus --save

加載wms地圖服務(wù)

在配置好以上環(huán)境后，下面就可以正式實現(xiàn)加載wms地圖服務(wù)的功能。
在src/components目錄下新建map.vue文件，實現(xiàn)地圖的顯示：

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div
    id="mapDiv"
    style="width: 800px; height: 600px; border: 1px solid #ff0000"
  ></div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import ImageWMS from "ol/source/ImageWMS";
import Image from "ol/layer/Image";

export default {
  data() {
    return {
      map: null, //地圖
    };
  },
  mounted() {
    this.initMap();
  },
  created() {},
  methods: {
    initMap() {
      var image = new Image({
        source: new ImageWMS({
          //不能設(shè)置為0，否則地圖不展示。
          ratio: 1,
          url: "http://127.0.0.1:8080/geoserver/province/wms",
          params: {
            LAYERS: "province:新疆",
            STYLES: "",
            VERSION: "1.1.1",
            FORMAT: "image/png",
          },
          serverType: "geoserver",
        }),
      });
      this.map = new Map({
        //地圖容器ID
        target: "mapDiv",
        //引入地圖
        layers: [image],
        view: new View({
          center: [84, 42],
          zoom: 22,
        }),
      });
      this.$root._olMap = this.map;
    },
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 800px;
}
</style>

其中，url及相關(guān)參數(shù)可以從geoserver中獲?。?br>

接下來修改App.vue的內(nèi)容，這里使用了這個布局：

其他的布局可以直接在element常用布局中直接復(fù)制模板進行修改。

<template>
  <div id="app">
    <el-container class="app-out-pannel">
      <el-header class="sys-header">OpenLayers加載WMS地圖服務(wù)</el-header>
      <el-container class="app-content-pannel">
        <el-aside class="sys-menu" width="200px"></el-aside>
        <el-container>
          <el-main class="app-main">
            <olMap></olMap>
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import olMap from "./components/map.vue";

export default {
  name: "App",
  components: {
    olMap,
  },
};
</script>

<style>
#app {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}
.app-out-pannel,
.app-content-pannel {
  height: 100%;
}
.sys-header {
  background-color: #a7ee91;
  line-height: 60px;
  height: 60px;
  color: #0e0d0d;
  font-size: 600;
}
.sys-menu {
  background-color: #c0fac5;
}
.app-main {
  background-color: #faf9f8;
}
</style>

最后修改main.js，引入相關(guān)的包：

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import zhCn from "element-plus/es/locale/lang/zh-cn";

const app = createApp(App);

app.use(ElementPlus, { locale: zhCn });
app.mount("#app");

最后輸入 npm run serve 運行，瀏覽器中打開如下圖：
文章來源地址http://www.zghlxwxcb.cn/news/detail-408455.html

到了這里，關(guān)于【OpenLayers】VUE+OpenLayers+ElementUI加載WMS地圖服務(wù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！