openlayers实现图标拖动获取坐标


Posted in Javascript onSeptember 25, 2020

本文实例为大家分享了openlayers实现图标拖动获取坐标的具体代码,供大家参考,具体内容如下

本文所涉及的技术如下:

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',
  style : 'default',
  version : '1.0.0',
  matrixSet : 'c',
  format : 'tiles',
  url : 'http://t{0-6}.tianditu.com/cva_c/wmts?tk=key',
  tileGrid : tdtGrid,
  wrapX : true
 }),
 minResolution: 0.0000858306884765625,
 maxResolution: 0.02197265625
});
 
/**
 * @desc 浙江天地图图层
 */
var zJVecLayer = new ol.layer.Tile( {
 source : new ol.source.WMTS( {
  style : 'default',
  version : '1.0.0',
 wrapX : true,
 layer : 'ZJEMAP',
 matrixSet:'TileMatrixSet0',
  format : 'image/png',
  url : 'http://srv.zjditu.cn/ZJEMAP_2D/wmts',
 tileGrid : tdtGridzj,
  wrapX : true
 }),
 minResolution: 0.0000013411045074462890625,
 maxResolution: 0.0000858306884765625,
});
 
var zJAnnoLayer =new ol.layer.Tile( {
 source : new ol.source.WMTS( {
  style : 'default',
  version : '1.0.0',
 wrapX : true,
 layer : 'ZJEMAPANNO',
  matrixSet : 'TileMatrixSet0',
  format : 'image/png',
  url : 'http://srv.zjditu.cn/ZJEMAPANNO_2D/wmts',
 tileGrid : tdtGridzj,
  wrapX : true
 }),
 minResolution: 0.0000013411045074462890625,
 maxResolution: 0.0000858306884765625,
});
 
 
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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
xtree.js 代码
Mar 13 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
Jqprint实现页面打印
Jan 06 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
openlayers实现地图弹窗
Sep 25 #Javascript
openlayers实现地图测距测面
Sep 25 #Javascript
openlayers 3实现车辆轨迹回放
Sep 24 #Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 #Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 #Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 #Javascript
vue使用openlayers实现移动点动画
Sep 24 #Javascript
You might like
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
javascript常用函数(2)
2015/11/05 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
一起深入理解js中的事件对象
2021/02/06 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
解析Python编程中的包结构
2015/10/25 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
比利时香水网上商店:NOTINO
2018/03/28 全球购物
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
生物科学系大学生的自我评价
2013/12/20 职场文书
岗位职责风险防控
2014/02/18 职场文书
英语老师推荐信
2014/02/26 职场文书
cf搞笑广告词
2014/03/14 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
欢迎领导标语
2014/06/27 职场文书
公司授权委托书范文
2014/09/21 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
心灵点滴观后感
2015/06/02 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