概述
用过的百度地图的人都非常喜欢百度地图里面的周边搜索功能，它能够通过拖拽查询范围的大小，甚是好用。在本文，仿百度实现类似的效果。
效果
实现思路
在实现的时候，有几个点： 1.通过overlay实现拖动工具； 2.添加div的ondrag事件添加拖动； 3.保持y不变，控制只能在横向拖动； 4.通过伪元素：after实现圆的半径的展示。
实现代码
代码语言：javascript复制<!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>
