Question

我是JavaScript和Web映射的新手，在通过互联网搜索后，对我来说仍然不清楚。

我正在使用传单构建基本的网络地图。我将三层（街道，州和街道信息）作为shapefile上传到Geoserver。我的脚本可以正确显示它们，并且可以使用复选框控件显示和隐藏它们。

现在，我希望能够单击地图上的任何特征，并从该单个特征的某个字段中弹出带有信息的弹出窗口。例如，单击一条街道线并获取其名称，该名称存储在Geoserver的shapefile中。另外，如果仅在shapefile显示而不是隐藏的情况下获取数据，那就太好了。

我读到您可以使用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...)时，图层在地图上完美显示，但是显然，由于我不是在指L.TileLayer.BetterWMS，所以它们没有执行GetFeatureInfo。 .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>

从WMS获取带有属性信息的弹出窗口

0 个答案: