OpenLayer学习之自定义测量控件

OpenLayer 学习之自定义测量控件(目前ol3的版本不会抛异常)

一、自定义控件是在继承基类空间基础上实现的,控件不是我写的(毕竟技术有限)最近也在一直在研究源码进行模仿想写出自己的功能更为强大的控件。

二、控件源码

1、css样式设置

.tooltip {
 position: relative;
 background: rgba(0, 0, 0, 0.5);
 border-radius: 4px;
 color: white;
 padding: 4px 24px 4px 8px;
 opacity: 0.7;
 white-space: nowrap;
}
.tooltip-measure {
 opacity: 1;
 font-weight: bold;
}
.tooltip-static {
 background-color: #ffcc33;
 color: black;
 border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
 border-top: 6px solid rgba(0, 0, 0, 0.5);
 border-right: 6px solid transparent;
 border-left: 6px solid transparent;
 content: "";
 position: absolute;
 bottom: -6px;
 margin-left: -7px;
 left: 50%;
}
.tooltip-static:before {
 border-top-color: #ffcc33;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 4px;
  right: 8px;
  color: red;
}
.ol-popup-closer:after {
  content: "✖";
}
/*MeasureTool*/

.MeasureTool{
 position: absolute;
 top: 2.0em;
 right: 5em;
 text-align: left;
 padding: 0;
}
.MeasureTool .ulbody{
 display: none;
}
.MeasureTool.shown .ulbody{
 display: block;
}
.ulbody li input:focus, .ulbody li input:hover {
 background-color: white;
 color: blue;
 font-weight: bold;
}
.MeasureTool ul {
 padding: 0;
 list-style: none;
 margin: 0;
}
.MeasureTool ul li{
 text-align: center;
}
.MeasureTool>ul>li>input{
 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABiUlEQVRIS8WUQU7CQBSG/ze6lxsoJxCPYMpePIG4almJW2giJq1xJ6ykbuAG6p6GIwgnkBsYtwb7zGsZLKUk0tI4m6btzP/N/+bNTyh4UMH6+D+A7fkdACwOHdO4TTq1vVENoGP9PW2O/NvowPb8UDwafO6Y1Zc4xO77ExDigFStvwEYPccymhrQGYxL86/gIw50TCM7gBkz1zLKWrD16NeVwgCMqXaRGcDgTwIdzANVvm+czgTS9kZDAl0AkLO5WZxTNgfM/EpEZwxcu6bRjQD+jIDDgNSJ4uAtFyAIcCnlEJBrVWutp3FFRMWZa1ZLuhkyl0hKs6+Cd73Ltuc3CXjQwNwA2ZkuibQrM+pSMnF21zCGOwHYfb8LwhUYPSauxw99N4Do1j7/3jtMHcuoyHsegESFxET4lN7Hnpoo/j6Kvkc3exEpy3nJSCk+7OKhtinYton0pB6thlooFZYkx1hZnwbIob2+NA2wlv1bEsNs0kMAK5Z012wpupye1Cu+i7Lu9K/rCnfwA90A1i8VnCB2AAAAAElFTkSuQmCC') /*logo.png*/;
 background-position: center center;
 background-repeat: no-repeat;
}
.MeasureTool input[type="button"]{
 background-color: rgba(255, 255, 255, 0.4);
 width: 60px;
 height: 26px;
 border: 0;
}
.MeasureTool .ulbody li{
 border-top: 1px solid rgba(221, 221, 221, 0.4);
}

2、JS源码

/**
 * OpenLayers 3 MeasureTool Control.
 * See [the examples](./examples) for usage.
 * @constructor
 * @extends {ol.control.Control}
 * @param {Object} opt_options Control options, extends olx.control.ControlOptions adding:
 *               **`tipLabel`** `String` - the button tooltip.
 */
//构造函数
ol.control.MeasureTool = function(opt_options) {

 var options = opt_options || {};

 this.sphereradius = options.sphereradius ?
  options.sphereradius : 6378137;

 this.mapListeners = [];

 // hiddenclass
 this.hiddenClassName = 'ol-control MeasureTool';
 if (ol.control.MeasureTool.isTouchDevice_()) {
   this.hiddenClassName += ' touch';
 }
 // shownClass
 this.shownClassName = this.hiddenClassName + ' shown';

 var element = document.createElement('div');
 element.className = this.hiddenClassName;

 this.panel = document.createElement('ul');
 element.appendChild(this.panel);

 var ulheader = document.createElement('li');
 this.panel.appendChild(ulheader);

 var inputMeasure = document.createElement('input');
 inputMeasure.type = "button";
 ulheader.appendChild(inputMeasure);

 var ulbody = document.createElement('li');
 this.panel.appendChild(ulbody);

 var html = '';
 html += '<ul class="ulbody">';
 html += '<li><input type="button" value="http://www.cppcns.com/wangluo/javascript/Line"></li>';
 html += '<li><input type="button" value="http://www.cppcns.com/wangluo/javascript/Area"></li>';
 html += '<li><input type="checkbox" value="http://www.cppcns.com/wangluo/javascript/no"></li>';
 html += '</ul>';
 ulbody.innerHTML = html;

 var this_ = this;

 inputMeasure.onmouseover = function(e) {
  this_.showPanel();
 };
 inputMeasure.onclick = function(e) {
   e = e || window.event;
   this_.showPanel();
   e.preventDefault();
 };

 var lis = ulbody.getElementsByTagName("li");

 this.sourceMesure = new ol.source.Vector();
 this.vectorMesure = new ol.layer.Vector({
   source: this.sourceMesure,
  style: new ol.style.Style({
   fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.2)'
   }),
   stroke: new ol.style.Stroke({
    color: '#ffcc33',
    width: 2
   }),
   image: new ol.style.Circle({
    radius: 7,
    fill: new ol.style.Fill({
     color: '#ffcc33'
    })
   })
  })
 });

 //type length or area
 var typeSelect={};
 //Line start
 lis[0].onclick = function(e) {
  typeSelect.value = 'http://www.cppcns.com/wangluo/javascript/length';
  typeSelect.check = lis[2].getElementsByTagName("input")[0].checked;
  this_.mapmeasure(typeSelect);
 };
 //Area start
 lis[1].onclick = function(e) {
  typeSelect.value = 'http://www.cppcns.com/wangluo/javascript/area';
  typeSelect.check = lis[2].getElementsByTagName("input")[0].checked;
  this_.mapmeasure(typeSelect);
 };

 this_.panel.onmouseout = function(e) {
   e = e || window.event;
   if (!this_.panel.contains(e.toElement || e.relatedTarget)) {
     this_.hidePanel();
   }
 };

 ol.control.Control.call(this, {
   element: element,
 });

};
//继承
ol.inherits(ol.control.MeasureTool, ol.control.Control);

