直接复制代码使用
<!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