概述

用过的百度地图的人都非常喜欢百度地图里面的周边搜索功能，它能够通过拖拽查询范围的大小，甚是好用。在本文，仿百度实现类似的效果。

效果

实现思路

在实现的时候，有几个点：
1.通过overlay实现拖动工具；
2.添加div的ondrag事件添加拖动；
3.保持y不变，控制只能在横向拖动；
4.通过伪元素：after实现圆的半径的展示。

实现代码

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>circle</title><link rel="stylesheet" type="text/css" href="../../plugin/ol4/ol.css"/><style type="text/css">html, body, .map {padding: 0;margin: 0;overflow: hidden;width: 100%;height: 100%;font-size: 12px;}.contextmenu {width: 24px;height: 14px;text-align: center;border-radius: 35px;background: #ddd;border: 2px solid #aaa;cursor: pointer;}.contextmenu:after {position: absolute;background: #ddd;border: 1px solid #aaa;left: calc(100% + 5px);height: 14px;line-height: 14px;padding: 0 2px;white-space: nowrap;content: attr(radius);border-radius: 3px;}</style>
</head>
<body>
<div id="contextmenu" class="contextmenu" draggable="true"><img width="18" height="14" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACaUlEQVRoQ+2Z8VXbQAzGJd0AZYPSCcoGTTdgA2ACygSFCUonIGzQDUg3yAYNExAG8Kc+5Z1Tx7Vj3fmZ1u+d/4Q7WT99n3S2wzTzi2eePxWAf61gUaAoMLICU1roVES+Wn4A7ohoMzLXzu2TAYjIPTNf211V9TuAL7MCCCGsiOhTTPpnVVWLAtBRgcksVBRw+q0o0Feo/95CIvKNiBYAbojIJs7B5QQ4DyFcq+o6xnEa58+yLAuJyAMzX8YZvwHwIQdARF6Y+STGWQK4SiVIBmgmf2zGexQQkTUzf6yTVtVkiCSAdvKq+grADqh1jgJEdCYiK2Z+lwvhBkhJ3pLxKBCTHgXhAkhNPhHAlmdDDAJ0eN4ezu4A3B5ruAQFdmFE5JaZd0+vKXY6CtAVNE6MLTMf+F5VfwB4JKLtgAInInLBzOetZM/qidT6+w2A+75iDQH8YubThNF2VVXV8hhACMHG74M3pqp2jul6/xDAhpnfe29GRFMAPAPoLeIQwF++jBZ67bGQVd9jocseC+3HaaMP8i0Um2vJzBctX75VEz8C2J34WT1QbxKRAwhV3QL43HWA1XsSp5CN0admE6vqYPJ2r8ExmguRAJCdfBJAl52OKeEEGJV8MkBPT6yqqjI7HVwegBDCkz2SNxrWZZvmjdwWam5q9oSqdo45D4CI7Me01/PtQmUBRCXsdLQXGvvek/tCs7DvR7Y/97tRNsDQ4eZRYCiG5/8FoK9KRQGPf1IOMme8/bKigLNikzXx7D+vE5H9wLF77Yyvn/P6gcPpgNHLJrPQ6MycAQqAs1CTLSsKTFZaZ+DZK/Ab6KbTQL7KjckAAAAASUVORK5CYII=">
</div>
<div id="map" class="map"></div>
<script type="text/javascript" src="../../plugin/ol4/ol.js"></script>
<script type="text/javascript" src="../../plugin/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">var center = [12956861.69670736, 4852676.787244822];var radius = 1000;var map = new ol.Map({target: document.getElementById("map"),layers: [getTilelayer("m@189")],view: new ol.View({center: center,zoom: 15})});var overlay = new ol.Overlay({element: document.getElementById("contextmenu"),positioning: 'center-center',position: getRadiusCoord()});map.addOverlay(overlay);var source = new ol.source.Vector({features: []});var vector = new ol.layer.Vector({source: source,style: new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.2)'}),stroke: new ol.style.Stroke({color: '#ffcc33',width: 2})})});map.addLayer(vector);source.addFeature(getCircleFeature(radius));var dom = document.getElementById("contextmenu");dom.onmousedown = function () {dom.draggable = true;dom.ondrag = function(ev){dragEvent(ev);};dom.ondragend = function(ev){dragEvent(ev);dom.draggable = false;};};setDomAttr();function dragEvent(ev) {var _pixel = map.getPixelFromCoordinate(center);var pixel = [ev.clientX, _pixel[1]];var coord = map.getCoordinateFromPixel(pixel);overlay.setPosition(coord);radius = getRadius(coord);source.clear();source.addFeature(getCircleFeature(radius));setDomAttr();}function setDomAttr() {var _radius =radius > 1000 ?(radius / 1000).toFixed(1) + '千米' :radius.toFixed(0) + '米';dom.setAttribute("radius", _radius);}function getRadiusCoord() {return [center[0] + radius, center[1]];}function getRadius(radiusCoord) {return radiusCoord[0] - center[0];}function getCircleFeature(radius) {var geom = new ol.geom.Circle(center, radius);var feature = new ol.Feature({geometry: geom});return feature;}function getTilelayer(lyr){var url = "http://www.google.cn/maps/vt?lyrs="+lyr+"&gl=cn&x={x}&y={y}&z={z}";var layer = new ol.layer.Tile({source: new ol.source.XYZ({url:url})});return layer;}
</script>
</body>
</html>

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	niujp08@qq.com
webgis群	452117357
Android群	337469080
GIS数据可视化群	458292378

ol仿百度拖拽调整圆的大小的实现相关推荐

Android qq消息气泡实现效果,Android 实现仿QQ拖拽气泡效果的示例
效果图: 一.实现思路在列表中默认使用自定义的TextView控件来展示消息气泡,在自定义的TextView控件中重写onTouchEvent方法,然后在DOWN.MOVE.UP事件中分别处理拖拽效 ...
android rebound平移,Android 仿 IOS 拖拽回弹之进阶 ReboundFrameLayout
Android 仿 IOS 拖拽回弹之进阶 ReboundFrameLayout 前言 IOS 拖拽回弹给用户的体验不得不赞然后 Android 原生的 API 各种不支持, 于是乎出现的很多仿 IO ...
vue中实现拖拽调整顺序功能
一.使用vuedraggable是标准的组件式封装或 vue-dragging 指令方式实现拖拽调整顺序功能. 1:安装依赖 npm install vuedraggable或yarn add v ...
android开发之仿QQ拖拽界面效果（侧滑面板）
仿QQ拖拽界面效果(侧滑面板),我们一般继承Layout,不会直接去继承ViewGroup,而是继承FrameLayout,为什么五大布局我们偏偏只继承FrameLayout呢? 第一,FrameLa ...
css拖拽调整高度,两种为wangEditor添加拖拽调整高度的方式：CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
鼠标拖拽调整div大小
鼠标拖拽调整div大小实现思路根据鼠标位置改变鼠标样式当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的 ...
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口拖拽 ...
React基于antd Table实现可拖拽调整列宽的表格
实现功能 1:表格列宽初始自动分配.列宽总和不能超过容器宽度(无横向滚动条,公司项目特殊需求) 2:当容器宽度变化时,保持当前列宽的分配比例,等比缩小 3:拖动过程中不进行列宽的调整,只有释放之后再进 ...
vue 表格左右拖拽调整列宽_解决 | iview低版本实现表格拖拽，滚动条列宽计算问题...
文 / 景朝霞来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing 点个赞,让我知道你来过~ 如果大佬觉得我的方案太low,请打脸轻一点~ 如果大佬有更好的方案,请不吝赐教~ 0 ...

ol仿百度拖拽调整圆的大小的实现

概述

效果

实现思路

实现代码

ol仿百度拖拽调整圆的大小的实现相关推荐

最新文章

热门文章