1. 程式人生 > >(十九)ArcGIS JS 加載WMS服務(超圖示例)

(十九)ArcGIS JS 加載WMS服務(超圖示例)

reference title dom content add local type super 版本號

前言

在工作中,需要在ArcGIS API for JavaScript中加載超圖服務,因為超圖的rest服務只可以用於Leaflet 、openlayers3 (with MVT) 、MapboxGL 、Tianditu.com,在使用ArcGIS API是無法加載超圖的rest服務的(我認知的)。
在超圖的superMap iServer中可以發布符合OGC規則的WMS服務,這時,我們可以通ArcGIS API加載WMS服務的形式加載超圖服務。

加載WMS服務要點

visibleLayers:顯示圖層
extent:加載範圍
spatialReference:控件參考
version: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" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.25/3.25/esri/css/esri.css" />

<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.25/3.25/init.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>

<script>

var map;
require([
‘esri/map‘, ‘esri/layers/WMSLayer‘, ‘esri/layers/WMSLayerInfo‘, ‘esri/geometry/Extent‘,
‘dojo/parser‘, ‘dojo/domReady!‘
], function (Map, WMSLayer, WMSLayerInfo, Extent, parser) {
parser.parse();

map = new Map(‘map‘);
var layer1 = new WMSLayerInfo({
name: ‘China‘,
title: ‘Rivers‘,
spatialReferences: [4326]
});
var resourceInfo = {
extent: new Extent(114, 34, 117, 60, { wkid: 4326 }),
layerInfos: [layer1],
version: "1.1.1"
};

var wmsLayer = new WMSLayer(‘http://www.supermap.com.cn:8090/iserver/services/map-china400/wms111/China‘, {
resourceInfo: resourceInfo,
visibleLayers: [‘China‘]
});
map.addLayers([wmsLayer]);

});
</script>
</head>

<body>
<div id="map"> </div>
</body>
</html>
---------------------
作者:idomyway
來源:CSDN
原文:https://blog.csdn.net/idomyway/article/details/84863032
版權聲明:本文為博主原創文章,轉載請附上博文鏈接!

(十九)ArcGIS JS 加載WMS服務(超圖示例)