单击它时如何获取 wkt 多边形的所有信息?
how to get all information of wkt polygon when i click on it?
我以 json 格式从 MSsql server 2012 获取数据,我只获取 WKT 字符串以使用 ol.format.WKT() 转换为在地图上显示。
我想在弹出窗口中单击时显示多边形的 ID 和名称。
我如何识别我点击的是哪个多边形?
我如何知道我在地图中单击了哪个多边形并获取该多边形的数据?
for (var i = 0; i < geometries.length; i++) {
var feature = wktReader.readFeature(geometries[i].GeomCol1.Geometry.WellKnownText);
feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
if (feature.getGeometry().getType() == 'Polygon') {
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}));
featureCollection.push(feature);
}
}
这是我如何获得 wkt 字符串的一部分。
这些是我显示的多边形,我想显示一个弹出窗口,其中包含我单击的多边形的信息
这是我如何在我的 MSsql 服务器中存储空间数据的图片
谢谢
forEachFeatureAtPixel
(api doc) 可以让你得到某个位置的所有特征。不可否认,它使用起来可能会造成混淆。您传递给该函数的回调会为每一层调用。如果回调 returns 为真值,它会停止,然后 forEachFeatureAtPixel returns 无论您的回调返回什么。这使得它非常适合 select 特定功能。
var count = 2000;
var features = new Array(count);
var e = 4500000;
for (var i = 0; i < count; ++i) {
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
features[i] = new ol.Feature({
geometry: new ol.geom.Point(coordinates),
myHappyAttribute: ('you are beautiful ' + i)
});
}
var source = new ol.source.Vector({
features: features
});
var layer = new ol.layer.Vector({source: source});
const view = new ol.View({
center: [2500000, 0], zoom: 5
});
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
target: 'map',
view
});
map.on('singleclick', function(evt) {
const pixel = map.getEventPixel(evt.originalEvent);
const feature = map.forEachFeatureAtPixel(
pixel,
someFeature => someFeature, // return first element
{
hitTolerance: 2 // how far off the click can be
}
);
if (feature) {
const attr = feature.get('myHappyAttribute');
console.log('clicked on feature with attr:', attr);
} else {
console.log('not clicked on a feature');
}
});
<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.5/build/ol-debug.js"></script>
<div id="map" class="map"></div>
我以 json 格式从 MSsql server 2012 获取数据,我只获取 WKT 字符串以使用 ol.format.WKT() 转换为在地图上显示。
我想在弹出窗口中单击时显示多边形的 ID 和名称。 我如何识别我点击的是哪个多边形?
我如何知道我在地图中单击了哪个多边形并获取该多边形的数据?
for (var i = 0; i < geometries.length; i++) {
var feature = wktReader.readFeature(geometries[i].GeomCol1.Geometry.WellKnownText);
feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
if (feature.getGeometry().getType() == 'Polygon') {
feature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}));
featureCollection.push(feature);
}
}
这是我如何获得 wkt 字符串的一部分。
这是我如何在我的 MSsql 服务器中存储空间数据的图片
谢谢
forEachFeatureAtPixel
(api doc) 可以让你得到某个位置的所有特征。不可否认,它使用起来可能会造成混淆。您传递给该函数的回调会为每一层调用。如果回调 returns 为真值,它会停止,然后 forEachFeatureAtPixel returns 无论您的回调返回什么。这使得它非常适合 select 特定功能。
var count = 2000;
var features = new Array(count);
var e = 4500000;
for (var i = 0; i < count; ++i) {
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
features[i] = new ol.Feature({
geometry: new ol.geom.Point(coordinates),
myHappyAttribute: ('you are beautiful ' + i)
});
}
var source = new ol.source.Vector({
features: features
});
var layer = new ol.layer.Vector({source: source});
const view = new ol.View({
center: [2500000, 0], zoom: 5
});
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
target: 'map',
view
});
map.on('singleclick', function(evt) {
const pixel = map.getEventPixel(evt.originalEvent);
const feature = map.forEachFeatureAtPixel(
pixel,
someFeature => someFeature, // return first element
{
hitTolerance: 2 // how far off the click can be
}
);
if (feature) {
const attr = feature.get('myHappyAttribute');
console.log('clicked on feature with attr:', attr);
} else {
console.log('not clicked on a feature');
}
});
<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.5/build/ol-debug.js"></script>
<div id="map" class="map"></div>