Openlayers и ссылки на карте

StaishiKa · Сообщение **StaishiKa** » 29 июн 2012, 07:43

Доброе время суток. Возникла необходимость создать интерактивную карту(что я успешно сделала с помощью openlayers), т.е. есть карта, её можно приближать/удалять. Далее следующий пункт: на карте есть острова, нужно на каждом острове поместить по несколько ссылок и чтобы при нажатии на каждую их них происходил переход на нужную страницу. С этим пунктом пока заминка, дело в том, что карту у меня сделана через tiles(т.е. нарезаны картинки разного размера), все они в формате png. Теперь вот никак не могу найти как сюда прикрутить ссылки и вообще возможно ли это с данной реализацией карты?

Сообщение **Denis Rykov** » 29 июн 2012, 11:18

А ссылок много нужно?

StaishiKa · Сообщение **StaishiKa** » 29 июн 2012, 12:05

Denis Rykov, штук 10 на каждый остров

Сообщение **Denis Rykov** » 29 июн 2012, 12:13

Нужно общее количество. Если их немного - создайте точечный слой, в атрибутике пропишите ссылки и опубликуйте его как векторный слой в OpenLayers. Формат может быть разный.

StaishiKa · Сообщение **StaishiKa** » 29 июн 2012, 12:19

Denis Rykov, дело в том что пока ссылок будет штук 30, но со временем это количество может возрасти... за совет спасибо, попробую сделать. Нету ли у вас ссылки с примером, так как я много времени гуглила, но пока безрезультатно...

Сообщение **Denis Rykov** » 29 июн 2012, 12:46

Создайте, например, в QGIS точечный векторный слой - shapefile, содержащий 2 поля - id и url, геометрии будут располагаться в тех местах, куда должны будут помещены ссылки. Затем сохраните shapefile в формате GeoJSON и подключайте его к OL.

StaishiKa · Сообщение **StaishiKa** » 30 июн 2012, 13:19

Denis Rykov, спасибо, буду пробовать

StaishiKa · Сообщение **StaishiKa** » 03 июл 2012, 03:59

Denis Rykov, не могли бы вы подсказать как мне вывести свойство properties, т.е. у меня сейчас так выглядит geoJSON:

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

var geojsonData =  {
"type": "FeatureCollection",
                                                                                
"features": [
{ "type": "Feature", "id": -6, "properties": { "id": 1, "title": "title1", "url": "url1" }, "geometry": { "type": "Point", "coordinates": [ 1807.2216216216216, -1928.9945945945947 ] } }
,
{ "type": "Feature", "id": -7, "properties": { "id": 2, "title": "title2", "url": "url2" }, "geometry": { "type": "Point", "coordinates": [ 1978.8108108108104, -1923.4594594594591 ] } }
,
{ "type": "Feature", "id": -8, "properties": { "id": 3, "title": "title3", "url": "url3" }, "geometry": { "type": "Point", "coordinates": [ 1790.6162162162159, -2083.9783783783782 ] } }]
}

На карту я его "ложу" так:

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

var placesLayer = new OpenLayers.Layer.Vector();
var geojsonParser = new OpenLayers.Format.GeoJSON();
placesLayer.addFeatures(geojsonParser.read(geojsonData));
map.addLayer(placesLayer);

Но на карте появляются только точки на этих местах. Как мне вывести ссылки? Т.е. как добраться до properties?

Сообщение **Denis Rykov** » 03 июл 2012, 06:05

Могу предложить вот такой вариант:

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



<html>

<head>

<title>Links example</title>

<script src="http://openlayers.org/dev/OpenLayers.js"></script>

