WebGIS学习之路——ArcGIS For JavaScript(一) 地图的显示和地图控件的使用

1.什么是WebGIS？

   基于地图开发的web应用程序都可以称之为WebGIS；国土管
理、城市规划、交通运输等几乎所有领域都有应用GIS功能，当然百度地图、
高德地图、腾讯地图等都是典型代表。
WebGIS的功能:
(⑴)地理信息的可视化展示
(⑵)地理信息的空间查询、检索
(⑶)地理信息空间分析
(⑷)互联网上资源的共享

1.1 ArcGIS For JavaScript的简介

ESRI根据JavaScript技术实现的调用ArcGIS Server REST API接口的一组脚本。当前的最新版本是Version 4.8。通过ArcGIS API for JavaScript可以将ArcGIS Server提供的地图资源和其它资源(ArcGIS Online)嵌入到Web应用中。我们实现的WebGIS功能都是通过该API实现。

1.2 基于ArcGis的WebGIS技术框架

2.ArcGIS For JS

2.1 我的第一个webgis程序，地图的加载

首先创建使用require加载arcgis相应的代码模块，我们加载地图需要用到 "esri/map"

require([`"esri/map"],function(Map){
  //新建一个map对象
  var map = new Map("mapdiv",{
  	center: [116.403119,39.915599], //地图中心点
  	zoom:2, //缩放级别
  	basemap: "streets"  //底图，这里使用arcgis提供的其中之一
  })
})

第一个参数mapdiv是装地图的div的id值。

全部代码如下：

在浏览器中预览

光秃秃的地图是不是有点不好看，下面来添加一下小控件

2.2 地图基本控件的添加

地图控件用到的模块基本都在dijit中

                    "esri/dijit/Scalebar",    //比例尺
                    "esri/dijit/OverviewMap", // 鹰眼图
                    "esri/dijit/BasemapGallery",//画廊
                    "esri/dijit/BasemapToggle",  //地图切换器
                    "esri/dijit/Legend",  // 图例
                    "esri/dijit/Measurement",//测量
                    "esri/layers/ArcGISDynamicMapServiceLayer"

下面以鹰眼图来举例用法

var overviewMap = new OverviewMap({
 map:map,
 attachTo: "bottom-right"   //这个属性为鹰眼图所在的位置，此时为右下角
 color:" #D84E13"
})；
  overviewMap.startup();

效果如图：

比例尺代码：

 //比例尺
                    var scalebar=new Scalebar({
                        map:map,
                        attachTo:'bottom-left',
                        scalebarStyle:'line',  //line 风格
                        scalebarUnit:'metric'  // english,dual  单位
                    });
                   scalebar.startup() 

/