《JavaScript构建Web和ArcGISServer应用实战》源代码_构建基因组文库的步骤资源-CSDN下载

共17个文件

html：12个

htm：3个

jpg：1个

WebGIS源代码

5星 · 超过95%的资源需积分: 50 201 浏览量 2016-08-01 13:24:42 上传评论 9 收藏 141KB RAR 举报

《JavaScript构建Web和ArcGIS Server应用实战》是一本深度探讨如何使用JavaScript开发Web GIS应用程序的专业书籍。这本书籍的源代码提供了丰富的示例和实践项目，帮助读者深入理解JavaScript在Web GIS开发中的应用。 WebGIS（Web地理信息系统）是将地理信息与Web技术相结合的产物，它使得地理数据可以通过互联网进行访问、分享和交互。JavaScript作为浏览器端最常用的编程语言，被广泛用于构建WebGIS应用，因为其具有良好的跨平台性、易学性和丰富的库支持。在这本书的源代码中，我们可以找到以下几个关键的知识点： 1. **ArcGIS API for JavaScript**：ArcGIS Server是Esri公司提供的地理信息服务平台，而ArcGIS API for JavaScript是其提供的客户端开发库，允许开发者用JavaScript构建地图应用。通过学习这些源代码，读者可以了解到如何初始化地图、添加图层、实现地图交互、查询和分析地理数据等。 2. **地图服务与图层管理**：源代码中可能包含了多种地图服务的使用，如Tiled Map Service（瓦片地图服务）、Dynamic Map Service（动态地图服务）和Feature Layer（要素图层）。这涉及到如何加载服务，如何操作图层的可见性、透明度等属性。 3. **地理编码与反向地理编码**：地理编码是将地址转换为地理位置的过程，反向地理编码则相反。源代码可能包含了使用ArcGIS API for JavaScript进行这两种操作的方法。 4. **图层叠加与符号系统**：在WebGIS应用中，经常需要将不同类型的图层叠加在一起，展示丰富的地理信息。源代码会展示如何定义和应用不同的符号系统，包括点、线、面的样式，以及如何自定义符号。 5. **交互式地图功能**：比如缩放、平移、测量距离和面积、图层控制面板、信息弹窗（InfoWindow）等。这些功能的实现涉及事件监听、DOM操作和用户交互设计。 6. **查询与分析**：源代码可能包含对地图上的特定对象进行查询、筛选、统计和空间分析的示例，这些都是WebGIS应用的核心功能。 7. **服务端与客户端的交互**：由于ArcGIS Server通常用于处理复杂的数据和计算，客户端可能需要与服务器进行数据交换。这部分源码可能会展示如何使用Ajax或Fetch API进行异步请求，获取服务端数据并更新地图。 8. **响应式设计与移动GIS**：现代WebGIS应用需要适应不同设备的屏幕尺寸。源代码可能包含响应式布局的设计，确保应用在桌面和移动设备上都能良好运行。通过深入研究这些源代码，读者不仅可以学习到JavaScript的基本语法和面向对象编程，还能掌握WebGIS应用开发的技巧和最佳实践，提升在实际项目中的应用能力。这些源代码实例对于想要在WebGIS领域深入发展的程序员来说，是一份宝贵的参考资料。

资源推荐

资源详情

资源评论

收起资源包目录

JavaScript构建Web和ArcGIS Server应用实战书籍配套代码.rar （17个子文件）

JavaScript构建Web和ArcGIS Server应用实战书籍配套代码

Chapter 11

arcgisdotcom.html 2KB

Chapter 9

routing.html 3KB

Chapter 12

mobile_map.html 1KB

mobile_map_solution.html 2KB

geolocation.html 2KB

Chapter 5

geocoding_widget.html 1KB

Chapter 8

geocode_begin.htm 3KB

geocode_end.html 6KB

Chapter 3

graphicexercise.html 3KB

Appendix

layout

index.html 4KB

images

banner.jpg 119KB

css

layout.css 1KB

Chapter 6

spatialquery.html 2KB

Chapter 10

drivetimes.htm 4KB

Chapter 4

featurelayer.htm 3KB

Chapter 7

identify.html 4KB

Chapter 2

basic_map.html 1KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Find Address</title> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; border:solid 1px #343642; margin:5px 5px 5px 0px; } #leftPane{ width:20%; border-top: solid 1px #343642; border-left: solid 1px #343642; border-bottom: solid 1px #343642; margin:5px 0px 5px 5px; color: #343642; font:100% Georgia,"Times New Roman",Times,serif; /*letter-spacing: 0.05em;*/ } </style> <script src="http://js.arcgis.com/3.7/"></script> <script> var map, locator; require([ "esri/map", "esri/tasks/locator", "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/Font", "esri/symbols/TextSymbol", "dojo/_base/array", "dojo/_base/Color", "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry","dijit/form/Button", "dijit/form/Textarea", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, Locator, Graphic, InfoTemplate, SimpleMarkerSymbol, Font, TextSymbol, arrayUtils, Color, number, parser, dom, registry ) { parser.parse(); map = new Map("map", { basemap: "streets", center: [-93.5, 41.431], zoom: 5 }); locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"); locator.on("address-to-locations-complete", showResults); registry.byId("locate").on("click", locate); map.infoWindow.resize(200,125); function locate() { map.graphics.clear(); var address = { "SingleLine": dom.byId("address").value }; locator.outSpatialReference = map.spatialReference; var options = { address: address, outFields: ["Loc_name"] } locator.addressToLocations(options); } function showResults(evt) { var candidate; var symbol = new SimpleMarkerSymbol(); var infoTemplate = new InfoTemplate( "Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}" ); symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE); symbol.setColor(new Color([153,0,51,0.75])); var geom; arrayUtils.every(evt.addresses, function(candidate) { //console.log(candidate.score); if (candidate.score > 80) { //console.log(candidate.location); var attributes = { address: candidate.address, score: candidate.score, locatorName: candidate.attributes.Loc_name }; geom = candidate.location; var graphic = new Graphic(geom, symbol, attributes, infoTemplate); //add a graphic to the map at the geocoded location map.graphics.add(graphic); //add a text symbol to the map listing the location of the matched address. var displayText = candidate.address; var font = new Font( "16pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Helvetica" ); var textSymbol = new TextSymbol( displayText, font, new Color("#666633") ); textSymbol.setOffset(0,8); map.graphics.add(new Graphic(geom, textSymbol)); return false; //break out of loop after one candidate with score greater than 80 is found. } }); if ( geom !== undefined ) { map.centerAndZoom(geom, 12); } } }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:false" style="width:100%; height:100%;"> <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"> Enter an address then click the locate button to use a sample address locator to return the location for street addresses in the United States. <br> <textarea type="text" id="address"/>380 New York St, Redlands</textArea> <br> <button id="locate" data-dojo-type="dijit/form/Button">Locate</button> </div> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> </div> </div> </body> </html>

评论收藏

内容反馈