Страница 1 из 1

OpenLayers: Добавить текст на карту

Добавлено: 23 май 2012, 13:10
stepan_borovikov
Добрый день.
Мне нужно на карте в нужных координатах выводить текст. Маленькими буковками. (есть километровые столбики вот как раз рядом с этими столбиками и нужно вывести например "10км", "148км")

Спасибо.

Код: Выделить всё

<!DOCTYPE html>
<html>
<head>
    <script src="http://openlayers.org/dev/OpenLayers.js"></script>
    <style type="text/css">
    #mapdiv {
        width: 1000px;
        height: 1000px;
        border: 1px solid #dddddd;
    }
    </style>
 
<script>
function init() {
        map = new OpenLayers.Map("mapdiv");
        var epsg4326 = new OpenLayers.Projection("EPSG:4326");
        var epsg900913 = new OpenLayers.Projection("EPSG:900913");
        //первоначальные координаты
        var center = new OpenLayers.LonLat(60.6340143032,56.8659060093).transform(epsg4326, epsg900913);
        var center2 = new OpenLayers.LonLat(60.6320143032,56.8259060093).transform(epsg4326, epsg900913);
        var epsilon = 0.0001;
        //точки
        var points = [
            new OpenLayers.Geometry.Point(center.lon, center.lat),
            new OpenLayers.Geometry.Point(center.lon+1000, center.lat),
            new OpenLayers.Geometry.Point(center.lon, center.lat+1000)
        	      ];

        var points2 = [
            new OpenLayers.Geometry.Point(center2.lon +8, center2.lat + 9),
            new OpenLayers.Geometry.Point(center2.lon+1000, center2.lat),
            new OpenLayers.Geometry.Point(center2.lon + 9, center2.lat+900)
        	      ];

        //стиль к точнам и линиям
        var styles = new OpenLayers.StyleMap({
            "default": new OpenLayers.Style(null, {
                rules: [
                    new OpenLayers.Rule({
                        //объект выделения линии
                        symbolizer: {
                         "Line": {
                                //толщина линии
                                strokeWidth: 20,
                                //прозрачность линии
                                strokeOpacity: 0.5,
                                //цвет линии
                                strokeColor: "#0000FF"
                            }
                        }
                    })
                ]
            }),        });
        //Создание слоёв
        var base = new OpenLayers.Layer.OSM();
        var vectors_lns = new OpenLayers.Layer.Vector("Vector Layer (lines)",  {styleMap: styles});


	map.addLayers([base, vectors_lns]);

        //Добавление объектов в линейный слой
	var feture_d 	= [new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points),{attr1: "DR1"})];
	var feture_d2 	= [new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points2),{attr1: "DR2"})];

	map.addControl(new OpenLayers.Control.SelectFeature(
    		vectors_lns,
		    {
		      hover: true,
		      onSelect: function(f) {
		        alert(f.attributes.attr1);
		      },
		      autoActivate: true
		    })
		  );
 

        vectors_lns.addFeatures(feture_d);
        vectors_lns.addFeatures(feture_d2);
        map.setCenter(center, 12);
    }
</script>

</head>
<body onload="init()">
    <div id="mapdiv"></div>
</body>
</html>


Re: Добавить текст на карту

Добавлено: 23 май 2012, 13:24
Denis Rykov

Re: OpenLayers: Добавить текст на карту

Добавлено: 30 май 2012, 20:19
stepan_borovikov
Рабочий код:

Код: Выделить всё

        var epsg4326 = new OpenLayers.Projection("EPSG:4326");
        var epsg900913 = new OpenLayers.Projection("EPSG:900913");

           var pointFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(60.6340143032,56.8659060093).transform(epsg4326, epsg900913));
            pointFeature.attributes = {
                name: "12км",
                favColor: 'red',
                FF: '34px'
            };

        var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
                styleMap: new OpenLayers.StyleMap({'default':{
                    label : "${name}",
                    
                    fontColor: "${favColor}",
                    fontSize: "${FF}",
                    labelOutlineWidth: 3
                }})
            });

    vectorLayer.addFeatures(pointFeature);
    map.addLayer(vectorLayer);
Благодарю.