<script type="text/javascript">

    

    OpenLayers.Util.extend(

        OpenLayers.Feature.Vector.style.default,

        {

            label: "${title}",

            fontSize: '15',

            fontFamily: 'arial',

            pointRadius: 30

        }

    );



    OpenLayers.Util.extend(

        OpenLayers.Feature.Vector.style.select,

        {

            pointRadius: 30

        }

    );



    var map,

        geojson = new OpenLayers.Format.GeoJSON(),

        geojsonData =  {

        "type": "FeatureCollection",

                                                                                        

        "features": [

        { "type": "Feature", "id": -6, "properties": { "id": 1, "title": "OSGeo", "url": "http://www.osgeo.org/" }, "geometry": { "type": "Point", "coordinates": [ 5000000, 8500000 ] } }

        ,

        { "type": "Feature", "id": -7, "properties": { "id": 2, "title": "GIS.SE", "url": "http://gis.stackexchange.com/" }, "geometry": { "type": "Point", "coordinates": [ 3000000, 8000000 ] } }

        ,

        { "type": "Feature", "id": -8, "properties": { "id": 3, "title": "GIS-LAB", "url": "http://gis-lab.info" }, "geometry": { "type": "Point", "coordinates": [ 4000000, 9000000 ] } }]

        };



    function onselect(evt) {

       window.open(evt.feature.attributes.url);

    }



    function init(){

        map = new OpenLayers.Map({

            div: "map",

            projection: "EPSG:900913",

            layers: [

                new OpenLayers.Layer.OSM(null, null, {isBaseLayer: true, opacity: 0.7})

            ],

            zoom: 5,

            center: [4000000, 9000000]

        });



        vector = new OpenLayers.Layer.Vector();

        map.addLayer(vector);

        vector.addFeatures(geojson.read(geojsonData));



        select = new OpenLayers.Control.SelectFeature(vector, {autoActivate: true});

        map.addControl(select);

        vector.events.register("featureselected", null, onselect);



    }

</script>

</head>

<body onload="init()">

    <div id="map"></div>

</body>

</html>

StaishiKa · Сообщение **StaishiKa** » 03 июл 2012, 09:16

Почему то с моей картой не отрисовываются лейблы ...

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

function init(){
      var options = {
	            controls: [],
		        maxExtent: new OpenLayers.Bounds(  0.0, -4096.0, 4096.0, 0.0 ),
		        maxResolution: 16.000000,
		        numZoomLevels: 5
		    };
	        map = new OpenLayers.Map('map', options);
	
		    var layer = new OpenLayers.Layer.TMS( "TMS Layer","",
		        {  url: '', serviceVersion: '.', layername: '.', alpha: true,
					type: 'png', getURL: overlay_getTileURL 
				});
		    map.addLayer(layer);
			map.zoomToExtent( mapBounds );	//увеличить по границам
		
	        map.addControl(new OpenLayers.Control.PanZoomBar());
	        map.addControl(new OpenLayers.Control.MousePosition());
	        map.addControl(new OpenLayers.Control.MouseDefaults());
	        map.addControl(new OpenLayers.Control.KeyboardDefaults());
			
			var geojson = new OpenLayers.Format.GeoJSON(),
			geojsonData =  {
				"type": "FeatureCollection",
																								
				"features": [
				{ "type": "Feature", "id": -6, "properties": { "id": 1, "title": "OSGeo", "url": "http://www.osgeo.org/" }, 
					"geometry": { "type": "Point", "coordinates": [ 5000000, 8500000 ] } }
				,
				{ "type": "Feature", "id": -7, "properties": { "id": 2, "title": "GIS.SE", "url": "http://gis.stackexchange.com/" }, 
					"geometry": { "type": "Point", "coordinates": [ 3000000, 8000000 ] } }
				,
				{ "type": "Feature", "id": -8, "properties": { "id": 3, "title": "GIS-LAB", "url": "http://gis-lab.info" }, 
					"geometry": { "type": "Point", "coordinates": [ 4000000, 9000000 ] } }]
				};
			
			vector = new OpenLayers.Layer.Vector();
			map.addLayer(vector);
			vector.addFeatures(geojson.read(geojsonData));

			select = new OpenLayers.Control.SelectFeature(vector, {autoActivate: true});
			map.addControl(select);
			vector.events.register("featureselected", null, onselect);		
	    }

Сообщение **Denis Rykov** » 03 июл 2012, 09:46

Не знаю почему не работает, какую-то ошибку выкидывает? Вот мой работающий пример.

StaishiKa · Сообщение **StaishiKa** » 03 июл 2012, 10:43

Поправила координаты, поинты показываются, но лэйблов нет. Смотрю исходный текст страницы, там слоя с лэйлблами нет... Приведу код, что ещё делать, не знаю.

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

