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










相关文章
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
751 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
1032 11
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
325 10
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
292 8
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
428 12
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
282 5

热门文章

最新文章