使用the ArcGIS API for JavaScript创建程序

最新推荐文章于 2022-07-09 13:58:52 发布

yyhm

最新推荐文章于 2022-07-09 13:58:52 发布

阅读量3.3k

点赞数 1

分类专栏： GIS/Arcgis Api for Javascript 文章标签： javascript api html dojo 脚本 div

GIS/Arcgis Api for Javascript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1. 引用 ArcGIS API for JavaScript

在使用ArcGIS API for JavaScript前，首先要在HTML页面的HEAD部分增加以下脚本和风格标签。

[html] view plain copy

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7" type="text/javascript"></script>
lt;link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" >

以上脚本引用指向ArcGIS Server的 JavaScript API文件，若发布了API新版本，则更新相应的版本号即可。
引用的页面风格为Dijit主题。ArcGIS提供了四种主题：claro, tundra, soria and nihilo。若想跟换主题，只需变换主题名称如tundra。

[html] view plain copy

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/tundra/tundra.css">

2.定义初始化功能

在页面中，增加新的script标签，实现地图加载与相关操作。首先使用dojo.require加载必需的模块。Dojo是以JavaScipt实现的一个开源的DTML工具。

[html] view plain copy

<script type="text/javascript">
  dojo.require("esri.map");
</script>

接着，利用dojo.addOnLoad使得一旦加载HTML即可执行初始化功能。该功能以init命名，用以加载底图数据。这里采用ArcGIS.com网站提供的底图。

  
  
   
   
    
    
     
     [html] 
     
     view plain
     
     copy
     
     
    
    
   
   
   
   <script type="text/javascript">  
  dojo.require("esri.map");  
  
  function init() {   
    //code to create the map and add a basemap will go here    
  }   
  dojo.addOnLoad(init);  
  </script>

3. 创建地图

利用esri.Map可以创建新的地图，以下代码中的mapDiv为DIV元素的值。

 
  
  
   
   
    
    
     
     [html] 
     
     view plain
     
     copy
     
     
      
      
     
     
    
    
   
   
   
   var map;  
  
 function init() {  
   map = new esri.Map("mapDiv");  
 }  
 dojo.addOnLoad(init);

创建地图时，你可以定义其他参数，如初始化范围、激活平移按钮、禁用缩放杆等。详情参考Map类。

4. 增加底图

现在可以给地图中添加一些数据了。这里将加载 World Street Map的地图服务为底图。该图为有缓存的地图服务，其瓦片存储于缓存中，而非动态渲染。要加载有缓存的地图服务，需要使用ArcGISTiledMapServiceLayer 类。创建图层后，通过map的addLayer方法加载底图。

[html] view plain copy

function init() {
   map = new esri.Map("mapDiv");


   var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
   var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
   map.addLayer(basemap);

5. 定义页面内容

这里你将定义HTML页面的BODY部分。该部分包含将被显示的所有内容，这里主要是地图。这里mapDiv指向Map构造函数中指定的变量集。注意，carlo类也包含在DIV中。如果要采用其他的主题，则用其他主题名需要替换carlo。

[html] view plain copy

<body class="claro">
  <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>

yyhm

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用the ArcGIS API for JavaScript创建程序

1. 引用 ArcGIS API for JavaScript 在使用ArcGIS API for JavaScript前，首先要在HTML页面的HEAD部分增加以下脚本和风格标签。[html] view plaincopyscript src="http://serverapi.arcgisonline.com/
复制链接

扫一扫