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值。
全部代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>调用地图服务</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
<script src="https://js.arcgis.com/3.25/"></script>
<script>
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/toolbars/navigation"
], function(
Map,
ArcGISDynamicMapServiceLayer,
ArcGISTiledMapServiceLayer,
Extent,
SpatialReference,
navigation
) {
var map = new Map("mapdiv", {
center: [116.403119,39.915599],
zoom:2,
basemap: "streets" //satellite、streets、oceans
});
var navooltar = new navigation()
});
</script>
</head>
<body>
<div id='mapdiv'>
</div>
</body>
</html>
在浏览器中预览
光秃秃的地图是不是有点不好看,下面来添加一下小控件
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()
/