openlayers實現圖示拖動獲取座標
阿新 • • 發佈:2020-09-27
本文例項為大家分享了openlayers實現圖示拖動獲取座標的具體程式碼,供大家參考,具體內容如下
本文所涉及的技術如下:
openlayers載入國家天地圖和浙江天地圖,圖示拖動獲取位置,openlayers動畫。
效果如下:
程式碼如下:
var map; var dataResult; var app = {}; /** * @constructor * @extends {ol.interaction.Pointer} */ app.Drag = function() { ol.interaction.Pointer.call(this,{ handleDownEvent: app.Drag.prototype.handleDownEvent,handleDragEvent: app.Drag.prototype.handleDragEvent,handleMoveEvent: app.Drag.prototype.handleMoveEvent,handleUpEvent: app.Drag.prototype.handleUpEvent }); /** * @type {ol.Pixel} * @private */ this.coordinate_ = null; /** * @type {string|undefined} * @private */ this.cursor_ = 'pointer'; /** * @type {ol.Feature} * @private */ this.feature_ = null; /** * @type {string|undefined} * @private */ this.previousCursor_ = undefined; }; ol.inherits(app.Drag,ol.interaction.Pointer); /** * @param {ol.MapBrowserEvent} evt Map browser event. * @return {boolean} `true` to start the drag sequence. */ app.Drag.prototype.handleDownEvent = function(evt) { var map = evt.map; var feature = map.forEachFeatureAtPixel(evt.pixel,function(feature) { return feature; }); if (feature) { this.coordinate_ = evt.coordinate; this.feature_ = feature; } return !!feature; }; /** * @param {ol.MapBrowserEvent} evt Map browser event. */ app.Drag.prototype.handleDragEvent = function(evt) { var deltaX = evt.coordinate[0] - this.coordinate_[0]; var deltaY = evt.coordinate[1] - this.coordinate_[1]; var geometry = this.feature_.getGeometry(); geometry.translate(deltaX,deltaY); this.coordinate_[0] = evt.coordinate[0]; this.coordinate_[1] = evt.coordinate[1]; //console.log(this); }; /** * @param {ol.MapBrowserEvent} evt Event. */ app.Drag.prototype.handleMoveEvent = function(evt) { if (this.cursor_) { var map = evt.map; var feature = map.forEachFeatureAtPixel(evt.pixel,function(feature) { return feature; }); var element = evt.map.getTargetElement(); if (feature) { if (element.style.cursor != this.cursor_) { this.previousCursor_ = element.style.cursor; element.style.cursor = this.cursor_; } } else if (this.previousCursor_ !== undefined) { element.style.cursor = this.previousCursor_; this.previousCursor_ = undefined; } } }; /** * @return {boolean} `false` to stop the drag sequence. */ app.Drag.prototype.handleUpEvent = function() { dataResult={"coordinatex":this.coordinate_[0],"coordinatey":this.coordinate_[1]}; this.coordinate_ = null; this.feature_ = null; return false; }; /** * @desc 定義座標系統與範圍 */ var worldExtent = [-180,-90,180,90 ];// 世界範圍 var projection = ol.proj.get("EPSG:4326"); //4326座標 var projectionExtent = projection.getExtent(); /** * @desc 去掉第0層的天地圖解析度資訊,不會出現縮放到最後是空白的現象 */ var tdtResolutions = [ 0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125,0.000021457672119140625,0.0000107288360595703125,0.00000536441802978515625,0.000002682209014892578125,0.0000013411045074462890625 ]; /** *@desc 與解析度資訊需要每層嚴格對應起來 */ var matrixIds = [6,7,8,9,10,11,12,13,14]; var matrixIdszj=[15,16,17,18,19,20] /** * @desc 天地圖格網資訊 */ var tdtGrid = new ol.tilegrid.WMTS( { origin : ol.extent.getTopLeft(projectionExtent),resolutions : tdtResolutions.slice(0,9),matrixIds : matrixIds }); var tdtGridzj = new ol.tilegrid.WMTS( { origin : ol.extent.getTopLeft(projectionExtent),resolutions : tdtResolutions.slice(9,15),matrixIds : matrixIdszj }); /** * @desc 國家天地圖圖層 */ var wmtsVecLayer = new ol.layer.Tile( { source : new ol.source.WMTS( { layer : 'vec',style : 'default',version : '1.0.0',matrixSet : 'c',format : 'tiles',url : 'http://t{0-6}.tianditu.com/vec_c/wmts?tk=key',tileGrid : tdtGrid,wrapX : true }),minResolution: 0.0000858306884765625,maxResolution: 0.02197265625 }); var wmtsAnnoLayer = new ol.layer.Tile( { source : new ol.source.WMTS( { layer : 'cva',url : 'http://t{0-6}.tianditu.com/cva_c/wmts?tk=key',maxResolution: 0.02197265625 }); /** * @desc 浙江天地圖圖層 */ var zJVecLayer = new ol.layer.Tile( { source : new ol.source.WMTS( { style : 'default',wrapX : true,layer : 'ZJEMAP',matrixSet:'TileMatrixSet0',format : 'image/png',url : 'http://srv.zjditu.cn/ZJEMAP_2D/wmts',tileGrid : tdtGridzj,minResolution: 0.0000013411045074462890625,maxResolution: 0.0000858306884765625,}); var zJAnnoLayer =new ol.layer.Tile( { source : new ol.source.WMTS( { style : 'default',layer : 'ZJEMAPANNO',matrixSet : 'TileMatrixSet0',url : 'http://srv.zjditu.cn/ZJEMAPANNO_2D/wmts',}); var devVectorSource = new ol.source.Vector(); var devVectorLayer = new ol.layer.Vector({ source:devVectorSource,style:pointStyleFunction }); //定位點要素 var positionFeature = new ol.Feature(); positionFeature.setStyle(new ol.style.Style({ image: new ol.style.Circle({ radius: 6,fill: new ol.style.Fill({ color: '#3399CC' }),stroke: new ol.style.Stroke({ color: '#fff',width: 2 }) }) })); function flyLocation(center) { var duration = 1000; //持續時間(毫秒) var start = +new Date(); //移動效果 var pan = ol.animation.pan({ duration: duration,//設定持續時間 source: /** @type {ol.Coordinate} */(map.getView().getCenter()),start: start }); //反彈效果 /* var bounce = ol.animation.bounce({ duration: duration,//設定持續時間 resolution: 2 * map.getView().getResolution(),//4倍解析度 start: start }); */ map.beforeRender(pan); //地圖渲染前設定動畫效果(pan+bounce) map.getView().setCenter(center); //平移地圖 map.getView().setZoom(18); //放大地圖 } //建立定位點向量圖層(featuresOverlay) var featuresOverlay = new ol.layer.Vector({ source: new ol.source.Vector({ features: [positionFeature] }) }); function GetRequest() { var url = decodeURI(location.search); //獲取url中"?"符後的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); } } return theRequest; } var type; //初始座標 var data={"coordinatex":(GetRequest().x?GetRequest().x:121.54610300015),"coordinatey":(GetRequest().y?GetRequest().y:29.876429)}; /** * @desc 初始化 * @return */ $(function(){ //document.getElementById("topBar").style.fontSize=document.getElementById("topBar").width; initMap(); // showJq(); dataResult=data; loadData(data); }); /** * @desc:初始化地圖 * @return */ function initMap() { map = new ol.Map( { // 設定地圖控制元件,預設的三個控制元件都不顯示 controls: ol.control.defaults({ attribution: false,zoom: false }),view : new ol.View({ // extent:[120.320631,30.311294,120.332057,30.319126],//定義地圖容器範圍,不是地圖的初始化範圍 center : [121.54610300015,29.876429],zoom :18,projection : projection,maxZoom: 20,minZoom: 9 }),// logo: false,// 不顯示logo // logo: 'logo.png',// 用一個圖片 logo.png 作為logo //logo: {src: 'images/logo.png',href: 'http://www.openstreetmap.org/'},// 點選能跳轉到對應頁面 layers : [ wmtsVecLayer,wmtsAnnoLayer,zJVecLayer,zJAnnoLayer],target : 'map',interactions: ol.interaction.defaults({ pinchRotate:false }).extend([new app.Drag()]) }); map.addLayer(devVectorLayer); map.addLayer(featuresOverlay); //新增定位點標註(向量要素圖層) }; function loadData(dataJson){ // var dataJson = $.parseJSON(data); //map.getView().fit(initExtent,map.getSize()); devVectorSource.clear(); //isCheck = dataJson.dev.isCheck; var devArr = dataJson; if(dataJson.coordinatex&&dataJson.coordinatey){ var features = new Array(); if(devArr.coordinatex && devArr.coordinatey){ var feature = new ol.Feature(new ol.geom.Point([parseFloat(devArr.coordinatex),parseFloat(devArr.coordinatey)])); feature.setProperties(devArr); features.push(feature); } devVectorSource.addFeatures(features); var num = parseInt(Math.random()*features.length,10); var ft = features[num]; var ptCoord = ft.getGeometry().getCoordinates(); map.getView().setCenter(ptCoord); map.getView().setZoom(18); } } function pointStyleFunction(feature,resolution){ var imgPath = 'images/location.png'; return [new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5,1],// opacity: 0.9,src: imgPath }) })] } function defaultPoints() { loadData(data); } function uploadPoints(){ console.log(dataResult); } function closeWindow() { if(confirm("確定要退出嗎?")){ var browserName=navigator.appName; if (browserName=="Netscape"){ window.opener=null; window.open('','_self',''); window.close(); } if (browserName=="Microsoft Internet Explorer") { window.parent.opener = "whocares"; window.parent.close(); } } }
HTML檔案:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定位</title> <link rel="stylesheet" href="ol.css" > <style type="text/css"> #map{ width:100%; height:100%; position:absolute; margin:0; } body{ margin: 0; padding: 0; } #topBar{ position:absolute; z-index:99; top:5px; height:70px; font-size:200%; background-color:#263344; color:#ffffff; left:10px; right:10px; } #uploadPoints{ float:right; color:#fff; margin-top:14px; margin-right:7px; } #topBar_left{ float:left; color:#fff; margin-top:14px; margin-left:7px; } #menu{ width:100%; height:20px; padding:5px 10px; font-size:14px; font-family:"微軟雅黑"; left:10px; } </style> </head> <body> <div id="topBar" style="visibility:visible"> <div id="topBar_left"> <a id="close" onclick="closeWindow();" >關閉</a> <a id="default" onclick="defaultPoints();" >| 預設位置</a> </div> <div id="uploadPoints" onclick="uploadPoints();" >使用此位置</div> </div> <div id='map' class="hescgis-map"></div> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="ol.js"></script> <script type="text/javascript" src="map.js"></script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。