ArcGIS API for JavaScript 3.X 加载 ArcGIS Server 图层服务

最新推荐文章于 2023-03-23 10:00:00 发布

zzzGISer

最新推荐文章于 2023-03-23 10:00:00 发布

阅读量1.3k

点赞数 2

本文链接：https://blog.csdn.net/qq_54714468/article/details/120981365

版权

ArcGIS API for JavaScript 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章目录

一、配置 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版本的安装包及安装教程

zzzGISer

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
ArcGIS API for JavaScript 3.X 加载 ArcGIS Server 图层服务

文章目录一、配置 ArcGIS API for JavaScript 使用环境二、编辑底图，使用Esri自带的底图（osm）三、操作加载图层服务及移除图层服务四、完整代码一、配置 ArcGIS API for JavaScript 使用环境这里以3.38版本为例，具体因需求而定（推荐使用最新版）。<link rel="stylesheet" href="https://js.arcgis.com/3.38/dijit/themes/claro/claro.css"><link re
复制链接

扫一扫