首页 > 代码库 > ArcGIS API for JS的一般编码习惯
ArcGIS API for JS的一般编码习惯
1、引用claro.css和esri.css
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
2、页面布局
<body class="claro"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:‘true‘, design:‘sidebar‘" style="width:100%;height:100%;"> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:‘center‘"> </div> <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:‘left‘"> <div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div> <button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.LINE);app.map.hideZoomSlider();">Line</button> <button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.POLYLINE);app.map.hideZoomSlider();">Polyline</button> <button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);app.map.hideZoomSlider();">Freehand Polyline</button> <br /> <button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.POLYGON);app.map.hideZoomSlider();">Polygon</button> <button data-dojo-type="dijit.form.Button" onclick="app.tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);app.map.hideZoomSlider();">Freehand Polygon</button> <br /><hr /> <div><b>Buffer Parameters</b></div> Spatial Reference WKID: <input type="text" id="bufferSpatialReference" size="5" value="http://www.mamicode.com/32612" /><br /> Distance: <input type="text" id="distance" size="5" value="http://www.mamicode.com/25" /> <select id="unit" style="width:100px;"> <option value="http://www.mamicode.com/UNIT_STATUTE_MILE">Miles</option> <option value="http://www.mamicode.com/UNIT_FOOT">Feet</option> <option value="http://www.mamicode.com/UNIT_KILOMETER">Kilometers</option> <option value="http://www.mamicode.com/UNIT_METER">Meters</option> <option value="http://www.mamicode.com/UNIT_NAUTICAL_MILE">Nautical Miles</option> <option value="http://www.mamicode.com/UNIT_US_NAUTICAL_MILE">US Nautical Miles</option> <option value="http://www.mamicode.com/UNIT_DEGREE">Degrees</option> </select><br /> <button data-dojo-type="dijit.form.Button" type="button" onclick="app.map.graphics.clear();">Clear Graphics</button> </div> </div> </body>
3、页面样式
<style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; } #leftPane{ color:#000; width:250px; padding-bottom:15px; } #map{ padding:0; } .details{ font-size:14px; font-weight:600; padding-bottom:20px; } </style>4、页面加载响应处理
<script src="http://js.arcgis.com/3.10/"></script> <script> require(["dojo/dom", "dojo/dom-attr", "dojo/_base/array", "esri/Color", "dojo/parser", "esri/config", "esri/map", "esri/graphic", "esri/tasks/GeometryService", "esri/tasks/BufferParameters", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"], function (dom, domAttr, array, Color, parser, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) { var map, gsvc, tb; parser.parse(); map = new Map("map", { basemap: "streets", center: [-111.5, 39.541], zoom: 7 }); map.on("load", initToolbar); gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); esriConfig.defaults.io.proxyUrl = "/proxy"; esriConfig.defaults.io.alwaysUseProxy = false; //该方法初始化App类 function initToolbar(evtObj) { app.tb = new Draw(evtObj.map); app.tb.on("draw-end", doBuffer); } function doBuffer(evtObj) { var geometry = evtObj.geometry, map = app.map, gsvc = app.gsvc; switch (geometry.type) { case "point": var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25])); break; case "polyline": var symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1); break; case "polygon": var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])); break; } var graphic = new Graphic(geometry, symbol); map.graphics.add(graphic); //setup the buffer parameters var params = new BufferParameters(); params.distances = [dom.byId("distance").value]; params.bufferSpatialReference = new esri.SpatialReference({ wkid: dom.byId("bufferSpatialReference").value }); params.outSpatialReference = map.spatialReference; params.unit = GeometryService[dom.byId("unit").value]; if (geometry.type === "polygon") { //if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct. gsvc.simplify([geometry], function (geometries) { params.geometries = geometries; gsvc.buffer(params, showBuffer); }); } else { params.geometries = [geometry]; gsvc.buffer(params, showBuffer); } } function showBuffer(bufferedGeometries) { var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0, 0.65]), 2 ), new Color([255, 0, 0, 0.35]) ); array.forEach(bufferedGeometries, function (geometry) { var graphic = new Graphic(geometry, symbol); app.map.graphics.add(graphic); }); app.tb.deactivate(); app.map.showZoomSlider(); } //这相当于C#里面的类的概念，用于存储临时使用的值 app = { map: map, tb: tb, gsvc: gsvc }; }); </script>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。