首页 > 其他分享> > GeoServer发布地图服务

GeoServer发布地图服务

2022-07-28 23:06:58 作者：互联网

1.下载并安装`GeoServer`

2.启动服务

默认账号是admin,密码geoserver

3.使用QGIS为样例图层配色(以面积大小分类配色)

导出样式文件

4.添加样式至GeoServer样式库

5.新建工作空间

设置权限，方便服务调用

6.添加图层数据，因为样例是.shp格式，所以我选择`Shapefile - ESRI(tm) Shapefiles (*.shp)`

7.选择工作区间，设置图层数据的路径

8.发布图层

设置样式，点击发布栏

9.预览图层

如果点击Openlayer出现不能预览，变成下载WMS文件，可以下载用记事本打开查看问题原因！！！

中文乱码了，￣□￣｜｜待解决...

10.QGIS加载服务

复制WMS服务链接

打开QGIS,右键WMS/WMTS服务，新建连接

11.ArcGIS for JS 调用服务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GeoServer</title>
</head>
<link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.22/"></script>
<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/WMSLayer"
    ], (
        Map,
        MapView,
        WMSLayer
    ) => {
        var map = new Map({
            basemap: "osm"
        })

        var view = new MapView({
            container: "viewDiv",
            map: map
        })

        var wms = new WMSLayer({
            url: "http://localhost:9090/geoserver/guangdong/wms",
            sublayers: [{
                name: "guangdong",
            }]
        })

        map.add(wms)

        wms.when(() => {
            let { x, y } = wms.fullExtent.center
            console.log(x, y)
            view.goTo({
                center: [x, y],
                zoom:7
            }).catch((err) => {
                console.log(err)
            })
        })
    })
</script>
<style>
    html,
    body,
    #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
</style>
<body>
    <div id="viewDiv"></div>
</body>
</html>

出现跨域访问问题

windwos安装包2.21.0版本Geoserver解决跨域（亲测，可行）

打开geoserver\webapps\geoserver\WEB-INF下的web.xml文件。去掉下面代码的注释，在bin文件夹下startup.bat重启即可。

 <!-- Uncomment following filter to enable CORS in Jetty. Do not forget the second config block further down.    -->
    <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
      <init-param>
        <param-name>chainPreflight</param-name>
        <param-value>false</param-value>
      </init-param>
      <init-param>
        <param-name>allowedOrigins</param-name>
        <param-value>*</param-value>
      </init-param>
      <init-param>
        <param-name>allowedMethods</param-name>
        <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
      </init-param>
      <init-param>
        <param-name>allowedHeaders</param-name>
        <param-value>*</param-value>
      </init-param>
    </filter>
    
   <!-- Uncomment following filter to enable CORS in Tomcat. Do not forget the second config block further down.    -->
    <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
      <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>*</param-value>
      </init-param>
    </filter>

   <!-- Uncomment following filter to enable CORS   -->
    <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

标签：map,服务,wms,GeoServer,地图,geoserver,图层
来源： https://www.cnblogs.com/echohye/p/16530458.html