Arcgis api for JavaScript开发基础及控件学习

mjy555

已于 2022-03-09 11:08:12 修改

阅读量4.6k

点赞数 5

于 2022-03-09 10:59:53 首次发布

本文链接：https://blog.csdn.net/mjy555/article/details/123369250

版权

ArcGIS API for Javascript 专栏收录该内容

3 篇文章 10 订阅

订阅专栏

一、基本概念

1.1 地图

Map 是承载图层的容器，主要用于呈现地图服务、影像服务，此外还可以展示 WMS 服务等，一个图层只有被添加到Map 中，才能被显示出来。

1.2图层

图层是承载服务的载体（GraphicsLayer 除外），ArcGIS for Server 将GIS 资源作为服务发布出来，要想在浏览器端看到这些服务，就必须将这些服务和图层关联起来，不同的服务对应不同的图层类型,下表列出了这些服务和ArcGIS API for Javascript 中图层的对应关系。

图层	服务
ArcGISDynamicMapServiceLayer	ArcGIS for Server 发布的 2D 动态地图服务
ArcGISTiledMapServiceLayer	ArcGIS for Server 发布的 2D 缓存地图服务
ArcGISImageServiceLayer	ArcGIS for Server 发布的影像地图服务
GraphicsLayer	客户端图层不对应 ArcGIS for Server 发布的服务
FeatureLayer	ArcGIS for Server 发布的要素服务或者地图服务中的图层
WMSLayer	调用OGC（Open Geospatial Consortium）矢量地图服务
WMTSLayer	OGC（Open Geospatial Consortium）地图切片服务
KMLLayer	Keyhole Markup Language 描述和保存地理信息文件
VETiledLayer	微软的 Bing 地图服务
GeoRssLayer	支持 GeoRss 服务

图层在 Map 中是有一定的顺序的,当一个图层加入到 Map 中，后加入的图层是在 Map 的最上层。

1.3Geometry

几何对象用于表示对象的显示型式，在 ArcGIS API for Javascript 中Geometry 大体上可以分为下面几类：点、多点、线、矩形、多边和 ScreenPoint。其中 ScreenPoint 对象是最新版本增加的，是以像素的方式表示的点，而点、多点、线、矩形、多边形都是继承Geometry，其关系如下图：

Geometry类型：

几何	说明名
Geometry	抽象类，定义几何体的图形。
MapPoint	点对象。
MultiPoint	多点对象。
Polyline	多义线对象，由路径（Path）组合而成。
Envelope	矩形对象，长宽方向分别平行于 X、Y 轴。
Polygon	多边形对象，由环（Ring）组合而成。
ScreenPoint	用像素来表示点的 X,Y 坐标，相对于屏幕的左上角。

1.4Symbol

Symbol 定义了如何在 GraphicLayer 上显示点，线，面和文本，符号定义了几何对象的所有非地理特征方面的外观，包括图形的颜色，边框线宽度，透明度等等。ArcGIS API for Javascript 包含了很多符号类，每个类都允许你使用唯一的方式制定一种符号。每种符号都特定于一种类型（点、线，面和文本）。

1.5Geometry

Geometry 定义了对象的形状，Symbol 定义了图形是如何显示的，Graphic 可以包含一些属性信息，并且在Javascript 中还可以使用 infoTemplate（一个 InfoTemplate 包含标题和内容模板字符串，该内容模板字符串用于将Graphic 的属性转换成 HTML 的表达式）定义如何对属性信息进行显示，最终的 Graphic 则是被添加到GraphicsLayer 中，GraphicsLayer 允许对 Graphics 进行事件监听。

Graphic是Geometry，Attribute，Symbol和infoTemplate的和，如下所述：

Graphic=Geometry+Attribute+Symbol+infoTemplate

1.6Render

渲染器定义了一种或多种符号以应用于一个 GraphicsLayer。每个 Graphic 的符号所使用的符号取决于该 Graphic 的属性值。渲染器指定了属性值与符号之间的对应关系。

1.7FeauteSet

FeauteSet 是要素类的轻量级表示，相当于地理数据库中的一个要素类，是 Feature（要素）的集合， FeatureSet 中的每个 Feature 可能包含Geometry、属性、符号、和一个 InfoTemplate。如果 FeatureSet 不包含 Geometry,只包含属性，那么 FeatureSet 可以看作一个表,其中每个 Feature 是一个行对象。FeatureSet 是我们在利用ArcGIS API for Javacript 和ArcGIS for Server 进行数据通讯的一个非常重要的对象，当使用查询，地理处理和路径分析的时候，FeatureSet 常常作为这些分析的功能的输入和输出参数。

二、常用控件

在开发过程中我们会用到好多的控件，如鹰眼图、比例尺、书签、InfoWindow等，下面我们对这些控件进行学习。

2.1鹰眼图

