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跨域问题解决方案
Aug 03 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 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+redis实现添加处理投票的方法
2015/11/14 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
php适配器模式简单应用示例
2019/10/23 PHP
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
vue实例的选项总结
2020/06/09 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
python zip()函数使用方法解析
2019/10/31 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
python 19个值得学习的编程技巧
2020/08/15 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
联想C++笔试题
2012/06/13 面试题
带薪年假请假条
2014/02/04 职场文书
教师党员承诺书
2014/03/25 职场文书
工商管理自荐书
2014/07/06 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
公司辞职信模板
2015/05/13 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL