【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务

这篇具有很好参考价值的文章主要介绍了【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

准备工作

需要安装好nodejs,nodejs下载地址,下载对应的版本向导式安装即可。
【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务
安装完成后,控制台输入node -v,显示版本号即安装成功。
下载完成后,默认将缓存路径和下载路径设置的C盘,可以使用如下命令修改:

npm config set prefix "下载默认路径"
npm config set cache “缓存路径”

设置之后需要将上面两个地址添加到环境变量中。

安装vue

# - g为全局安装,将安装到node_global目录下,否则只会安装到当前目录
npm install vue -g

安装完成之后控制台输入vue -V,显示版本号则安装成功。

安装后遇到的问题:
执行vue时报错:

vue : 无法加载文件…/vue.ps1,因为在此系统上禁止运行脚本,有关详细信息,…

解决方案:控制台输入以下命令
(1)查看当前的执行策略

Get-ExecutionPolicy

(2)修改执行策略为RemoteSigned

Set-ExecutionPolicy -Scope CurrentUse

【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务

创建vue项目

控制台进入到要创建vue项目的目录下,执行如下命令:

vue create ***(项目名,字母只能小写)

接着选择vue项目的配置,我这里选择的是vue3,其他的配置如下图:
【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务
启动vue项目:进入项目的目录下,执行npm run serve 启动。访问http://localhost:8080/ 显示vue界面即启动成功。
修改vue项目的端口可以通过项目根目录下package.json文件修改serve:“serve”: “vue-cli-service serve --port 8002”
【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务

安装OpenLayers

在项目根目录下执行

npm install ol

安装ElementUI

由于选择的是vue3项目,所以需要配合使用element plus,在项目根目录下执行

npm install element-plus --save

加载wms地图服务

在配置好以上环境后,下面就可以正式实现加载wms地图服务的功能。
在src/components目录下新建map.vue文件,实现地图的显示:

<!-- 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({
          //不能设置为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及相关参数可以从geoserver中获取:
【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务

接下来修改App.vue的内容,这里使用了这个布局:
【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务
其他的布局可以直接在element常用布局中直接复制模板进行修改。

<template>
  <div id="app">
    <el-container class="app-out-pannel">
      <el-header class="sys-header">OpenLayers加载WMS地图服务</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,引入相关的包:

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 运行,浏览器中打开如下图:
【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务文章来源地址https://www.toymoban.com/news/detail-408455.html

到了这里,关于【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue+OpenLayers 创建地图并显示鼠标所在经纬度

    本文用的是高德地图 页面 初始化地图 附css代码

    2024年01月17日
    浏览(54)
  • 243:vue+Openlayers 更改鼠标滚轮缩放地图大小,每次缩放小一点

    第243个 点击查看专栏目录 本示例的目的是介绍如何在vue+openlayers项目中设置鼠标滚轮缩放地图大小,每次滑动一格滚轮,设定的值非默认值1。具体的设置方法,参考源代码。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果

    2024年02月09日
    浏览(96)
  • 使用vue+openLayers开发离线地图以及离线点位的展示

    1 .下载 引入到需要的组件中 2. 需要用到的api... (根据开发需求以及实际情况进行引入) 3. 准备一个dom容器以及弹出层的容器 4. 准备变量 5. 代码如下: 6. 最后贴出popup的样式 7. 参考中文官网OpenLayers 3 介绍

    2024年02月13日
    浏览(52)
  • OpenLayers入门,OpenLayers实现地图原地旋转动画效果

    专栏目录: OpenLayers入门教程汇总目录 OpenLayers实现地图原地旋转动画效果,顾名思义,就是站在原地转一圈。 使用npm安装依赖 使用Yarn安装依赖 vue项目使用请参考这篇文章:

    2024年02月13日
    浏览(58)
  • openLayers基础地图操作

    和高德地图,百度地图,腾讯地图,Arcgis一样,OpenLayers是一个用于开发WebGIS客户端的JavaScript包。 它有自带的api在线说明官方文档: https://openlayers.org/ 。也有中文api网站: http://linwei.xyz/ol3-primer/ch01/index.html 。 openLayers依赖包npm安装: npm install ol --save openLayers依赖包yarn安装:

    2024年02月05日
    浏览(55)
  • openlayers 地图组件封装

    2024年02月07日
    浏览(43)
  • openlayers实现锁定地图,不可使用鼠标拖动放大缩小地图

    开启地图锁定功能,不再允许使用鼠标拖拽查看地图,使用鼠标滚轮放大缩小查看地图 关键代码 包含业务开关的代码 注:这个图是别的大佬整理的 https://www.ktanx.com/blog/p/2656

    2024年02月02日
    浏览(52)
  • VUE百度地图加载3D模型(MapVThreeGallery)

    参考百度开发文档 补充下(里面有免费的可以拿来玩)3D模型下载网址 步骤 1: npm install mapv-three 安装插件 2:在index.html加载百度地图 注:加载model.glb文件需要是请求服务器来的,没有服务器资源的可以像我一样在本地用VS插件(Live Server)起了个小型服务器放3D模型数据 ----使用

    2024年02月11日
    浏览(50)
  • openlayers学习(一)仿3D效果地图

    最近看到一些3D的地图,觉得很炫酷,实现按道理来说应该是用3D类的地图来实现,刚好在学习一些openlayers的内容,所以也尝试一下,但最终效果也仅局限于单个polygon下。 其他实现方式应该还是使用cesium或者mapbox或者echarts会方便很多。 学了一趟openlayers后,发现并没有那种可

    2023年04月26日
    浏览(36)
  • openlayers [七] 地图控件controls详解

    上篇文章我们将了在地图上的交互(interaction),那些都是一些隐性的需要去使用才能知道存在有这样一个东西,就像彩蛋一样。这篇我们主要讲地图上的控件(controls),这些可以说都是显性的东西,如果设置了,打开地图页面就能够看到的东西 属性 不是必须存在 的,默认使用

    2024年01月22日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包