var map;
		var mapBounds = new OpenLayers.Bounds( 0.0, -4096.0, 4096.0, 0.0);// границы(лево, низ, право, верх)
		var mapMinZoom = 0;
		var mapMaxZoom = 4;

		// avoid pink tiles
		OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; // How many times should we try to reload an image before giving up? 
		OpenLayers.Util.onImageLoadErrorColor = "transparent"; //The color tiles with load errors will turn.
		
		OpenLayers.Util.extend(
			OpenLayers.Feature.Vector.style.default,
			{
				label: "${title}",
				fontSize: '15',
				fontFamily: 'arial',
				pointRadius: 3
			}
		);

		OpenLayers.Util.extend(
			OpenLayers.Feature.Vector.style.select,
			{
				pointRadius: 3
			}
		);
		
		function onselect(evt) {
		   window.open(evt.feature.attributes.url);
		}
		
		function init(){
	        var options = {
	            controls: [],
		        maxExtent: new OpenLayers.Bounds(  0.0, -4096.0, 4096.0, 0.0 ),
		        maxResolution: 16.000000,
		        numZoomLevels: 5
		    };
	        map = new OpenLayers.Map('map', options);
	
		    var layer = new OpenLayers.Layer.TMS( "TMS Layer","",
		        {  url: '', serviceVersion: '.', layername: '.', alpha: true,
					type: 'png', getURL: overlay_getTileURL 
				});
		    map.addLayer(layer);
			map.zoomToExtent( mapBounds );	//увеличить по границам
		
	        map.addControl(new OpenLayers.Control.PanZoomBar());
	        map.addControl(new OpenLayers.Control.MousePosition());
	        map.addControl(new OpenLayers.Control.MouseDefaults());
	        map.addControl(new OpenLayers.Control.KeyboardDefaults());
			
			var geojson = new OpenLayers.Format.GeoJSON(),
			geojsonData =  {
				"type": "FeatureCollection",
																								
				"features": [
				{ "type": "Feature", "id": -6, "properties": { "id": 1, "title": "OSGeo", "url": "http://www.osgeo.org/" }, 
					"geometry": { "type": "Point", "coordinates": [ 1807.2216216216216, -1928.9945945945947 ] } }
				,
				{ "type": "Feature", "id": -7, "properties": { "id": 2, "title": "GIS.SE", "url": "http://gis.stackexchange.com/" }, 
					"geometry": { "type": "Point", "coordinates": [ 1978.8108108108104, -1923.4594594594591 ] } }
				,
				{ "type": "Feature", "id": -8, "properties": { "id": 3, "title": "GIS-LAB", "url": "http://gis-lab.info" }, 
					"geometry": { "type": "Point", "coordinates": [ 1790.6162162162159, -2083.9783783783782 ] } }]
				};
			
			vector = new OpenLayers.Layer.Vector();
			map.addLayer(vector);
			vector.addFeatures(geojson.read(geojsonData));

			select = new OpenLayers.Control.SelectFeature(vector, {autoActivate: true});
			map.addControl(select);
			vector.events.register("featureselected", null, onselect);
		
	    }
			
	    function overlay_getTileURL(bounds) {
	        var res = this.map.getResolution();
	        var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
	        var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
	        var z = this.map.getZoom();
			if (x >= 0 && y >= 0) {
		        return this.url + z + "/" + x + "/" + y + "." + this.type;				
			} else {
	            return "http://www.maptiler.org/img/none.png";
			}
		}

Сообщение **Denis Rykov** » 03 июл 2012, 14:04

Обновил свой пример, добавив тайловую подложку как в вашем случае, всё работает. Смотрите, разбирайтесь, что не понятно - спрашивайте.

StaishiKa · Сообщение **StaishiKa** » 04 июл 2012, 10:24

спасибо. Уже и при клике на пойнты открываются ссылки(после того как я добавила select.activate();), но лэйблы так и не рисует ) весело ))
зы. не может ли быть дело в версии openlayers...

Сообщение **Denis Rykov** » 04 июл 2012, 18:42

Зачем activate, если есть autoActivate. Ваш пример где то можно посмотреть? По идее не должно быть связано с версией, испоьзуйте последнюю как в моем примере.

[ Сообщение с мобильного устройства ]

Форумы GIS-Lab.info

Openlayers и ссылки на карте

Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Re: Openlayers и ссылки на карте

Кто сейчас на конференции