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,如需转载请自行联系原作者










相关文章
|
2月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
35 0
|
16天前
|
存储 缓存 安全
API在Visual Basic中的应用:连接外部服务与扩展功能
【4月更文挑战第27天】本文探讨了在Visual Basic中使用API连接外部服务和扩展功能的方法,涵盖了API的基本概念、种类及如何使用本地和Web API。通过DllImport调用本地API,利用HttpClient和WebClient与Web API交互,同时强调了第三方API的使用和SOA架构中的API角色。安全性、性能优化和错误处理是实践中的关键点。案例研究和最佳实践有助于开发者更有效地利用API,提升Visual Basic应用程序的功能和灵活性。随着API技术的发展,Visual Basic将持续支持开发者创造更强大的应用。
|
13天前
|
缓存 监控 JavaScript
Node.js中构建RESTful API的最佳实践
【4月更文挑战第30天】本文介绍了在Node.js中构建RESTful API的最佳实践:选择合适的框架(如Express、Koa)、设计清晰的API接口(遵循HTTP动词和资源路径)、实现认证授权(JWT、OAuth 2.0)、错误处理、限流缓存、编写文档和测试,以及监控性能优化。这些实践有助于创建健壮、可维护和易用的API。
|
13天前
|
JavaScript API 开发者
深入了解Node.js的文件系统:Node.js文件系统API的使用与探索
【4月更文挑战第30天】本文深入探讨了Node.js的文件系统API,介绍了如何引入`fs`模块进行文件操作。内容包括异步读取和写入文件、删除文件、创建目录以及使用文件流进行高效操作。此外,还提到了文件系统的监视功能,帮助开发者全面掌握在Node.js中处理文件和目录的方法。
|
14天前
|
SQL 数据管理 API
数据管理DMS产品使用合集之阿里云DMS提供API接口来进行数据导出功能吗
阿里云数据管理DMS提供了全面的数据管理、数据库运维、数据安全、数据迁移与同步等功能,助力企业高效、安全地进行数据库管理和运维工作。以下是DMS产品使用合集的详细介绍。
|
26天前
|
JavaScript API
Vue3 API函数及功能
Vue3 API函数及功能
8 0
|
26天前
|
JavaScript API
Node.js API实例讲解——FS 文件夹操作
Node.js API实例讲解——FS 文件夹操作
32 0
|
1月前
|
JavaScript 前端开发 API
如何利用Python的Flask框架与Vue.js创建RESTful API服务
【4月更文挑战第10天】本文介绍了如何使用Flask和Vue.js创建一个前后端分离的RESTful API服务。Flask作为后端框架,负责提供CRUD操作,与SQLite数据库交互;Vue.js作为前端框架,构建用户界面并利用axios库与后端API通信。通过示例代码,展示了Flask设置路由处理用户数据以及Vue组件如何调用API获取和操作数据。此基础结构为构建更复杂的Web应用提供了起点。
|
1月前
|
存储 SQL JavaScript
js常见的存储API以及应用场景?使用方式,各个优缺点?
【4月更文挑战第4天】JavaScript存储API包括`localStorage`、`sessionStorage`、`cookies`、`IndexedDB`和弃用的`Web SQL`。`localStorage`和`sessionStorage`用于页面数据存储,前者持久化,后者限当前会话。`cookies`适用于会话管理,但存储空间有限。`IndexedDB`适合大量结构化数据存储和查询。废弃的`Web SQL`曾提供关系型数据库功能。选择时需考虑数据性质、存储需求、安全性和兼容性。
26 2
|
2月前
|
机器学习/深度学习 前端开发 API
实现以图搜货功能,淘宝API开发实战分享
实现以图搜货功能,淘宝API开发实战分享
30 0