直接复制代码使用
<!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;
80%;
height: 90%;
border: 1px solid #000;
top: 0px;
left: 0px;
}
#bookmarks
{
position: absolute;
20%;
height: 50%;
top: 20%;
left: 80%;
border: 1px;
background-color:rgba(000,250,250,0.1);
}
#OverViewDiv
{
position: absolute;
20%;
height: 20%;
top: 0px;
left: 80%;
background-color: Red;
border: 1px;
}
#btn
{
position: absolute;
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; 100%; height: 100%;">
<div id="MyMapDiv">
</div>
<div id="OverViewDiv">
</div>
<div id="measurementDiv"></div>
<div id="bookmarks">
<!--<button id="booksbtn" style=" 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%; 100%;">
</div>
</div>
</body>
</html>
资料获取方式，关注公总号RaoRao1994，查看往期精彩-所有文章，即可获取资源下载链接
更多资源获取，请关注公总号RaoRao1994