Как сделать ссылки (метки) на карте GeoServer?

[Prince660]

Помогите начинающему.. Очень надо!
Есть геосервер на котором успешно стоят и отображаются карты.

Необходимо реализовать ссылки прямо на карте по которым будет выдаваться HTML страничка. Очень хотелось бы сделать что-то похожее на карты гугла, где по нажатию на метку всплывает такое "облако" с текстом ссылками и картинками.
Пытался реализовать это с помошью использования KML файлов но не хватило мозгов. Кто знает как можно сделать такую радость? Желательно в подробностях, так как много в чём ещё не разобрался.

[valeria]

Ну вам надо сначала чётко поставить задачи что хотите по порядку а потом реализовывать по очереди. метки можно сделать через точечные вектора , а облако это popup . на форуме про это есть . поисчите.

[Prince660]

Искал по форуму, нашёл очень много всего, но ничего из того что мне бы помогло. Можете точные ссылки дать?

Случайно наткнулся на такой пример: http://leaflet.cloudmade.com/examples/l ... ntrol.html
Хочу использовать его но не хватает мне знаний Ява чтобы эти маркеры сделать на карте опенлеера, может кто подскажет? Или как в этом коде вставить свою карту? Они ведь как-то подругому в коде адрес на карту указывают.

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

	<script>
		var littletonMarker = new L.Marker(new L.LatLng(45, 34.15)).bindPopup('Пример 0'),
			denverMarker = new L.Marker(new L.LatLng(45, 34.38)).bindPopup('Пример 1'),
			auroraMarker = new L.Marker(new L.LatLng(45.3, 34.1)).bindPopup('Пример 2'),
			goldenMarker = new L.Marker(new L.LatLng(44.86, 33.95)).bindPopup('Пример 3');

			var citiesLayer = new L.LayerGroup();

			citiesLayer.addLayer(littletonMarker);
			citiesLayer.addLayer(denverMarker);
			citiesLayer.addLayer(auroraMarker);
			citiesLayer.addLayer(goldenMarker);

	//Интересует следующий кусок кода:
	var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
		cloudmadeOptions = {maxZoom: 18, attribution: cloudmadeAttribution},
		cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png'; //адрес карты (хочу изменить код так чтобы вставить свой слой wms)

	var minimal = new L.TileLayer(cloudmadeUrl, cloudmadeOptions, {styleId: 22677});      //описание стилей
			   
	var map = new L.Map('map', {center: new L.LatLng(45, 34.15), zoom: 9, layers: [minimal, citiesLayer]}); //центр, зум карты и слои

	var baseMaps = {	  //базовая карта
		    "Minimal": minimal,
		};
		var overlayMaps = {	//подгужаемые слои
		    "Cities": citiesLayer
   
		};
		layersControl = new L.Control.Layers(baseMaps, overlayMaps);	//меню
		map.addControl(layersControl);				//меню

	</script>

[Denis Rykov]

Ничего сложного. Можно сделать по разному. Если у вас слой векторный, то можно при клике на фичу выводить атрибутику в попап (предварительно загрузив ссылки в эту атрибутику). Если же вы опубликовали слой по WMS, то делаете запрос GetFeatureInfo, в котором запрашиваете, например, значение поля url источника данных (тоже предварительно создав и загрузив туда ссылки), получаете ответ и выводите его. И еще, ява - это Java, а OL - это JavaScript.

[Prince660]

Использую слои шейповские. Как у них атрибутику в попап вывлдить?

[Denis Rykov]

Шейп опубликован по WMS?

[Prince660]

Да

[Denis Rykov]

Я же написал, в этом случае воспользуйтесь GetFeatureInfo, ссылку на инструкцию привёл выше (e.features в данном примере - список объектов, обратиться, например, к атрибуту attr_name объекта с индексом 1 можно так: e.features[1].attributes['attr_name']).

[Prince660]

Сделал метки другим способом, прописывал координаты прямо в скрипте, но это очень неудобно, количество объектов слишком большое. Решил вернуться к способу получения атребутов из шейпа, но что-то ничего у меня клеется. Карта просто перестаёт загружаться. Дайте ссылки на реальные, но простые примеры или помогите с кодом:

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

   <script type="text/javascript">
            function init(){

	    var bounds = new OpenLayers.Bounds(3496142.253334, 5424071.9418, 4182852.515325, 5779351.249206);

               var options = {
                    controls: [],
                    maxExtent: bounds,
                    maxResolution: 1917.100827543186,
                    projection: "EPSG:900913",
                    units: 'degrees'
                };

            var map = new OpenLayers.Map('map', options);


	    var Base_wms = new OpenLayers.Layer.WMS( 
                "Карта", 
                "http://82.146.62.154:8080/geoserver/wms?",
                {layers: 'Crimea'}, 
		{maxResolution: 'auto',
		numZoomLevels:10,
		transitionEffect:'resize',
		buffer: 0,
		});


            var wms_1 = new OpenLayers.Layer.WMS( 
		"Отели",
                "http://82.146.62.154:8080/geoserver/wms?",
                {layers: "hotel",
                 transparent: "true",
		format: "image/png" 
		});

	    var wms_2 = new OpenLayers.Layer.WMS( 
		"Рестораны",
                "http://82.146.62.154:8080/geoserver/wms?",
                {layers: "Restoran",
                 transparent: "true",
		format: "image/png" 
		});

            wms_1.setVisibility(true);
            wms_2.setVisibility(false);

            map.addLayers([Base_wms, wms_1, wms_2]);

// Создание контрола WMSGetFeatureInfo
var click_ctrl = new OpenLayers.Control.WMSGetFeatureInfo({
    url: "http://82.146.62.154:8080/geoserver/wms?",
    layers: [hotel],
    queryVisible: true,
    infoFormat: 'application/vnd.ogc.gml',
    maxFeatures: 50,
    autoActivate: true,
    // Vendor-specific параметр, используемый в MapServer (радиус поиска объектов в пикселях)
    vendorParams: {radius: 10},
    eventListeners: {'getfeatureinfo': function(e) {
            // Текстовое представление ответа сервера
            console.log(e.text);
             // Координаты клика
            console.log(e.xy);
             // Список объектов OpenLayers.Feature.Vector, содержащих в атрибутике информацию, полученную с сервера
            console.log(e.features);
         }
    }
});
 
// Добавляем контрол на карту
map.addControl(click_ctrl);

             map.addControl(new OpenLayers.Control.PanZoomBar());
                map.addControl(new OpenLayers.Control.MouseDefaults());
                map.addControl(new OpenLayers.Control.KeyboardDefaults());
                map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':true}));
//              map.addControl(new OpenLayers.Control.MousePosition());
                map.addControl(new OpenLayers.Control.OverviewMap());
//	map.addControl(new OpenLayers.Control.Permalink('permalink'));

            if (!map.getCenter())
                map.zoomToMaxExtent();
        }
      
    </script>

