学习ArcGIS API for JavaScript（1）

最新推荐文章于 2024-01-28 20:31:37 发布

xyscat

最新推荐文章于 2024-01-28 20:31:37 发布

阅读量284

点赞数 1

分类专栏： webgis 文章标签： webgis

本文链接：https://blog.csdn.net/xyscat_2017/article/details/78516318

版权

webgis 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通过 ArcGIS API for JavaScript 来构建 WebGIS 应用。

引用库文件

我们使用 ArcGIS API for JavaScript库来构建Web地图，那么引入其文件是必须的。同其他框架库一样，我们是需要引入css、js文件。

<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<script src="http://js.arcgis.com/3.7/"></script>

创建初始js代码

通过require()函数导入资源：ersi/map是需要使用资源，dojo/domReady!是dojo中确保DOM可用的插件，还有一个匿名函数。

<script>
    require(["esri/map", "dojo/domReady!"], function(Map) {
        //……
    });
</script>

创建地图

前面通过require函数引入了esri/map资源模块，意味着可以使用其中的Map类来创建一个Map对象。通过Map对象的构造函数来创建一个地图实例，构造函数接受两个参数，第一个是页面承载地图的div容器的ID值（设置为map）；第二个是设置地图的键值对，它被设置为一个JSON对象。

basemap定义地图的内容，如streets、topo、gray、oceans；zoom定义地图的初始缩放级别，minZoom、maxZoom定义最小、最大缩放等级；center定义初始显示地图的中心点，其值为经纬度坐标值。

首先定义全局的变量map，然后再匿名函数中通过Map构造函数定义map对象。

<script>
    var map;
    require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map",{
            basemap: "topo",
            center: [-122.45,37.75],
            zoom: 13,
            sliderStyle: "small"
        });
    });
</script>

创建地图容器

在HTML中定义一个div元素，并设置其ID属性map。然后为body元素定义一个类属性，为了配合引入的dojo的样式表，设置为claro。

<body class="claro">
    <div id="map"></div>
</body>

页面样式

在地图已经加载如页面后，还可以简单设置其显示样式，使其居中适应整个浏览器页面。

<style>
    html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }    
</style>

完整代码

在浏览器看到地图效果，它仅仅加载了一个底图图层，你可以实现缩放和拖动功能。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>a map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }    
    </style>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      var map;
      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "gray",
          center: [-122.45,37.75],
          zoom: 13,
          sliderStyle: "small"
        });
      });
    </script>
</head>
<body class="claro">
    <div id="map"></div>
</body>
</html>