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調用會報錯