ol.control.MeasureTool.prototype.mapmeasure = function(typeSelect) {
  var source = this.sourceMesure;
  var vector = this.vectorMesure;
 var wgs84Sphere = new ol.Sphere(this.sphereradius);

 var sketch;
 var helpTooltipElement;
 var measureTooltipElement;
 var measureTooltip;

 var map = this.getMap();
 map.addLayer(vector);

 map.getViewport().addEventListener('mouseout', function() {
  helpTooltipElement.classList.add('hidden');
 });

 var draw; // global so we can remove it later

 var formatLength = function(line) {
  var length;
  if (typeSelect.check) {
   var coordinates = line.getCoordinates();
   length = 0;
   var sourceProj = map.getView().getProjection();
   for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
    var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
    var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
    length += wgs84Sphere.haversineDistance(c1, c2);
   }
  } else {
   var sourceProj = map.getView().getProjection();
   var geom = /** @type {ol.geom.Polygon} */(line.clone().transform(
     sourceProj, 'EPSG:3857'));
   length = Math.round(geom.getLength() * 100) / 100;
   // length = Math.round(line.getLength() * 100) / 100;
  }
  var output;
  if (length > 100) {
   output = (Math.round(length / 1000 * 100) / 100) +
     ' ' + 'km';
  } else {
   output = (Math.round(length * 100) / 100) +
     ' ' + 'm';
  }
  return output;
 };

 var formatArea = function(polygon) {
  if (typeSelect.check) {
   var sourceProj = map.getView().getProjection();
   var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
     sourceProj, 'EPSG:4326'));
   var coordinates = geom.getLinearRing(0).getCoordinates();
   area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
  } else {
   var sourceProj = map.getView().getProjection();
   var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
     sourceProj, 'EPSG:3857'));
   area = geom.getArea();
   // area = polygon.getArea();
  }
  var output;
  if (area > 10000) {
   output = (Math.round(area / 1000000 * 100) / 100) +
     ' ' + 'km<sup>2</sup>';
  } else {
   output = (Math.round(area * 100) / 100) +
     ' ' + 'm<sup>2</sup>';
  }
  return output;
 };

 var popupcloser = document.createElement('a');
 popupcloser.href = 'javascript:void(0);';
 popupcloser.classList.add('ol-popup-closer');

 function addInteraction() {
  var type = (typeSelect.value =http://www.cppcns.com/wangluo/javascript/='area' ? 'Polygon' : 'LineString');
  draw = new ol.interaction.Draw({
   source: source,
   type: /** @type {ol.geom.GeometryType} */ (type),
   style: new ol.style.Style({
    fill: new ol.style.Fill({
     color: 'rgba(255, 255, 255, 0.2)'
    }),
    stroke: new ol.style.Stroke({
     color: 'rgba(0, 0, 0, 0.5)',
     lineDash: [10, 10],
     width: 2
    }),
    image: new ol.style.Circle({
     radius: 5,
     stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 0, 0.7)'
     }),
     fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)'
     })
    })
   })
  });
  map.addInteraction(draw);

  createMeasureTooltip();
  createHelpTooltip();

  var listener;
  draw.on('drawstart',
   function(evt) {
    // set sketch
    sketch = evt.feature;

    /** @type {ol.Coordinate|undefined} */
    var tooltipCoord = evt.coordinate;

    listener = sketch.getGeometry().on('change', function(evt) {
     try {
      var geom = evt.target;
      var output;
      if (geom instanceof ol.geom.Polygon) {
       output = formatArea(geom);
       tooltipCoord = geom.getInteriorPoint().getCoordinates();
      } else if (geom instanceof ol.geom.LineString) {
       output = formatLength(geom);
       tooltipCoord = geom.getLastCoordinate();
      }
      measureTooltipElement.innerHTML = output;
      measureTooltip.setPosition(tooltipCoord);
     } catch (e) {
      map.removeInteraction(draw);
     } finally {
     }

    });
   }, this);

  draw.on('drawend',
    function() {
     measureTooltipElement.appendChild(popupcloser);
     measureTooltipElement.className = 'tooltip tooltip-static';
     measureTooltip.setOffset([0, -7]);
     // unset sketch
     sketch = null;
     // unset tooltip so that a new>
<script src="http://www.cppcns.com/wangluo/javascript/ol3-measuretool-master/measuretool.js"></script>

OpenLayer学习之自定义测量控件

扫一扫手机访问