使用openlayer在网页展示geoserver中的数据

dontgotobed

已于 2022-04-13 21:26:07 修改

阅读量847

点赞数

文章标签： javascript

于 2022-04-13 21:25:02 首次发布

本文链接：https://blog.csdn.net/m0_48335178/article/details/124157728

版权

本文介绍了如何使用OpenLayers在网页上显示从GeoServer发布的WMS地图服务。首先，创建OpenLayers地图对象，然后在GeoServer发布自己的地图服务，接着将服务添加到OpenLayers地图中。通过调整代码中的URL和图层名称属性，成功实现了地图显示。遇到跨域问题时，无需修改web.xml，直接使用代码也能成功加载地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

step 1

首先得先有一个 map 对象，直接去 openlayers 官网找 quick start 就可以 copy 到代码，类似这样，不墨迹了

<script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
</script>

step 2

去geoserver发布一个自己的wms地图服务。geoserver官网有教程，中文版在csdn上一搜便是

我的工作空间

在这里插入图片描述

我的数据源

在这里插入图片描述

我的图层

在这里插入图片描述

step 3

添加这样的js代码。其中 name 就是该图层的名称属性，按需取用即可，不影响地图显示（但是如果还想在网页上显示图层名称，layerName[i] = layer[i].get(‘name’)，那就要设置一下展示的名称）

var ZhejiangLayer = new ol.layer.Tile({
    name: "浙江的县",
    source: new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/zhejiang/wms",
        params: {
            "LAYERS": 'zhejiang:浙江省乡镇地图2017',
        }
    })
});
map.addLayer(ZhejiangLayer);

必须替换的地方有两处：

source 中的 url, 换成自己的。具体就是在 geoserver 的 Layer Preview 的网址前半部分。与自己刚刚发布服务时的 url 设置是对应的。
source 中的 params 的 LAYERS 换成自己需要的，用 工作空间:图层名称 的格式，也就是 geoserver - Layer 中 Name 这列，复制粘贴即可

step 4

然后就可以显示啦。打开html文件就行。ps. 设置一下 map 对象的 view 可以让地图一打开就是自己想要的位置，比如

var projection = new ol.proj.Projection({       //去官网看projection属性
    code: 'EPSG:4326',
    units: 'degrees',
    axisOrientation: 'neu',
    global: true
}); // projection比较长，单独拎出来定义一下

var map = new ol.Map({
    target: "map",
    layers: [
        new ol.layer.Tile({
            name: "OSM底图",
            source: new ol.source.OSM(),
        })
    ],
    view: new ol.View({ // View 包括 center, projection, zoom 这些
        center: [122, 30],
        projection: projection,
        zoom: 7
    }),
});

碎碎念：
之前总是碰到跨域问题，把自己的web.xml文件改来改去也没成功，ajax 暂时没太懂。后来索性又换回原来的web.xml文件，结果 layer preview 那里有好多图层没法用 openlayers 预览，一点击openlayers 就直接下载一个 wms 文件，莫名其妙，看了网上的教程也不行。
本以为凉凉了，可这回直接改老师的代码反倒秒成功！马上自己发布了一个地图服务真的可以，相当于没管跨域的事。
哦对，发布地图服务的时候要编辑一下工作空间，把这些 service 选上。感觉是起作用的，反正我可以了