首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ol仿百度拖拽调整圆的大小的实现

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

作者头像
lzugis
发布2019-08-14 14:29:20
1.1K0
发布2019-08-14 14:29:20
举报

概述

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

效果

实现后效果
实现后效果
百度地图效果
百度地图效果

实现思路

在实现的时候,有几个点: 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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 效果
  • 实现思路
  • 实现代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档