直接復制代碼使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第一個地圖應用</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v33_api/library/3.3/jsapi/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v33_api/library/3.3/jsapi/js/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost/arcgis_js_v33_api/library/3.3/jsapi/init.js"></script>
<script src="dojo/jsapi_vsdoc10_v33.js" type="text/javascript"></script>
<script type="text/javascript" src="script/ajax.js"></script>
<style type="text/css">
#MyMapDiv
{
position: absolute;
width: 80%; height: 90%; border: 1px solid #000; top: 0px; left: 0px; } #bookmarks { position: absolute; width: 20%; height: 50%; top: 20%; left: 80%; border: 1px; background-color:rgba(000,250,250,0.1); } #OverViewDiv { position: absolute; width: 20%; height: 20%; top: 0px; left: 80%; background-color: Red; border: 1px; } #btn { position: absolute; width: 20%; height: 30%; top: 70%; left: 80%; background-color:rgba(0,25,25,0.1); border: 1px; } .btncl { text-align:center; } </style> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.dijit.OverviewMap"); dojo.require("esri.dijit.Scalebar"); dojo.require("esri.dijit.Bookmarks"); dojo.require("esri.layers.FeatureLayer"); dojo.require("dojo.date.locale"); dojo.require("dojo.number"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); dojo.require("esri.dijit.Measurement"); dojo.require("dijit.TitlePane"); dojo.require("dijit.form.CheckBox"); dojo.require("esri.SnappingManager"); //初始化並繪制幾何對象 function Init() { font = new esri.symbol.Font(); font.setSize("10pt"); font.setFamily("微軟雅黑"); //wkid = 4326; wkid = 3857 IsGraphicQuery = false; var startExtent = new esri.geometry.Extent({ "xmin": -99404826.5442801, "ymin": -57677327.4766502 , "xmax":102848773.290696, "ymax":48038123.0479141, "spatialReference": { "wkid": wkid } }); Map = new esri.Map("MyMapDiv", { extent: startExtent }); MapServer = "http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"; var layer = new esri.layers.ArcGISTiledMapServiceLayer(MapServer); //var layer = new esri.layers.ArcGISImageServiceLayer(MapServer); Map.addLayer(layer); GraphicDrawLayer = new esri.layers.GraphicsLayer(); //創建圖層 Map.addLayer(GraphicDrawLayer); //測量1 // function initToolbar(mymap) { // var measurement = new esri.dijit.Measurement({ // map: mymap // }, dojo.byId('bookmarks')); // measurement.startup(); // } // dojo.connect(Map, 'onLoad', function (Map) { // initToolbar(Map); // }); //測量2 ctrl捕捉 var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([195, 176, 23]), 2), null); //需要捕捉的圖層 var parcelsLayer = new esri.layers.FeatureLayer(MapServer+"/1", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); parcelsLayer.setRenderer(new esri.renderer.SimpleRenderer(sfs)); dojo.connect(Map, "onLoad", function (Map) { //dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac. var snapManager = Map.enableSnapping({ snapKey: dojo.keys.copyKey }); var layerInfos = [{ layer: parcelsLayer}]; snapManager.setLayerInfos(layerInfos); var measurement = new esri.dijit.Measurement({ map: Map }, dojo.byId('bookmarks')); measurement.startup(); }); //顯示鷹眼 dojo.connect(Map, "onLoad", function (Map) { var MapViewer = new esri.dijit.OverviewMap({ map: Map, color: "#293955", //顯示透明框的顏色參數 expandFactor: 2//顯示透明框的大小參數 }, dojo.byId("OverViewDiv")); MapViewer.startup(); }); //顯示比例尺 dojo.connect(Map, 'onLoad', function (Map) { var scalebars = new esri.dijit.Scalebar({ map: Map, scalebarUnit: "metric" }); // 指定比例尺單位,有效值是"english"(mi) or "metric"(km).默認"english" }); //移動鼠標顯示鼠標坐標 function showCoordinates(evt) { var mp = evt.mapPoint; var screenPt = Map.toScreen(mp); var str = "<p style=\"display:block\">" + "屏幕坐標(x,y):" + "(" + screenPt.x + "," + screenPt.y + ")" + "</p>"; dojo.byId("context").innerHTML = str + "地圖坐標(x,y):" + "(" + mp.x + ", " + mp.y + ")"; } dojo.connect(Map, 'onMouseMove', showCoordinates); ToolBar = new esri.toolbars.Draw(Map); //使用toolbar上的繪圖工具 //點符號 PointSymbol = new esri.symbol.SimpleMarkerSymbol(); PointSymbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE; PointSymbol.setSize(12); PointSymbol.setColor(new dojo.Color("#FFFFCC")); //線符號 PolyLineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3); //面符號 PolygonSymbol = new esri.symbol.SimpleFillSymbol( esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 1), new dojo.Color([255, 255, 0, 0.25]) ); dojo.connect(Map, 'onLoad', function (Map) { dojo.connect(ToolBar, "onDrawEnd", function (geometry) { if (geometry.type == "polygon") { ToolBar.deactivate(); var graphicPolygon = new esri.Graphic(geometry, PolygonSymbol); Map.graphics.add(graphicPolygon); } if (geometry.type === "point") { ToolBar.deactivate(); var graphicpoint = new esri.Graphic(geometry, PointSymbol); Map.graphics.add(graphicpoint); //用默認的圖層添加 } if (geometry.type === "polyline") { ToolBar.deactivate(); var graphicpolyline = new esri.Graphic(geometry, PolyLineSymbol); Map.graphics.add(graphicpolyline); GraphicDrawLayer.add(graphicpolyline); //使用自己創建的圖層添加 } }); dojo.connect(dijit.byId('MyMapDiv'), 'resize', MapResize); }); } //繪圖 //以上注釋都了 function DrawPolygonGraphic() { ToolBar.activate(esri.toolbars.Draw.POLYGON); } function DrawPolylineGraphic() { ToolBar.activate(esri.toolbars.Draw.POLYLINE); } function DrawPointGraphic() { ToolBar.activate(esri.toolbars.Draw.POINT); } // 繪制結束 dojo.ready(Init); </script> </head> <body class="tundra"> <div id="view" style="position: absolute; width: 100%; height: 100%;"> <div id="MyMapDiv"> </div> <div id="OverViewDiv"> </div> <div id="measurementDiv"></div> <div id="bookmarks"> <!--<button id="booksbtn" style="width: 50px; height: 50px;" onclick="addBook()"> 添加標簽</button>--> </div> <div id="btn"> <button class="btncl" onclick="DrawPointGraphic()">創建點</button> <button class="btncl" onclick="DrawPolylineGraphic()">創建線</button> <button class="btncl" onclick="DrawPolygonGraphic()">創建面</button> </div> <div id="context" style="height:50px; position: absolute; top: 88%; width: 100%;"> </div> </div> </body> </html>
資料獲取方式，關注公總號RaoRao1994，查看往期精彩-所有文章，即可獲取資源下載鏈接
更多資源獲取，請關注公總號RaoRao1994