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

牛老师讲GIS

发布于 2019-08-14 14:29:20

1.1K0

发布于 2019-08-14 14:29:20

文章被收录于专栏：跟牛老师一起学WEBGIS

概述

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

效果

实现思路

在实现的时候，有几个点： 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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年08月09日，如有侵权请联系 cloudcommunity@tencent.com 删除

overlay