代码之家 › 专栏 › 技术社区 › Edit Axha

当我点击wkt多边形时,如何获得它的所有信息?

wkt openlayers-3 openlayers sql-server json

Edit Axha · 技术社区 · 7 年前

我从MSsql server 2012获取json格式的数据,我只获取要转换的WKT字符串,以便使用ol显示在地图上。总体安排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服务器中存储空间数据的图片

谢谢

1 回复 | 直到 7 年前

Mike 4 年前

forEachFeatureAtPixel ( api doc )可以在某个位置上获取所有功能。诚然,它的使用可能会令人困惑。传递给该函数的回调将针对每个层调用。如果回调返回真实值,它将停止,然后 forEachFeatureAtPixel 返回回调返回的内容。这使得选择特定功能非常完美。

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>