ArcGIS JavaScript API 实现基本的地图功能

简介:

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
     <title>创建一幅地图</title>
     <meta http-equiv= "Content-Type"  content= "text/html; charset=utf-8" >
     <meta name= "viewport"  content= "initial-scale=1, maximum-scale=1,user-scalable=no" >
     <link rel= "stylesheet"  href= "http://127.0.0.1:8080/jsapi/3.11/dijit/themes/soria/soria.css" >
     <link rel= "stylesheet"  href= "http://127.0.0.1:8080/jsapi/3.11/esri/css/esri.css" >
     <style>
         html, body, #mapDiv{
             padding:  0 ;
             margin:  0 ;
             height:  100 %;
         }
     </style>
     <script src= "http://127.0.0.1:8080/jsapi/3.11/init.js" ></script>
     <script type= "application/javascript"  src= "jsapi_vsdoc10_v38.js" ></script>
     <script>
         var  map,lods,fullExtent,tiledMapServiceLayer;
         require([ "esri/map" "esri/geometry/Extent" "esri/layers/ArcGISTiledMapServiceLayer" "dojo/domReady!" ],  function (Map, Extent, ArcGISTiledMapServiceLayer) {
             lods = [
                 { "level" 0 "resolution" 0.028553532069963364 "scale" 12000000 },
                 { "level" 1 "resolution" 0.01903568804664224 "scale" 8000000 },
                 { "level" 2 "resolution" 0.00951784402332112 "scale" 4000000 },
                 { "level" 3 "resolution" 0.00475892201166056 "scale" 2000000 },
                 { "level" 4 "resolution" 0.00237946100583028 "scale" 1000000 },
                 { "level" 5 "resolution" 0.00118973050291514 "scale" 500000 },
                 { "level" 6 "resolution" 5 .9486525145757E- 4 "scale" 250000 },
                 { "level" 7 "resolution" 2 .3794610058302802E- 4 "scale" 100000 },
                 { "level" 8 "resolution" :   1 .1897305029151401E- 4 "scale" 50000 },
                 { "level" 9 "resolution" 5 .9486525145757005E- 5 "scale" 25000 },
                 { "level" 10 "resolution" 2 .3794610058302804E- 5 "scale" 10000 },
                 { "level" 11 "resolution" 1 .1897305029151402E- 5 "scale" 5000 },
                 { "level" 12 "resolution" 4 .75892201166056E- 6 "scale" 2000 }
             ];
             fullExtent =  new  Extent({
                 "xmin" 73.441277 "ymin" 34.334934 "xmax" 96.388373 "ymax" 49.178574 ,
                 "spatialReference" : { "wkid" 4326 }
             });
             map =  new  Map( "mapDiv" , {
                 extent: fullExtent,
                 lods: lods,
                 slider: true ,
                 sliderStyle: "large" ,
                 //sliderPosition:"top-left",
                 zoom:  0 ,
                 logo: false
             });
             tiledMapServiceLayer =  new  ArcGISTiledMapServiceLayer( "http://10.238.208.34/arcgis/rest/services/BaseMap/XjOnline/MapServer" );
             map.addLayer(tiledMapServiceLayer);
         });
     </script>
</head>
<body  class = "soria" >
<div id= "mapDiv" ></div>
</body>
</html>

输出结果:

wKioL1Rkc4mhCeXDAAMZwOgKzgw581.jpg

说明:可以为map对象设置<String[]> sliderLabels属性显示滑动条文字说明。







     本文转自stock0991 51CTO博客,原文链接:http://blog.51cto.com/qing0991/1576164,如需转载请自行联系原作者










相关文章
|
13天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
13天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
1月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
1月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
100 0
|
1月前
|
API
egg.js 24.2写第一个api接口
egg.js 24.2写第一个api接口
71 0
|
6天前
|
JavaScript 安全 前端开发
|
12天前
|
JavaScript 前端开发
如何用JS实现选项卡功能
如何用JS实现选项卡功能
13 0
|
13天前
|
存储 前端开发 JavaScript
使用JavaScript实现复杂功能——一个交互式音乐播放器
使用JavaScript实现复杂功能——一个交互式音乐播放器
|
13天前
|
存储 JavaScript 前端开发
JavaScript复杂功能实现:实时数据可视化图表
JavaScript复杂功能实现:实时数据可视化图表
|
20天前
|
JavaScript 前端开发
JavaScript数组的功能内置类型
数组是JavaScript的内置类型,JavaScript数组的功能特别强大。下面简单介绍一下JavaScript数组。