<!DOCTYPE html>
|
<html xmlns:th="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta charset="utf-8"/>
|
<link rel="stylesheet" type="text/css" th:href="@{${pubzyWebRoot} + 'arcgis_js_api/library/3.18/3.18/dijit/themes/tundra/tundra.css'}"/>
|
<link rel="stylesheet" type="text/css" th:href="@{${pubzyWebRoot} + 'arcgis_js_api/library/3.18/3.18/esri/css/esri.css'}"/>
|
<style type="text/css">
|
body {
|
margin: 0px;
|
}
|
|
.MapClass {
|
width: 100%;
|
height: 100%;
|
}
|
|
#toolDiv input {
|
border: none;
|
background-color: dodgerblue;
|
color: white;
|
padding: 5px 10px;
|
margin-bottom: 5px;
|
width: 46px;
|
}
|
</style>
|
<script th:inline="javascript">
|
/*<![CDATA[*/
|
var pubzyWebRoot = [[${pubzyWebRoot}]];
|
var firstDrawType = [[${drawType}]];
|
var callbackFun = [[${callbackFun}]];
|
var obtainExtentMapUrl = [[${obtainExtentMapUrl}]];
|
/*]]>*/
|
var dojoConfig = {
|
api_url: pubzyWebRoot + "arcgis_js_api/library/3.18/3.18",
|
async: false,
|
isDebug: true,
|
parseOnLoad: true,
|
mblHideAddressBar: false
|
};
|
</script>
|
<script type="text/javascript" th:src="@{${pubzyWebRoot} + 'arcgis_js_api/library/3.18/3.18/init.js'}"></script>
|
<script type="text/javascript">
|
var map;
|
dojo.require("esri.map");
|
dojo.require("esri.dijit.OverviewMap"); //鹰眼图引用
|
dojo.require("esri.dijit.Scalebar"); //比例尺引用
|
dojo.require("esri.dijit.Bookmarks"); //书签引用
|
dojo.require("esri.dijit.Legend"); //图例引用
|
dojo.require("esri/layers/FeatureLayer"); //
|
dojo.require("esri/toolbars/draw"); //绘图工具
|
dojo.require("esri/toolbars/edit"); //绘图编辑工具
|
dojo.require("esri/layers/MapImageLayer"); //
|
dojo.require("esri/layers/MapImage"); //
|
dojo.require("esri/geometry/Extent"); //
|
dojo.require("esri/geometry/webMercatorUtils"); //
|
dojo.addOnLoad(function () {
|
var h = window.innerHeight;
|
document.getElementById("map").style.height = h + "px";
|
map = new esri.Map("map", {logo: false});
|
var basemap = new esri.layers.ArcGISTiledMapServiceLayer(obtainExtentMapUrl);
|
map.addLayer(basemap);
|
CreateSymbol();
|
CreateToolbarDrawAndEdit();
|
DrawGraphic(firstDrawType);
|
});
|
|
//获取地址栏参数
|
function getSearchParam(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return r[2];
|
return null;
|
}
|
|
//绘图
|
var DrawTool, EditTool, PointSymbol, PolyLineSymbol, PolygonSymbol, IsDraw = false;
|
|
function CreateSymbol() {
|
//点符号
|
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])
|
)
|
}
|
|
function CreateToolbarDrawAndEdit() {
|
if (!DrawTool) {
|
DrawTool = new esri.toolbars.Draw(map, {
|
tooltipOffset: 20,
|
drawTime: 90
|
});
|
|
dojo.connect(DrawTool, "onDrawEnd", function (geometry) {
|
var result = null;
|
map.graphics.clear();
|
// if (geometry.type === "polygon") {
|
// DrawTool.deactivate();
|
// var graphicPolygon = new esri.Graphic(geometry, PolygonSymbol);
|
// map.graphics.add(graphicPolygon);
|
// IsDraw = false;
|
// }
|
if (geometry.type === "point") {
|
DrawTool.deactivate();
|
var graphicpoint = new esri.Graphic(geometry, PointSymbol);
|
map.graphics.add(graphicpoint);
|
IsDraw = false;
|
var point = mercator2lonlat([geometry.x, geometry.y]);
|
result = [point[0], point[1]];
|
}
|
// if (geometry.type === "polyline") {
|
// DrawTool.deactivate();
|
// var graphicpolyline = new esri.Graphic(geometry, PolyLineSymbol);
|
// map.graphics.add(graphicpolyline);
|
// IsDraw = false;
|
// }
|
if (geometry.type == "extent") {
|
var selectionPolygon = esri.geometry.Polygon.fromExtent(geometry);
|
DrawTool.deactivate();
|
var graphicPolygon = new esri.Graphic(selectionPolygon, PolygonSymbol);
|
map.graphics.add(graphicPolygon);
|
IsDraw = false;
|
var min = mercator2lonlat([geometry.xmin, geometry.ymin]);
|
var max = mercator2lonlat([geometry.xmax, geometry.ymax]);
|
result = [min[0], min[1], max[0], max[1]];
|
}
|
if(parent.KuangXuanCallBack) {
|
parent.KuangXuanCallBack({ callbackFun: callbackFun, data: result });
|
}
|
DrawGraphic(geometry.type);
|
});
|
}
|
}
|
|
function DrawGraphic(type) {
|
if (map.loaded) {
|
IsDraw = true;
|
if (!type) type = firstDrawType;
|
if (type == "point") {
|
DrawTool.activate(esri.toolbars.Draw.POINT);
|
// } else if (type == "polyline") {
|
// DrawTool.activate(esri.toolbars.Draw.POLYLINE);
|
// } else if (type == "polygon") {
|
// DrawTool.activate(esri.toolbars.Draw.POLYGON);
|
} else if (type == "extent") {
|
DrawTool.activate(esri.toolbars.Draw.EXTENT);
|
}
|
} else {
|
setTimeout("DrawGraphic()", 300);
|
}
|
}
|
|
function ClearGraphic() {
|
DrawTool.deactivate();
|
//map.graphics.clear();
|
}
|
|
//墨卡托转经纬度
|
function mercator2lonlat(mercator) {
|
var lonlat = Array();
|
var x = mercator[0] / 20037508.34 * 180;
|
var y = mercator[1] / 20037508.34 * 180;
|
y = 180 / Math.PI * (2 * Math.atan(Math.exp(y * Math.PI / 180)) - Math.PI / 2);
|
lonlat[0] = x.toFixed(8);
|
lonlat[1] = y.toFixed(8);
|
return lonlat;
|
}
|
</script>
|
</head>
|
<body class="tundra">
|
<div id="map" class="MapClass"></div>
|
<div style="position: absolute;top: 100px;left: 15px;width: 50px;">
|
<a onclick="DrawGraphic()" style="cursor: pointer;margin-bottom: 10px;">
|
<img src="../../image/Draw.png" width="40" height="40" />
|
</a>
|
<a onclick="ClearGraphic()" style="cursor: pointer;">
|
<img src="../../image/translation.png" width="40" height="40" />
|
</a>
|
</div>
|
</body>
|
</html>
|
