<!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;
|
}
|
|
.form-control {
|
padding: 0.3rem 0.7rem;
|
/*height: 34px;*/
|
display: inline-block;
|
font-size: 1rem;
|
line-height: 1.5;
|
color: #55595c;
|
background-color: #fff;
|
background-image: none;
|
border: 1px solid #ccc;
|
border-radius: 0.25rem;
|
}
|
|
.control-label {
|
padding-top: 0 !important;
|
width: 160px;
|
float: left;
|
line-height: 30px;
|
padding-right: 1.5em;
|
margin-top: 0 !important;
|
text-align: right;
|
font-size: 13px;
|
font-weight: 500;
|
}
|
|
.control-group {
|
margin-bottom: 1em;
|
}
|
|
.controls {
|
margin-left: 160px;
|
}
|
|
.col-sm-3, .col-sm-6, .col-sm-12 {
|
padding-left: 0;
|
padding-right: 0;
|
}
|
|
.btn {
|
display: inline-block;
|
font-weight: normal;
|
text-align: center;
|
white-space: nowrap;
|
vertical-align: middle;
|
cursor: pointer;
|
user-select: none;
|
border: 1px solid transparent;
|
padding: 0.25rem 0.75rem;
|
font-size: 1rem;
|
line-height: 1.5;
|
border-radius: 0.25rem;
|
}
|
|
.btn:focus, .btn:hover {
|
text-decoration: none;
|
}
|
|
.btn-primary {
|
color: #fff;
|
background-color: #039cfd;
|
border-color: #039cfd;
|
}
|
|
.btn-primary:hover {
|
color: #fff;
|
background-color: #027dcb;
|
border-color: #0277c1;
|
}
|
</style>
|
<script th:inline="javascript">
|
/*<![CDATA[*/
|
var pubzyWebRoot = [[${pubzyWebRoot}]];
|
var resourceClass = [[${ResourceClass}]];
|
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, flag = null;
|
dojo.require("esri.map");
|
dojo.require("esri/toolbars/draw"); //绘图工具
|
dojo.addOnLoad(function () {
|
var h = window.innerHeight;
|
|
if(resourceClass == "KJ_JCDT") {
|
document.getElementById("initMap").style.display = "none";
|
document.getElementById("map").style.height = h - 44 + "px";
|
} else {
|
document.getElementById("map").style.height = h - 100 + "px";
|
}
|
map = new esri.Map("map", {logo: false});
|
var basemap = new esri.layers.ArcGISTiledMapServiceLayer(obtainExtentMapUrl);
|
map.addLayer(basemap);
|
CreateSymbol();
|
CreateToolbarDrawAndEdit();
|
});
|
|
//获取地址栏参数
|
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;
|
|
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 == "extent") {
|
var selectionPolygon = esri.geometry.Polygon.fromExtent(geometry);
|
DrawTool.deactivate();
|
var graphicPolygon = new esri.Graphic(selectionPolygon, PolygonSymbol);
|
map.graphics.add(graphicPolygon);
|
var min = mercator2lonlat([geometry.xmin, geometry.ymin]);
|
var max = mercator2lonlat([geometry.xmax, geometry.ymax]);
|
result = [min[0], min[1], max[0], max[1]];
|
}
|
if (flag == "full") {
|
document.getElementById("fullxmin").value = result[0];
|
document.getElementById("fullxmax").value = result[2];
|
document.getElementById("fullymin").value = result[1];
|
document.getElementById("fullymax").value = result[3];
|
document.getElementById("fullxmin_span").innerText = result[0];
|
document.getElementById("fullxmax_span").innerText = result[2];
|
document.getElementById("fullymin_span").innerText = result[1];
|
document.getElementById("fullymax_span").innerText = result[3];
|
} else if (flag == "init") {
|
document.getElementById("initxmin").value = result[0];
|
document.getElementById("initxmax").value = result[2];
|
document.getElementById("initymin").value = result[1];
|
document.getElementById("initymax").value = result[3];
|
document.getElementById("initxmin_span").innerText = result[0];
|
document.getElementById("initxmax_span").innerText = result[2];
|
document.getElementById("initymin_span").innerText = result[1];
|
document.getElementById("initymax_span").innerText = result[3];
|
}
|
DrawGraphic(flag);
|
});
|
}
|
}
|
|
function DrawGraphic(type) {
|
flag = type || flag;
|
DrawTool.activate(esri.toolbars.Draw.EXTENT);
|
}
|
|
function ClearGraphic() {
|
DrawTool.deactivate();
|
}
|
|
//墨卡托转经纬度
|
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>
|
<div style="margin-top: 10px;">
|
<div class="row" id="initMap">
|
<div class="col-sm-12">
|
<div class="control-group">
|
<label class="control-label">地图初始化范围</label>
|
<div class="controls input-icon">
|
<div class="form-control" style="width: 84%;">
|
<div style="float: left;width: 200px;font-size: 14px;">
|
XMin: <span id="initxmin_span"></span>
|
</div>
|
<div style="float: left;width: 200px;font-size: 14px;">
|
YMin: <span id="initymin_span"></span>
|
</div>
|
<div style="float: left;width: 200px;font-size: 14px;">
|
XMax: <span id="initxmax_span"></span>
|
</div>
|
<div style="float: left;width: 200px;font-size: 14px;">
|
YMax: <span id="initymax_span"></span>
|
</div>
|
</div>
|
<input id="initxmin" name="initxmin" type="hidden" />
|
<input id="initxmax" name="initxmax" type="hidden" />
|
<input id="initymin" name="initymin" type="hidden" />
|
<input id="initymax" name="initymax" type="hidden" />
|
<button title="框选" type="button" class="btn btn-primary" id="KuangXuan_Init" style="vertical-align: top;margin-left: 2px;" onclick="DrawGraphic('init')">框选</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="control-group">
|
<label class="control-label">地图覆盖范围</label>
|
<div class="controls input-icon">
|
<div class="form-control" style="width: 84%;">
|
<div style="float: left;width: 200px;font-size: 14px;">
|
XMin: <span id="fullxmin_span"></span>
|
</div>
|
<div style="float: left;width: 200px;font-size: 14px;">
|
YMin: <span id="fullymin_span"></span>
|
</div>
|
<div style="float: left;width: 200px;font-size: 14px;">
|
XMax: <span id="fullxmax_span"></span>
|
</div>
|
<div style="float: left;width: 200px;font-size: 14px;">
|
YMax: <span id="fullymax_span"></span>
|
</div>
|
</div>
|
<input id="fullxmin" name="fullxmin" type="hidden" />
|
<input id="fullxmax" name="fullxmax" type="hidden" />
|
<input id="fullymin" name="fullymin" type="hidden" />
|
<input id="fullymax" name="fullymax" type="hidden" />
|
<button title="框选" type="button" class="btn btn-primary" id="KuangXuan_Full" style="vertical-align: top;margin-left: 2px;" onclick="DrawGraphic('full')">框选</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
