Question

    function query(id,datasetNames) {

        var idsParam = new L.supermap.GetFeaturesByIDsParameters({

            IDs: [id],

            datasetNames: [datasetNames]

        });

        new L.supermap

            .FeatureService(dataurl)

            .getFeaturesByIDs(idsParam, function (serviceResult) {

                feature =  Object.assign(serviceResult.result.features)

                var popupcontent = '名字：' + feature.features[0].properties.NAME +'</br>'+ '材料：' + feature.features[0].properties.MATERIAL

                resultLayer = L.geoJSON(feature).bindPopup(popupcontent).addTo(map).openPopup();

            });

    }

Answer 1

您好，根据您提供的代码，查询结果中部分弹窗偏移至其他位置，可能是以下原因导致的：

1. 坐标系不匹配：查询结果中的坐标系与地图的坐标系不匹配。弹窗位置是根据要素的几何信息（如经纬度或投影坐标）确定的，如果查询结果中的坐标系与地图的坐标系不一致，弹窗位置就会出现偏移。在绑定弹窗之前，要确保查询数据的坐标与地图使用的坐标系一致；

2. 数据不完整或有误：查询结果中的部分要素可能存在数据缺失或者错误，例如，要素的几何信息、属性值等不准确或者为空。这可能导致在生成弹窗时无法正确获取要素的位置信息，从而导致弹窗偏移；

3. 弹窗样式设置问题：在绑定弹窗时，可能没有正确设置弹窗的样式和位置参数，导致弹窗位置不正确。需要确保在 bindPopup 方法中设置了正确的位置参数，以确保弹窗显示在要素几何位置附近，例如：

   resultLayer = L.geoJSON(feature).bindPopup(popupcontent, {
               autoPan: true, // 自动调整弹窗位置，确保可见
               keepInView: true // 保持在地图视图范围内
           }).addTo(map).openPopup(); 

   希望能够帮助到您！

Comments

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            106.8903741784501,
            27.68265578601779
          ],
          [
            106.89186260912439,
            27.682735888895756
          ]
        ]
      },
      "id": 2142
    }
  ]
}

单独使用偏移数据的查询结果加载并不会出现这种情况

---

您好，在您提供的代码中，将 feature 对象直接传递给了 L.geoJSON 方法创建图层，并使用 bindPopup 设置了气泡框内容。这种情况下，弹出框的位置依赖于图层的默认位置，可能是数据间位置的冲突导致了气泡框偏移。

可以考虑使用 L.marker 来创建标记，将弹出框绑定到标记上，这样可以更精确地控制弹出框的位置。

示例如下：

function query(id, datasetNames) {
    var idsParam = new L.supermap.GetFeaturesByIDsParameters({
        IDs: [id],
        datasetNames: [datasetNames]
    });

    new L.supermap.FeatureService(dataurl).getFeaturesByIDs(idsParam, function (serviceResult) {
        feature =  Object.assign(serviceResult.result.features);
        
        var coordinate = feature.features[0].geometry.coordinates; // 获取要素的几何坐标
        
        var popupcontent = '名字：' + feature.features[0].properties.NAME + '</br>' + '材料：' + feature.features[0].properties.MATERIAL;
        
        var marker = L.marker([coordinate[1], coordinate[0]]).addTo(map); // 创建标记并指定几何坐标
        
        marker.bindPopup(popupcontent).openPopup(); // 绑定弹出框，并打开弹出框
    });
}

希望对您有所帮助！