jq写法
<!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 {
100%;
height: 100%;
margin: 0;
font-family: "Microsoft YaHei"
}
#map, #info {
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',
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>
JS写法1
<!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>
<style type="text/css">
body, html {
100%;
height: 100%;
margin: 0;
font-family: "Microsoft YaHei"
}
#map, #info {
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',
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)'
})
})
});
var 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()
});
var yjd= document.getElementById('yjd')
var ywd= document.getElementById('ywd')
var zjd= document.getElementById('zjd')
var zwd= document.getElementById('zwd')
var btn= document.getElementById('btnclick')
function clickHandler(e1) {
if ("取消框选" == (btn.innerText)) {
btn.innerText = "框选范围"
yjd.setAttribute("value", '')
zjd.setAttribute("value", '')
ywd.setAttribute("value", '')
zwd.setAttribute("value", '')
layer.getSource().clear();
map.removeLayer(layer);
} else {
btn.innerText = '取消框选'
map.addInteraction(draw);
}
}
draw.on('drawend', function (evt) {
var extent = evt.feature.getGeometry().getExtent()
yjd.setAttribute("value", ol.proj.transform([extent[0],extent[3]], 'EPSG:3857', 'EPSG:4326')[0].toFixed(2))
ywd.setAttribute("value", ol.proj.transform([extent[0],extent[3]], 'EPSG:3857', 'EPSG:4326')[1].toFixed(2))
zjd.setAttribute("value", ol.proj.transform([extent[2],extent[1]], 'EPSG:3857', 'EPSG:4326')[0].toFixed(2))
zwd.setAttribute("value", ol.proj.transform([extent[2],extent[1]], 'EPSG:3857', 'EPSG:4326')[1].toFixed(2))
map.addLayer(layer);
map.removeInteraction(draw);
});
</script>
</body>
</html>