Mapbox GL基础（十）：获取点击位置的Feature

实际项目中，时常会加载矢量数据，然后点击地图时弹出点位对应Feature的详细信息，或者根据Feature的id参数来获取更多不同的信息，来实现弹窗的展示，下面将对其进行说明。

获取GeoServer服务点击处的Feature

前面已经详细介绍过了GeoServer服务数据的加载，此处不再进行阐述，如有需要可查看Mapbox GL基础（二）：空间数据的加载
获取具体的Feature代码和结果数据如下：

mapBoxMap.on("click", function (e) {
  const zoom = mapBoxMap.getZoom();
  const value = Math.pow(2, 22 - zoom);
  const { lng, lat } = e.lngLat;
  const center = wgs84ToMercator(lng, lat);
  const min = [center.x - value, center.y - value];
  const max = [center.x + value, center.y + value];
  let workSpace = '工作区'
  let layerName = '图层名'
  let ip = 'IP'
  let featureUrl = `${ip}/geoserver/${workSpace}/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=${workSpace}:${layerName}&STYLES&LAYERS=${workSpace}:${layerName}&exceptions=application%2Fvnd.ogc.se_inimage&INFO_FORMAT=application/json&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A3857&WIDTH=101&HEIGHT=101&BBOX=${min[0]},${min[1]},${max[0]},${max[1]}`
  axios({url: featureUrl})
    .then(function (res) {
      console.log(res);
    }) 
});
function wgs84ToMercator(lng, lat){
  lng = parseFloat(lng);
  lat = parseFloat(lat);
  var d = Math.PI / 180,
    max = 90,
    lat = Math.max(Math.min(max, lat), -max),
    sin = Math.sin(lat * d);
  var x = 6378137 * lng * d;
  var y = (6378137 * Math.log((1 + sin) / (1 - sin))) / 2;
  return {
    x,
    y,
  };
}

获取GeoJson或矢量切片点击处的Feature

前面已经详细介绍过了GeoJson和矢量切片数据的加载，此处不再进行阐述，如有需要可查看Mapbox GL基础（二）：空间数据的加载
GeoJson和矢量切片点击处Feature的获取类似，此处以GeoJson为例进行说明，获取具体的Feature代码和结果数据如下：

mapBoxMap.on("click", function (e) {
  const features = mapBoxMap.queryRenderedFeatures(
    [e.point.x,e.point.y],
    // {layers:[layerName]}  //可选
  )
  console.log(features)
});

根据Feature的信息实现弹窗

获取到具体的Feature之后，可以得到Feature所有的属性字段和对应的值，进而可以实现点击时弹窗的展示，主要利用Popup来实现，代码和效果如下：

mapBoxMap.on("click", function (e) {
  const features = mapBoxMap.queryRenderedFeatures(
    [e.point.x,e.point.y],
    // {layers:[layerName]}  //可选
  )
  let feature = features[0]
  let html = getHtml(feature)
  let popup = new mapboxgl.Popup()
  popup
    .setLngLat(e.lngLat)
    .setHTML(html)
    .setMaxWidth('280px')
    .addTo(mapBoxMap);
});

let keys = {
  name: "名称",
}
function getHtml(feature) {
  //创建属性框
  let html = '';
  html += `<table>`;
  html += `<tr style='position: relative;'><th style='width:80px'>属性名称</th><th>属性值</th></tr>`;
  for (const key in feature.properties) {
    if (feature.properties.hasOwnProperty(key)) {
      let element = feature.properties[key];
      if (element) {
        if(keys[key]){
          html += `<tr><td>${keys[key]}</td><td>${element}</td></tr>`;
        }else{
          html += `<tr><td>${key}</td><td>${element}</td></tr>`;
        }
      }
    }
  }
  html += `</table>`;
  html += `</div>`;
  return html;
}

总结

本文主要针对GeoServer发布的服务、GoeJson的数据获取点击处的Feature，并根据Feature进行弹窗展示进行了说明，以后如果遇到新的功能再进行补充，接下来的章节将继续探索Mapbox。
欢迎关注星林社区，文章将同步更新在星林社区中！