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 相关文章推荐
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
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
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python中dict()的高级用法实现
2019/11/13 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
安全生产汇报材料
2014/02/17 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
岳麓书院导游词
2015/02/03 职场文书
对公司的意见和建议
2015/06/04 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
分享几种python 变量合并方法
2022/03/20 Python
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android