openLayers添加geoserver服务wms图层(vue项目)
前期准备
真的非常感谢各位大佬的分享
tomcat + geoserver 服务安装启动
可以参考下面这篇文章非常详细,感谢大佬
链接: https://blog.csdn.net/sinat_28797501/article/details/69668701
8080的端口被占用 netstat -aon|findstr “8080” 找到pid 打开管理器-服务-找到对应pid结束任务
openLayers npm包
链接: https://www.npmjs.com/package/ol?activeTab=readme
shp文件参考
我当时找了好半天,这里也给把链接给出来,直接按照他的方法弄就可以了
链接: https://zhuanlan.zhihu.com/p/561833219
关于openLayers底图看不了
可以直接使用高德,百度或者天地图,这里有大佬进行了汇总
链接: https://blog.csdn.net/hhy321/article/details/123490804
跨域的问题
在使用wms图层的时候碰到了跨域的问题,可能大家也会碰到,给大家提供一下解决思路
我是直接使用了火狐的浏览器,安装了插件,可以参考下面这篇
链接: https://blog.csdn.net/qq_43592064/article/details/118903001
正式开始
贴代码 如果TileWMS出不来可以试试ImageWMS
<template>
<div id="map" class="map__x"></div>
</template>
<script>
// 引入依赖
import { Map, View } from 'ol';
import XYZ from 'ol/source/XYZ' //xyz
import Tile from 'ol/layer/Tile'
import TileWMS from 'ol/source/TileWMS'
import Image from "ol/layer/Image"
import ImageWMS from 'ol/source/ImageWMS'
export default {
name: 'study',
// 挂载
mounted() {
this.initMap()
},
methods: {
initMap() {
var ditu= new Tile({
title: "底图",
source: new XYZ({
url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
})
});
var wmsSource = new Tile({
source: new TileWMS({
url: 'http://localhost:8080/geoserver/test/wms',
params: {
LAYERS: 'test:wuhan',
TILED: true,
FORMAT: 'image/png',
},
serverType: 'geoserver',
crossOrigin: 'anonymous',
})
})
var map = new Map({
target: 'map',
layers: [
ditu,
wmsSource
],
// 设置显示地图的视图
view: new View({
center:[114.247537142389, 30.607708320148],
projection: 'EPSG:4326',
zoom: 10,
})
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* map容器撑开 */
.map__x {
width: 1500px;
height: 800px;
border: 1px solid #eee;
}
</style>