arcgis javacript4.x加载WMS服务图层
arcgis javacript 3.x加载WMS图层
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Map with WMS</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.39/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.39/"></script>
<script>
var map;
require([
'esri/map', 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',
'dojo/_base/array', 'dojo/dom', 'dojo/dom-construct', 'dojo/parser', "esri/InfoTemplate", "esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/Color",
"dojo/on", "esri/geometry/Polyline", "esri/symbols/PictureMarkerSymbol", "esri/dijit/BasemapGallery", "esri/symbols/SimpleFillSymbol",
"esri/geometry/Polygon", "esri/symbols/Font",
'dojo/domReady!'
], function (Map, WMSLayer, WMSLayerInfo, Extent, array, dom, domConst, parser,
InfoTemplate, Draw, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, Color, on, Polyline, PictureMarkerSymbol,
BasemapGallery, SimpleFillSymbol, Polygon, Font) {
//parser.parse();
///加载图层
map = new Map('map', {
basemap: "osm",
center: [121.07, 37.686],
zoom: 14
});
//构建图层
var layer1 = new WMSLayerInfo({
name: 'shelby:wanhuaShpGroup',
title: 'satellite'
});
var resourceInfo = {
extent: new Extent(-126.40869140625, 31.025390625, -109.66552734375, 41.583203125, {//左下角到右上角的点坐标
wkid: 4326//坐标系设置为GCS_WGS_1984
}),
layerInfos: [layer1]
};
var wmsLayer = new WMSLayer('http://localhost:8080/geoserver/shelby/wms', {//geoserver中wms服务地址
resourceInfo: resourceInfo,
visibleLayers: ['shelby:wanhuaShpGroup'],//geoserver中发布图层的名称（工作区：图层名字）
});
map.addLayers([wmsLayer]);
});
</script>
</head>
<body class="claro">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
</div>
</div>
</body>
</html>
arcgis javacript 4.x加载WMS图层
注意在4.x中，WMSLayerInfo不再时对象，不能new。将构建图层的代码换成下面的即可加载WMS服务图层
let layer = new WMSLayer({
url: "http://localhost:8080/geoserver/shelby/wms",// url to the service,
sublayers: [{
name: "shelby:wanhuaShpGroup"// name of the sublayer,
//legendUrl: // url to the legend
}]
});
map.add(layer);