OverviewMap 小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围。当主地图范围变化时，鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致，当鹰眼图空间的地图范围变化时，主地图的显示范围也会变化，主地图范围在OverviewMap 控件中以矩形表示。

2.1.1主要方法

方法	说明
attachTo	指定鹰眼图附加到地图的那个角落。参数值是 "top-right","bottom-right","bottom-left" 和"top-left".
baseLayer	指定鹰眼图空间地图的底图
expandFactor	设置鹰眼地图控件和矩形之间的比例，默认值是 2
opacity	指定鹰眼图控件上矩形的透明度

2.1.2属性

属性	说明
hide	隐藏鹰眼图控件
Show	显示鹰眼图控件
startup	当构造函数创建成功后，使用该方法后就可以进行用户交互了（几乎所有的控件（Map 除外）都有该方法
destroy	当应用程序不再需要比例尺控件的时候，摧毁该对象。（几乎所有的控件都有该方法）

2.1.3代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图窗口操作</title>
    <!-- 引入ArcGIS API for JS开发包 -->
    <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.29/"></script>
    <style>
        /* 指定样式 */
        html, body, #map{
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="mapDiv"></div>

    <script>
        require([
            "esri/map", 
			"esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/dijit/OverviewMap",
            "dojo/domReady!"
        ], function(
            Map, 
            OverviewMap,
			ArcGISDynamicMapServiceLayer
        ){
            // 初始化容器
            var map = new Map("mapDiv");
            var url = "http://192.168.0.11:50013/iserver/services/map-gzfcmap/arcgisrest/quanguo@SuperMapCloud/MapServer";
            var layer = new ArcGISDynamicMapServiceLayer(url);
            map.addLayer(layer);

            // 初始化鹰眼控件
            var overviewMap = new OverviewMap({
                map: map,
                attachTo: "bottom-left",        // 指定鹰眼控件放置在地图的左下角
                visible: true                   // 默认开启
            });
            // 开启鹰眼控件
            overviewMap.startup();
        })
    </script>
</body>
</html>

2.1.4显示效果

2.2Scalebar

Scalebar 用于在地图上或者一个指定的 HTML 节点中显示地图的比例尺信息。

2.2.1主要方法

方法

说明

attachTo

比例尺控件在其关联地图上位置。参数值是

"top-right","bottom-right","bottom-left" 和"top-left".

scalebarUnit

比例尺控件的单位

2.2.2属性

属性	说明
hide	隐藏比例尺控件
Show	显示比例尺控件

2.2.3代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书签</title>
    <link rel="stylesheet" type="text/css"
          href="http://localhost:81/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:81/arcgis_js_api/library/3.16/3.16/esri/css/esri.css"/>
    <script type="text/javascript" src="http://localhost:81/arcgis_js_api/library/3.16/3.16/init.js"></script>
    <style type="text/css">
        .MapClass {
            width: 100%;
            height: 600px;
            border: 1px solid #000;
            position: relative;
        }
 
    </style>
    <script type="text/Javascript">
        require(["esri/map","esri/dijit/OverviewMap","esri/dijit/Scalebar"], function (Map, OverviewMap, Scalebar) {
            var MyMap = new Map("MyMapDiv",{
                logo:false //取消esri的logo
            });
            var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://192.168.0.11:50013/iserver/services/map-gzfcmap/arcgisrest/quanguo@SuperMapCloud/MapServer");
            MyMap.addLayer(layer);
            var MapViewer = new OverviewMap({
                attachTo: "bottom-right",//鹰眼显示位置
                maximizeButton: true,//显示最大化按钮
                map: MyMap,//设置显示鹰眼图的基础图
                visible: true,//显示鹰眼图可见按钮
                width: 150,//设置鹰眼的div大小
                height: 150
            });
            MapViewer.startup();
 
            var scale = new Scalebar({
                map: MyMap,
                attachTo: "bottom-left",
                scalebarUnits: "english"
            });
            scale.show();
        });
    </script>
</head>
<body>
<div id="MyMapDiv" class="MapClass"></div>
</body>
</html>

2.2.4显示效果

2.3书签

书签控件用于管理用户创建的地图书签（ Bookmark.MapBookmark，提供新建书签、定位到书签和删除书签的功能。

2.3.1主要方法

方法	说明
bookmarks	在创建的时候用已有的书签对象初始化书签控件
editable	书签控件是否可以编辑
addBookmark	给书签控件添加一个书签
hide	隐藏书签控件
show	显示书签控件
removeBookmark	从书签中移除一个书签
toJson	将书签对象返回一组 json 对象

2.3.2属性

属性	说明
bookmarks	返回书签控件的所有书签

2.3.3事件

事件	说明
onClick	挡在一个书签上编辑的时候发生
onEdit	当编辑书签的时候发生
onRemove	当移除一个书签的时候发生

