GeoServer发布地图服务
1.下载并安装GeoServer
2.启动服务
默认账号是admin,密码geoserver
3.使用QGIS为样例图层配色(以面积大小分类配色)
导出样式文件
4.添加样式至GeoServer样式库
5.新建工作空间
设置权限，方便服务调用
6.添加图层数据，因为样例是.shp格式，所以我选择Shapefile - ESRI(tm) Shapefiles (*.shp)
7.选择工作区间，设置图层数据的路径
8.发布图层
设置样式，点击发布栏
9.预览图层
如果点击Openlayer出现不能预览，变成下载WMS文件，可以下载用记事本打开查看问题原因！！！
中文乱码了，￣□￣｜｜ 待解决...
**2022-7-28 => **GeoServer发布服务，中文标注乱码
打工人使劲搬砖~~~ 终于解决了，文章的截图就懒得修改了O(∩_∩)O~
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>
