You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.8 KiB
HTML
137 lines
3.8 KiB
HTML
1 month ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Title</title>
|
||
|
|
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
|
||
|
|
<script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
|
||
|
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
body, html {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
font-family: "Microsoft YaHei"
|
||
|
|
}
|
||
|
|
|
||
|
|
#map, #info {
|
||
|
|
width: 60%;
|
||
|
|
height: 60%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="btn">
|
||
|
|
<button id="btnclick" onclick="clickHandler()">框选范围</button>
|
||
|
|
</div>
|
||
|
|
<div id="map"></div>
|
||
|
|
<div id="info">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>框选范围:</td>
|
||
|
|
<td>左上角坐标:</td>
|
||
|
|
<td>经度：<input id="zjd" readonly=“readonly”/></td>
|
||
|
|
<td></td>
|
||
|
|
<td>右下角坐标:</td>
|
||
|
|
<td>经度：<input id="yjd" readonly=“readonly”/></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
<td>纬度：<input id="zwd" readonly=“readonly”/></td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
<td>纬度：<input id="ywd" readonly=“readonly”/></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var style = new ol.style.Style({
|
||
|
|
fill: new ol.style.Fill({
|
||
|
|
color: 'rgba(96,96,96, 0.1)'
|
||
|
|
}),
|
||
|
|
//划线的时候的图样
|
||
|
|
stroke: new ol.style.Stroke({
|
||
|
|
color: 'red',
|
||
|
|
width: 2
|
||
|
|
}),
|
||
|
|
image: new ol.style.Circle({
|
||
|
|
radius: 5,
|
||
|
|
stroke: new ol.style.Stroke({
|
||
|
|
color: 'rgba(96,96,96, 0.1)'
|
||
|
|
}),
|
||
|
|
fill: new ol.style.Fill({
|
||
|
|
color: 'rgba(96,96,96, 0.1)'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
});
|
||
|
|
map = new ol.Map({
|
||
|
|
target: 'map',
|
||
|
|
layers: [
|
||
|
|
new ol.layer.Tile({
|
||
|
|
source: new ol.source.OSM()
|
||
|
|
})
|
||
|
|
],
|
||
|
|
view: new ol.View({
|
||
|
|
center: ol.proj.transform([120.15, 30.28], 'EPSG:4326', 'EPSG:3857'),
|
||
|
|
zoom: 9
|
||
|
|
})
|
||
|
|
});
|
||
|
|
var layer = new ol.layer.Vector({
|
||
|
|
source: new ol.source.Vector(),
|
||
|
|
style: style
|
||
|
|
});
|
||
|
|
var draw = new ol.interaction.Draw({
|
||
|
|
source: layer.getSource(),
|
||
|
|
type: 'Circle',
|
||
|
|
style: style,
|
||
|
|
geometryFunction: ol.interaction.Draw.createBox()
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
function clickHandler(e1) {
|
||
|
|
$('#map').bind("click", function (e) {
|
||
|
|
var pointermove = $('#map').bind("pointermove", function (e2) {
|
||
|
|
var coordinate = ol.proj.transform(map.getEventCoordinate(e2.originalEvent), 'EPSG:3857', 'EPSG:4326');
|
||
|
|
$("#yjd").attr("value", coordinate[0].toFixed(2));
|
||
|
|
$("#ywd").attr("value", coordinate[1].toFixed(2));
|
||
|
|
|
||
|
|
}).bind("click", function () {
|
||
|
|
$("#map").off('pointermove');
|
||
|
|
$("#map").off('click');
|
||
|
|
});
|
||
|
|
|
||
|
|
if ($("#zjd").val() == "" && $("#zwd").val() == "") {
|
||
|
|
var coordinate = ol.proj.transform(map.getEventCoordinate(e.originalEvent), 'EPSG:3857', 'EPSG:4326');
|
||
|
|
$("#zjd").attr("value", coordinate[0].toFixed(2));
|
||
|
|
$("#zwd").attr("value", coordinate[1].toFixed(2));
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
if ("取消框选" == ($("#btnclick").text())) {
|
||
|
|
$("#btnclick").text("框选范围");
|
||
|
|
$("input").attr("value", "");
|
||
|
|
layer.getSource().clear();
|
||
|
|
map.removeLayer(layer);
|
||
|
|
} else {
|
||
|
|
$("#btnclick").text("取消框选");
|
||
|
|
map.addInteraction(draw);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
draw.on('drawend', function () {
|
||
|
|
map.addLayer(layer);
|
||
|
|
map.removeInteraction(draw);
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|