一、geoserver發布WMS服務
具體發布過程可參考我之前的博客:https://blog.csdn.net/qq_32492777/article/details/87715386
二、geoserver中打開地圖服務
例如我的請求地址是:http://localhost:8686/geoserver/test/wms
三、ArcGIS API for JS 加載geoserver 發布的WMS服務
第一種方法:
//加載geoserver發布的WMS服務
var wmsLayer = new WMSLayer("http://localhost:8686/geoserver/test/wms", {
format: "png",
resourceInfo: {
copyright: "GeoServer",
description: "china",
extent: new Extent(70.400390625, 16.34765625, 137.900390625, 55.37109375, {
wkid: 4326
}),
featureInfoFormat: "text/html",
layerInfos: [
new WMSLayerInfo({
name: "test:china_all", //命名空間:圖層
title: "china_all",
queryable: true,
showPopup: true
})
],
spatialReferences: [4326], //坐標系
version: "1.1.1"
},
version: "1.1.1",
visibleLayers: [
"test:china_all" //命名空間:圖層
]
});
wmsLayer.on("error", function (response) {
console.log("Error: %s", response.error.message);
});
map.addLayer(wmsLayer);
第二種方法:
//第二種方法
var resourceInfo = {
extent: new Extent(70.400390625, 16.34765625, 137.900390625, 55.37109375, {
wkid: 4326
}),
layerInfos: [],
version: '1.1.1'
};
var geoWmsUrl = "http://localhost:8686/geoserver/test/wms";
var geoWmsLayer = new WMSLayer(geoWmsUrl,{resourceInfo: resourceInfo});
geoWmsLayer.setImageFormat("png");
geoWmsLayer.setVisibleLayers(["test:china_all"]);
map.addLayer(geoWmsLayer);
//注:setVisibleLayers中的參數對應網址中的“LAYERS=”后面的值
注:
即:http://localhost:8686/geoserver/test/wms?service=WMS&version=1.1.0&request=GetMap&layers=test%3Achina_all&bbox=73.55770111%2C18.15930557%2C134.77392578%2C53.56085968&width=768&height=444&srs=EPSG%3A4326&format=application/openlayers("%3A"即為":")
結果展示:
————————————————
版權聲明:本文為CSDN博主「MLAY」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_32492777/article/details/87860897