среда, 20 ноября 2013 г.

Настройка OpenLayers.Control.Measure для вывода результатов измерений возле положения курсора в карте

В примере measure.html показано, как выводить результаты измерений за пределы карты (в div).
Но для пользователя удобнее видеть эти результаты непосредственно в карте возле текущего положения курсора. Кроме того, желательно локализовать единицы измерений. Я решил эту задачу и привожу исходный код:
<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
 <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
 <script src="http://openlayers.org/dev/OpenLayers.js"></script>
 <script type="text/javascript">
  function init(){
   OpenLayers.INCHES_PER_UNIT["км"] = OpenLayers.INCHES_PER_UNIT["km"];
   OpenLayers.INCHES_PER_UNIT["м"] = OpenLayers.INCHES_PER_UNIT["m"];
   var map = new OpenLayers.Map("map");
   var wmsLayer = new OpenLayers.Layer.WMS("OpenLayers WMS", 
    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: "basic"});
   map.addLayers([wmsLayer]);
   var sketchSymbolizers = {
    "Point": {
     label: "${length}",
     fontColor: "darkred",
     fontSize: "14px",
     fontWeight: "bold",
     labelAlign: "rb",
     labelXOffset: -5,
     labelYOffset: -25,
     labelOutlineColor: "white",
     labelOutlineWidth: 3,
     pointRadius: 3,
     fillColor: "#FFA3B1",
     fillOpacity: 1,
     strokeWidth: 1,
     strokeOpacity: 1,
     strokeColor: "red"
    },
    "Line": {
     strokeWidth: 3,
     strokeOpacity: 0.5,
     strokeColor: "red",
     strokeDashstyle: "solid"
    }
   };
   var style = new OpenLayers.Style();
   style.addRules([new OpenLayers.Rule({symbolizer: sketchSymbolizers})]);
   var styleMap = new OpenLayers.StyleMap({"default": style});
   var measure = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
    title: "Измерение расстояний",
    type: OpenLayers.Control.TYPE_TOOL,
    displaySystem: "metric",
    displaySystemUnits: {
     geographic: ["град."],
     english: ["мили", "футы", "дюймы"],
     metric: ["км", "м"]
    },
    geodesic: false,
    persist: true,
    handlerOptions: {layerOptions: {styleMap: styleMap}},
    callbacks: {
     modify: function (point, line) {
      var len = line.geometry.components.length;
      var to = line.geometry.components[len - 1];
      var total = this.getBestLength(line.geometry);
      var label = total[0] == 0 ? "" : 
       total[0].toFixed(2).replace(".", ",") + " " + total[1];
      var feature = line.layer.getFeatureBy("geometry", point);
      feature.attributes = { length: label };
     }
    }
   });
   map.addControl(measure);
   measure.activate();
   map.setCenter(new OpenLayers.LonLat(0, 0), 3);
  }
 </script>
 </head>
 <body onload="init()">
 <div id="map" class="smallmap"></div>
 </body>
</html>
При перемещении курсора результат измерения выводится со смещением вниз и влево. Единицы измерений: м и км.

Комментариев нет:

Отправить комментарий