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










相关文章
|
存储 缓存 API
实现电商物流API的实时追踪功能
在电商时代,实时物流追踪已成为提升用户体验的核心功能。本文详解如何通过物流API实现包裹位置追踪、ETA计算及数据优化,涵盖API集成、后端处理、前端展示与性能调优,助力构建高效可靠的追踪系统,提升用户信任与满意度。
|
消息中间件 缓存 监控
电商API接口功能全景图:商品、订单、支付、物流如何无缝衔接?
在数字化商业中,API已成为电商核心神经系统。本文详解商品、订单、支付与物流四大模块的API功能,探讨其如何协同构建高效电商闭环,并展望未来技术趋势。
|
10月前
|
缓存 数据可视化 定位技术
快递鸟快递API技术指南:获取物流轨迹信息与轨迹地图的解决方案
在当今电商竞争激烈的环境中,物流体验已成为提升用户满意度的关键因素。研究表明,超过 75% 的消费者会因物流信息不透明而放弃下单。
2125 1
|
11月前
|
SQL 运维 关系型数据库
【产品升级】Dataphin V5.0版本发布:助力出海业务、增全量一体集成、异步调用API等更多功能等你发现
Dataphin是瓴羊推出的智能数据建设与治理平台,基于阿里巴巴内部实践,提供一站式数据建设与治理能力。V5.0版本研发新增支持Databricks作为离线计算引擎、支持MySQL数据库一键增全量同步、支持管理Hudi、Delta Lake表等;资产运营与消费持续提效,支持批量编辑目录名称及描述、Quick BI仪表板的上架管理等功能,增加资产可用性与盘点效率。
505 8
|
11月前
|
存储 数据可视化 Java
Java Stream API 的强大功能
Java Stream API 是 Java 8 引入的重要特性,它改变了集合数据的处理方式。通过声明式语法,开发者可以更简洁地进行过滤、映射、聚合等操作。Stream API 支持惰性求值和并行处理,提升了代码效率和可读性,是现代 Java 开发不可或缺的工具。
220 0
Java Stream API 的强大功能
|
12月前
|
供应链 API 数据安全/隐私保护
电商API数据接口的核心功能
电商API数据接口是电商平台与外部系统通信的核心工具,具备订单管理、库存同步和电子面单获取三大功能。它实现订单信息实时同步、多平台整合与状态更新,提升商家运营效率;通过库存数据双向同步,避免超卖并优化库存成本;同时自动获取电子面单号,加快发货流程。电商API在提升交易效率与用户体验方面具有重要作用。
|
Java API
Java API中Math类功能全景扫描
在实际使用时,这些方法的精确度和性能得到了良好的优化。当处理复杂数学运算或高精度计算时,`Math`类通常是足够的。然而,对于非常精细或特殊的数学运算,可能需要考虑使用 `java.math`包中的 `BigDecimal`类或其他专业的数学库。
283 11
Dataphin功能Tips系列(58)- 支持OAuth2.0认证方式的API数据源
在数据集成过程中,Dataphin需通过API从外部系统获取数据,而这些系统常采用动态令牌鉴权机制。本文介绍如何在Dataphin中配置支持OAuth 2.0认证的API数据源,实现自动获取和刷新访问令牌,确保安全高效地进行数据请求与集成。
332 8
|
Ubuntu API
在Ubuntu上利用SANE API实现跨平台扫描功能的指南
跨平台扫描功能的实现,在Ubuntu上表演起来,只需要SANE这个神奇魔杖,加上一系列施法步骤,每个命令都像是进行咒语施法,只需轻松点击按键,即可驱动扫描仪进行各种跃动。别忘了,这只是开始,在扫描的舞台上,还有许多舞步等待你去开发和探索。
533 14