В примере 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>
Сообщения
Комментариев нет:
Отправить комментарий