[Denis Rykov]

Вы отладчиком (firebug) умеете пользоваться? Если нет, то дальше будет очень сложно. Сразу же в консоль пишет в чем ошибка. Вместо:

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

layers: [hotel]

нужно писать в вашем случае:

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

layers: [wms_1 ]

[Prince660]

Нет, с отладчиком никогда не работал.
Исправил эту ошибку, подключил прокси скрипт (он вроде работает, когда его адрес набираю загружается страница опенлаерс) и прописал в нём свой IP с портом, вставил в страницу ссылку на скрипт.
Теперь карта нормально отображается но при нажатии на маркеры браузер пытается что-то подгрузить н оне может..
опять же код:

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

<script type="text/javascript">

OpenLayers.ProxyHost = "http://82.146.62.154/cgi-bin/proxy.cgi?url=";

            function init(){

	    var bounds = new OpenLayers.Bounds(3496142.253334, 5424071.9418, 4182852.515325, 5779351.249206);

               var options = {
                    controls: [],
                    maxExtent: bounds,
                    maxResolution: 1917.100827543186,
                    projection: "EPSG:900913",
                    units: 'degrees'
                };

            var map = new OpenLayers.Map('map', options);


	    var Base_wms = new OpenLayers.Layer.WMS( 
                "Карта", 
                "http://82.146.62.154:8080/geoserver/wms?",
                {layers: 'Crimea'}, 
		{maxResolution: 'auto',
		numZoomLevels:10,
		transitionEffect:'resize',
		buffer: 0,
		});


            var wms_1 = new OpenLayers.Layer.WMS( 
		"Отели",
                "http://82.146.62.154:8080/geoserver/wms?",
                {layers: "hotel",
                 transparent: "true",
		format: "image/png" 
		});

	    var wms_2 = new OpenLayers.Layer.WMS( 
		"Рестораны",
                "http://82.146.62.154:8080/geoserver/wms?",
                {layers: "Restoran",
                 transparent: "true",
		format: "image/png" 
		});

            wms_1.setVisibility(true);
            wms_2.setVisibility(false);

            map.addLayers([Base_wms, wms_1, wms_2]);




// Создание контрола WMSGetFeatureInfo
var click_ctrl = new OpenLayers.Control.WMSGetFeatureInfo({
    url: "http://82.146.62.154:8080/geoserver/wms?",
    layers: [wms_1],
    queryVisible: true,
    infoFormat: 'application/vnd.ogc.gml',
    maxFeatures: 50,
    autoActivate: true,
    // Vendor-specific параметр, используемый в MapServer (радиус поиска объектов в пикселях)
    vendorParams: {radius: 10},
    eventListeners: {'getfeatureinfo': function(e) {
            // Текстовое представление ответа сервера
            console.log(e.text);
             // Координаты клика
            console.log(e.xy);
             // Список объектов OpenLayers.Feature.Vector, содержащих в атрибутике информацию, полученную с сервера
            console.log(e.features);
         }
    }
});
 
// Добавляем контрол на карту
map.addControl(click_ctrl);


             map.addControl(new OpenLayers.Control.PanZoomBar());
                map.addControl(new OpenLayers.Control.MouseDefaults());
                map.addControl(new OpenLayers.Control.KeyboardDefaults());
                map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':true}));
//              map.addControl(new OpenLayers.Control.MousePosition());
                map.addControl(new OpenLayers.Control.OverviewMap());
//		map.addControl(new OpenLayers.Control.Permalink('permalink'));

            if (!map.getCenter())
                map.zoomToMaxExtent();
        }
      
    </script>

[Denis Rykov]

А что вы ожидаете он должен выполнить при нажатии на маркер? Явно же в коде написано console.log(), то есть скрипт пишет лог в консоль.

[Prince660]

А можете какой-нибудь рабочий пример показать, где по нажатию на объект из его атрибутов берётся ссылка и поней

[denny123]

ссылку без скриптов не разместить в описании объектов получается?