openlayers 利用draw互動元件實現框選功能，並顯示框選經緯度
阿新 • • 發佈：2018-12-27
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/ol.js"></script> <script src="../js/jquery-3.3.1.min.js"></script> <link href="../css/ol.css" rel="stylesheet"/> <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.3)' }), //劃線的時候的圖樣 stroke: new ol.style.Stroke({ color: 'rgba(96,96,96, 0.3)', width: 2 }), image: new ol.style.Circle({ radius: 5, stroke: new ol.style.Stroke({ color: 'rgba(96,96,96, 0.3)' }), fill: new ol.style.Fill({ color: 'rgba(96,96,96, 0.3)' }) }) }); var source = new ol.source.OSM(); map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: source }) ], view: new ol.View({ center: ol.proj.transform([120.15, 30.28], 'EPSG:4326', 'EPSG:3857'), zoom: 9 }) }); var source = new ol.source.Vector(); var layer = new ol.layer.Vector({ source: source, style: style }); var draw = new ol.interaction.Draw({ source: layer.getSource(), type: 'Circle', style: style, geometryFunction: ol.interaction.Draw.createBox() }); function clickHandler() { var counter = 0; $('#map').bind("click", function (e) { var pointermove = $('#map').bind("pointermove", function (e2) { var coordinate = ol.proj.transform(map.getEventCoordinate(e2), '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'); }); var coordinate = ol.proj.transform(map.getEventCoordinate(e), '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>