Получение всплывающего окна с информацией об атрибутах из WMS - PullRequest
Новая
       93

Получение всплывающего окна с информацией об атрибутах из WMS

0 голосов
/ 10 декабря 2018

Я новичок в javascript и веб-картографии, и после поиска в интернете мне все еще не ясно.

Я строю основную веб-карту с помощью листовки.У меня есть три слоя (улицы, штаты и информация об улицах), которые я загрузил в Geoserver в виде шейп-файлов.Мой скрипт показывает их правильно, и я могу показать и скрыть их с помощью флажка.

Теперь я хочу иметь возможность щелкнуть любую функцию на карте и получить всплывающее окно с информацией из определенного поля из этой единственной функции.Например, нажав на линию улицы и получив ее название, которое хранится в шейп-файле в Geoserver.Кроме того, было бы замечательно, если бы вы могли получать данные только в том случае, если шейп-файл был показан, а не скрыт.

Я читал, что вы можете сделать это с помощью GetFeatureInfo, но, поскольку у меня все еще нет большого опыта работы сJavaScript, я понятия не имею, как интегрировать это в мой скрипт.Я пытался несколько раз, и все, что я получаю, это белое окно, которое связано с неправильным способом использования GetFeatureInfo.Как интегрировать этот инструмент?

Это мой сценарий: 

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
    <title>Aguascalientes</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.js" ></script>

<style>
    #map { 
    width: 100%;
    height: 850px;
    box-shadow: 5px 5px 5px #888;}
</style>
</head>
    <body>
        <div id = "map"></div>
<script>

var map = L.map('map').
setView([21.885256, -102.291568],
15);

var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

var muni = L.tileLayer.wms("http://localhost:8080/geoserver/Visor/wms?", {
    layers: 'muni4326',
    format: 'image/png',
    transparent: true,
    opacity:1,
    version: '1.1.0',
    attribution: "Geoserver"
    }).addTo(map)

var vialidad = L.tileLayer.wms("http://localhost:8080/geoserver/Visor/wms?", {
    layers: '01vialid4326',
    format: 'image/png',
    transparent: true,
    opacity:1,
    version: '1.1.0',
    attribution: "Geoserver"
    }).addTo(map)

var numext = L.tileLayer.wms("http://localhost:8080/geoserver/Visor/wms?", {
    layers: '01numext4326',
    format: 'image/png',
    transparent: true,
    opacity:1,
    version: '1.1.0',
    attribution: "Geoserver"
    }).addTo(map)


var baseLayers = {
"Base:": osm  
};

var overlayers = {
"States": muni,
"Streets": vialidad, 
"Street info": numext
};

L.control.layers(baseLayers, overlayers,{collapsed:true}).addTo(map);

</script>
</body> 
</html>

Заранее спасибо

РЕДАКТИРОВАТЬ :

Я пытался понять, как это использовать: https://gist.github.com/rclark/6908938

Я создал файл с именем L.TileLayer.BetterWMS.js и напрямую вставил скрипт, найденный в github, и он не работает.Я предполагаю, что мне нужно изменить некоторые части сценария, но я не знаю что.Кроме того, после создания этого файла я назвал его, как показано в этом примере: 

var map = L.map('map').
setView([21.885256, -102.291568],
15);

var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

var muni = L.tileLayer.BetterWMS("http://localhost:8080/geoserver/Visor/wms?", {
    layers: 'muni4326',
    format: 'image/png',
    transparent: true,
    opacity:1,
    version: '1.1.0',
    attribution: "Geoserver"
    }).addTo(map)

var vialidad = L.tileLayer.BetterWMS("http://localhost:8080/geoserver/Visor/wms?", {
    layers: '01vialid4326',
    format: 'image/png',
    transparent: true,
    opacity:1,
    version: '1.1.0',
    attribution: "Geoserver"
    }).addTo(map)

var numext = L.tileLayer.BetterWMS("http://localhost:8080/geoserver/Visor/wms?", {
    layers: '01numext4326',
    format: 'image/png',
    transparent: true,
    opacity:1,
    version: '1.1.0',
    attribution: "Geoserver"
    }).addTo(map)


var baseLayers = {
"Base:": osm  
};

var overlayers = {
"States": muni,
"Streets": vialidad, 
"Street info": numext
};

L.control.layers(baseLayers, overlayers,{collapsed:true}).addTo(map);

</script>

Это все еще не работает.Я предполагаю, что я делаю ошибку в чем-то очень простом, но я не могу понять, где.

РЕДАКТИРОВАТЬ 2:

Чтобы быть более ясным, когда яиспользуйте обычный L.TileLayer.wms(url...), слои отлично отображаются на карте, но, очевидно, они не выполняют GetFeatureInfo, так как я не ссылаюсь на L.TileLayer.BetterWMS.js.Как только я изменяю его на L.TileLayer.BetterWMS(url...), слои перестают отображаться на карте, и появляется сообщение об ошибке: Uncaught TypeError: this.callInitHooks is not a function at Function.e [as BetterWMS] (leaflet.js:5) at leaflet.html:32.

Я проверил ссылки, которые вы, ребята, разместили в разделе комментариев, и они не кажутсячтобы решить эту ошибку.

Это полный сценарий, который дает мне ошибку: 

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
    <title>Visor aguascalientes</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.js" ></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="L.TileLayer.BetterWMS.js"></script>    
<style>
    #map { 
    width: 100%;
    height: 850px;
    box-shadow: 5px 5px 5px #888;}
</style>
</head>
    <body>
        <div id = "map"></div>
<script>


var map = L.map('map').
setView([21.885256, -102.291568],
15);

var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

var muni = L.TileLayer.BetterWMS("http://localhost:8080/geoserver/Visor/wms?", {
    layers: 'muni4326',
    format: 'image/png',
    transparent: true,
    opacity:1,
    version: '1.1.0',
    attribution: "Geoserver"
    }).addTo(map)

var vialidad = L.TileLayer.BetterWMS("http://localhost:8080/geoserver/Visor/wms?", {
    layers: '01vialid4326',
    format: 'image/png',
    transparent: true,
    opacity:1,
    version: '1.1.0',
    attribution: "Geoserver"
    }).addTo(map)

var numext = L.TileLayer.BetterWMS("http://localhost:8080/geoserver/Visor/wms?", {
    layers: '01numext4326',
    format: 'image/png',
    transparent: true,
    opacity:1,
    version: '1.1.0',
    attribution: "Geoserver"
    }).addTo(map)


var baseLayers = {
"Base:": osm  
};

var overlayers = {
"Municipio": muni,
"Calles": vialidad, 
"Portales": numext
};

L.control.layers(baseLayers, overlayers,{collapsed:true}).addTo(map);

</script>
</body> 
</html>
...