1.前端vue3调用代码
<template><div><div ref="mapContainer" class="map"></div></div>
</template><script setup lang="ts">
import { ref, onMounted } from "vue";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
import OSM from 'ol/source/OSM';
import ImageLayer from 'ol/layer/Image'; // 修改点1：导入ImageLayer
import ImageWMS from 'ol/source/ImageWMS'; // 修改点2：导入ImageWMS
// 调试信息const mapContainer = ref<HTMLElement | null>(null);onMounted(() => {mapdata();
});const mapdata = () => {if (!mapContainer.value) return;// 创建底图 - 使用OSMconst osmLayer = new TileLayer({source: new OSM({crossOrigin: "anonymous",}),});// 创建WMS图层const wmsLayer = new ImageLayer({source: new ImageWMS({ratio: 1,url: "http://localhost:3001/geoserver/wei/wms",crossOrigin: "anonymous",params: {'FORMAT': 'image/jpeg', // 注意：全小写或按照服务要求'VERSION': '1.1.1', // 通常为1.1.0或1.3.0，需要根据服务调整'LAYERS': 'wei:LE07_L1GT_128036_20010826_20180228_01_T2_B6_VCID_1' // 注意层名}})});// 添加错误处理
// wmsLayer.getSource().on('imageloaderror', (event) => {
// console.error('WMS 加载错误', event);
// });// 创建地图var map = new Map({target: mapContainer.value,layers: [osmLayer,wmsLayer], // 底图和WMS图层叠加view: new View({// 注意：这里的中心点坐标需要根据你的WMS图层的坐标系来调整// 如果是EPSG:3857，那么可以直接使用[727171.3138, 3808868.97942]// 但如果是EPSG:4326，则可能需要转换center: [11949614.44557,4075793.68680], // 这里假设已经是3857坐标zoom: 10,}),});};
</script><style scoped>
/* 保证容器可见 */
.debug-container {position: relative;
}.map {width: 1920px;height: 1080px; /* 关键：必须设置高度 */background: #e0f7fa; /* 调试背景色 */border: 2px dashed #4caf50; /* 调试边框 */
}.debug-info {position: absolute;top: 10px;left: 10px;background: rgba(0, 0, 0, 0.7);color: white;padding: 8px 12px;border-radius: 4px;font-family: monospace;
}
</style>2.代码中url ,params，中心点配置见gerserver的预览
3.启动gerserver服务发布你的数据后启动预览
f12进入Network 点击wms？… 可以查看前端代码中的调用参数
这里就可以看到前端vue代码调用时的参数
前端调用代码中的中心点可以鼠标上去的任意一个坐标
4.启动vue3项目，发现跨域
5，因为我们的geoserver服务是tomcat中启动的，所以我们给tomcat配置跨域。所以给tomcat 的web.xml 添加这段代码就可以，完了重启tomcat
<filter><filter-name>CorsFilter</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>
</filter><filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/*</url-pattern>
</filter-mapping>
然后在启动vue3项目访问，此时我们发布的数据前端调用成功了
注意发布的数据配置：在geoserver中发布数据时这块选择3857,要不前端用OpenLayer调用会报错
