首页 / 浏览问题 / WebGIS / 问题详情
点击查询结果后部分popup偏移至其他位置且偏位位置相同
8EXP 2023年09月27日
    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();

            });

    }

1个回答

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

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

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

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

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

    希望能够帮助到您!

815EXP 2023年09月27日

{
  "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(); // 绑定弹出框,并打开弹出框
    });
}

希望对您有所帮助!

...