2.3.4代码示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>书签</title>
<link rel="stylesheet" type="text/css"
          href="http://localhost:81/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:81/arcgis_js_api/library/3.16/3.16/esri/css/esri.css"/>
    <script type="text/javascript" src="http://localhost:81/arcgis_js_api/library/3.16/3.16/init.js"></script>
     <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .bookmark-container {
        position: absolute;
        top: 100px;
        left: 15px;
        padding: 1rem;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #eeeeee;
      }
    </style>
       <script>
           var dojoConfig = {
               parseOnLoad: true     // 解析
           };
    </script>
      <script>
          // 导入包
          dojo.require("dijit.layout.BorderContainer");
          dojo.require("dijit.layout.ContentPane");
          dojo.require("dijit.form.DropDownButton");
          dojo.require("esri.map");
          dojo.require("esri.dijit.Bookmarks");
          var map, bookmarks;
          function init() {
           
              map = new esri.Map("map");
              MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
              ("http://192.168.0.11:50013/iserver/services/map-gzfcmap/arcgisrest/quanguo@SuperMapCloud/MapServer");
              map.addLayer(MyTiledMapServiceLayer);

              // 书签可以被指定为一个数组对象结构:
              // { extent: <esri.geometry.Extent>, name: <some string> }
              var bookmarks_list = [
                 ];
              // 创建书签组件
              bookmarks = new esri.dijit.Bookmarks({
                  map: map,
                  editable: true,    // 可允许编辑。默认false则只读模式
                  bookmarks: bookmarks_list        // Array / JSON
              }, dojo.byId('bookmarks'));

      
              // Add bookmarks to the widget
              Object.keys(bookmarks_list).forEach(function (bookmark) {
                  bookmarks.addBookmark(bookmarkJSON[bookmark]);    
              });
              // 绑定移除标签事件
              dojo.connect(bookmarks, "onRemove", function () {
                  alert('删除成功');
              });
          }
          // 加载时显示
          dojo.ready(init);
    </script>
</head>
  <body class="nihilo">
    <div id="map"></div>
    <div class="bookmark-container">
      <div id="bookmarks"></div>
    </div>
  </body>
</html>

2.3.5显示效果

2.4InfoWindow

InfoWindow 控件是一个带有小尾巴的窗口，小尾巴指向一个位置或感兴趣的要素，其本质上就是一个 HTML 弹出框，InfoWindow 经常包括 Graphic 的属性信息。如果 Graphic 定义了InfoTemplate，则点击 Graphic 显示 InfoTemplate 所定义的，每个地图仅有一个 InfoWindow，无构造函数。

2.4.1主要方法

方法	说明
hide	隐藏 InfoWindow.
show	显示InfoWindow.
move	移动 infowindow 到屏幕指定位置
resize	重新设置 InfoWindow 的大小，以像素作为单位
setContent	设置 InfoWindow 的内容
setFixedAnchor	设置固定的锚点
setTitle	设置 InfoWindow 的的标题

2.4.2属性

属性	说明
anchor	锚点
coords	锚点的屏幕坐标
fixedAnchor	指定的锚点
isShowing	是否显示

2.4.3事件

事件	说明
onHide	当 InfoWindow 不可见的时候发生
onShow	当 InfoWindow 可见的时候发生

2.4.4代码示例

<!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>InfoWindow </title>
    
<link rel="stylesheet" type="text/css"
          href="http://localhost:81/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:81/arcgis_js_api/library/3.16/3.16/esri/css/esri.css"/>
    <script type="text/javascript" src="http://localhost:81/arcgis_js_api/library/3.16/3.16/init.js"></script>
    <style>
      html, body, #map{
        height: 100%;
        margin: 0;
        padding: 0;
      }

        .esriPopup .titlePane
        {
             background-color: rgba(64,64,64,0.8);
            
        }
        .esriPopup .contentPane
        {
             background-color: rgba(64,64,64,0.8);
             color: #FFFFFF;
        }
        .esriPopup .actionsPane
        {
          background-color: rgba(64,64,64,0.8);
        }
    </style>
    <script>
        var map;
        require([
            "esri/map"
        
        ], function (
            Map
          ) {
             map = new esri.Map("map");
             MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
              ("http://192.168.0.11:50013/iserver/services/map-gzfcmap/arcgisrest/quanguo@SuperMapCloud/MapServer");
              map.addLayer(MyTiledMapServiceLayer);

            map.on("load", function () {
                map.infoWindow.resize(250, 100);
            });

            map.on("click", addPoint);

            function addPoint(evt) {
                var latitude = evt.mapPoint.getLatitude();
                var longitude = evt.mapPoint.getLongitude();
                map.infoWindow.setTitle("Coordinates");
                map.infoWindow.setContent(
                    '<div style="background-color:lightblue;color:white;">' +
                  "lat/lon : " + latitude.toFixed(2) + ", " + longitude.toFixed(2) +
                  "<br>screen x/y : " + evt.screenPoint.x + ", " + evt.screenPoint.y+'</div>'
                );
                map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));
            }
        });
      
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

2.4.5显示效果