-vOpenLayersElementUI加载WMS地图服务准备工作安装vue创建vue项目安装OpenLayers安装ElementUI加载wms地图服务准备工作

需要安装好nodejsnodejs下载地址下载对应的版本向导式安装即可。

安装完成后控制台输入node

下载完成后默认将缓存路径和下载路径设置的C盘可以使用如下命令修改

npm

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

Get-ExecutionPolicy2修改执行策略为RemoteSigned

Set-ExecutionPolicy

***(项目名字母只能小写)接着选择vue项目的配置我这里选择的是vue3其他的配置如下图

启动vue项目进入项目的下package.json文件修改serve“serve”:

“vue-cli-service

在配置好以上环境后下面就可以正式实现加载wms地图服务的功能。

在src/components目录下新建map.vue文件实现地图的显示

!--

ImageWMS({//不能设置为0否则地图不展示。

ratio:

1,url:

http://127.0.0.1:8080/geoserver/province/wms,params:

{LAYERS:

其他的布局可以直接在element常用布局中直接复制模板进行修改。

templatediv

classsys-headerOpenLayers加载WMS地图服务/el-headerel-container

classapp-content-pannelel-aside

classsys-menu

width200px/el-asideel-containerel-main

classapp-mainolMap/olMap/el-mainel-footer/el-footer/el-container/el-container/el-container/div

/templatescript

element-plus/es/locale/lang/zh-cn;const

app

createApp(App);app.use(ElementPlus,

locale: