我尝试使用openlayers 3 javascript借助示例popupinfo
获取地图上的功能信息
var mmi = new ol.layer.Tile({
source: new ol.source.OSM()
});
var one = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'cite:abc'},
format: new ol.format.GeoJSON(),
ratio: 1,
serverType: 'geoserver'
})
});
var map = new ol.Map({
layers: [mmi,one],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([73.6608, 29.8820]),
zoom: 8
})
});
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, one)
{
return feature;
})
});
<link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
<div id="map" class="map"></div>
<div id="map" class="information"></div>
在我的地图点击事件中,功能值无效。如何在点击它时获取功能的值。
答案 0 :(得分:1)
您可以获得以下功能信息:
<form>
<input type="checkbox" id="product1" name="product1" value="12">
<input type="checkbox" id="product2" name="product1" value="13">
<input type="checkbox" id="product3" name="product1" value="14">
<button type="submit">Subscribe</button>
</form>
示例代码:
map.on("singleclick", function (evt) {
this.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
console.log(feature.get("<property_key>"));
});
});
&#13;
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
'outputFormat=application/json&srsname=EPSG:3857&' +
'bbox=' + extent.join(',') + ',EPSG:3857';
},
strategy: ol.loadingstrategy.bbox
});
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
var raster = new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Aerial',
key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
})
});
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: [-8908887.277395891, 5381918.072437216],
maxZoom: 19,
zoom: 12
})
});
map.on("singleclick", function (evt) {
this.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
alert("Osm Id: " + feature.get("osm_id") + "\nLand Use: " + feature.get("landuse"));
});
});
&#13;
答案 1 :(得分:1)
您正在研究用例的错误示例,在使用WMS时需要getFeatureInfo call。
map.on('click', function(evt) {
var url = wms_layer.getSource().getGetFeatureInfoUrl(
evt.coordinate, viewResolution, viewProjection,
{'INFO_FORMAT': 'text/html',
'propertyName': 'formal_en'});
if (url) {
var parser = new ol.format.GeoJSON();
$.ajax({
url: url,
}).then(function(response) {
container.innerHTML = response;
} else {
container.innerHTML = ' ';
}
});
}
});