ArcGIS API for JavaScript 3.X 加载 ArcGIS Server 图层服务
文章目录
- 一、配置 ArcGIS API for JavaScript 使用环境
- 二、编辑底图
- 三、操作加载图层服务及移除图层服务
- 四、完整代码
一、配置 ArcGIS API for JavaScript 使用环境
这里以3.38版本为例，具体因需求而定（推荐使用最新版）
<link rel="stylesheet" href="https://js.arcgis.com/3.38/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/css/esri.css">
<script src="https://js.arcgis.com/3.38/"></script>
二、编辑底图
这里使用Esri自带的底图（osm）
map = new Map("map", {
basemap: "osm",
center: [116.16, 36.37],
zoom: 9
});
三、操作加载图层服务及移除图层服务
此处采用两种JS点击事件的操作方式，一种为JS原生点击事件写法（remove），一种为DOJO框架下的点击事件写法。为什么使用两种？因为在移除的时候如果使用DOJO的那种方式出现了一点问题，大家可以尝试改一下。url为ArcGIS Server上的图层链接。
var remove = document.getElementById("remove")
on(dom.byId("add"), "click", function(){
var infoTemplate = new InfoTemplate("Attributes", "${*}");
var url = "https://zdddn.gis.com:6443/arcgis/rest/services/lcs/MapServer/0";
var featureLayerOptions = {
id: "cities",
mode: FeatureLayer.MODE_AUTO,
outFields: ["*"],
infoTemplate: infoTemplate
};
var citiesFeatureLayer = new FeatureLayer(url, featureLayerOptions);
map.addLayer(citiesFeatureLayer);
remove.onclick = function () {
map.removeLayer(citiesFeatureLayer);
}
})
四、完整代码
<!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> ArcGIS API for JavaScript 加载地图服务</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.38/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
#leftPane{
color:#000;
width:250px;
padding-bottom:15px;
}
.details{
font-size:14px;
font-weight:600;
padding-bottom:20px;
}
button{
margin:2px;
cursor:pointer;
}
</style>
<script src="https://js.arcgis.com/3.38/"></script>
<script>
var map, tb;
require([
"dojo/dom",
"dojo/_base/array",
"dojo/parser",
"dojo/query",
"dojo/on",
"esri/map",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dojo/domReady!"
], function(
dom,
array,
parser,
query,
on,
Map,
FeatureLayer,
InfoTemplate,
) {
map = new Map("map", {
basemap: "osm",
center: [116.16, 36.37],
zoom: 9
});
var remove = document.getElementById("remove")
on(dom.byId("add"), "click", function(){
var infoTemplate = new InfoTemplate("Attributes", "${*}");
var url ="https://zdddn.gis.com:6443/arcgis/rest/services/lcs/MapServer/0";
var featureLayerOptions = {
id: "cities",
mode: FeatureLayer.MODE_AUTO,
outFields: ["*"],
infoTemplate: infoTemplate
};
var citiesFeatureLayer = new FeatureLayer(url, featureLayerOptions);
map.addLayer(citiesFeatureLayer);
remove.onclick = function () {
map.removeLayer(citiesFeatureLayer);
}
})
parser.parse();
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="gutters:'false', design:'sidebar'"
style="width:100%;height:100%;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
</div>
<div id="leftPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'left'"
center>
<button id="add" type="button">加载地图服务服务</button><br/>
<button id="remove" type="button">移除地图服务服务</button>
<br/><hr />
</div>
</div>
</body>
</html>
注：博客中有破解版的ArcGIS Server 10.3版本的安装包及安装教程