首页 / 浏览问题 / WebGIS / 问题详情
在开发过程中,遇到一个地图显示的问题
2EXP 2023年07月17日

我的idesktop版本为:11.0.1.1124.217 x64(SuperMap iObjects Java:11.0.1.98691)

远程服务器上安装的是:supermap-iserver-11.0.1-linux-x64

在开发中,我将地图发布为服务,通过leaflet相关文档进行加载,但存显示存在问题

会存在一部分图像的边缘显示不出来,但放大地图以后,又不存在该问题了

这是什么原因呢?是代码缩放级别设置的问题吗?还是发布服务时DPI值未正确设置?(目前为默认的96),在代码中是这样加载的:

   // 初始化地图信息
   window.map = L.map('map', {
     crs: L.CRS.EPSG4326,
     center: [30.25, 101.8],
     maxZoom: 18,
     minZoom: 6,
     zoom: 6,
     attributionControl: false,  // 去掉右下角链接
     zoomAnimation: false
   });
   // 加载四川省地图
   var sichuan = new L.supermap.TiledMapLayer(url, {
     transparent: true,
   });
   sichuan.addTo(window.map);  

且在后续功能实现中,我通过QueryBySQLParameters查询到四川省各市的地块,并在hover时显示蓝色边框时,发现边框与地图上也无法重合,如下:

代码如下:

// 监听地块hover事件
const mapHoverHaddle = () =>{
  const param = new L.supermap.QueryBySQLParameters({
      queryParams: {
        name: '市@SiChuan',
        // attributeFilter: "名称 like '%" + value + "%'"
      }
    });
      // 实例化地图查询服务类
    new L.supermap.QueryService(url).queryBySQL(param, (serviceResult) => {
      const queryresult = serviceResult.result;
      console.log(queryresult)
      const features = queryresult.recordsets[0].features.features;
      var map1 = map.value
      features.forEach((feature, index) =>  {
        console.log(name,code)
        // 对每一个地块添加一个监听事件
        // ......
        // 根据地块的几何类型创建对应的 Leaflet 图层对象
        if (feature.geometry.type === 'Polygon' || feature.geometry.type === 'MultiPolygon') {
          // 创建面图层
          const layer = L.geoJSON(feature.geometry, {
            // 设置面图层样式
            color: 'white',
            opacity: 0
          }).addTo(map1);

          // 添加鼠标悬停事件
          layer.on('mouseover', function() {
            originalStyle.value = this.options.style;
            this.setStyle({
              color: 'blue',
              opacity: 1,
              weight: 5
            });
          });

          layer.on('mouseout', function() {
            // 恢复原始样式
            this.setStyle({
              color: 'white',
              opacity: 0
            });
          });
        }

      })
    });
}

这是为什么呢?同样地放大该地图就正常了,尝试通过修改DPI为97,发现蓝色边框会和地图实际显示偏差极大。地图和数据的坐标系均为EPSG 4326.

有大佬遇到过这个问题吗?我该如何解决这个问题?希望得到帮助!谢谢您

1个回答

您好,1、地图目前显示是6层级,该层级在桌面和iserver中预览是否也有题中问题?

2、通过QueryBySQLParameters查询到四川省各市的地块,hover显示框出现未重叠现象,可以在桌面添加iserver发布的地图服务与原地图数据做对比,确认是否是iserver发布后出现偏移。

3、发布服务的DPI设置前端用于显示屏幕分辨率的,屏幕分辨率,也叫做像素分辨率,常用屏幕上每英寸长度内包含的像素数量来表达,一般地图的默认屏幕分辨率是96。有的地方也用像素大小(pixel size)来描述屏幕的可分辨率,如 WMTS 标准中的0.28mm。

一般在iserver中设置DPI是针对wmts服务。您是发布的工作空间的地图还是发布的瓦片,发布的什么服务呢?
1,865EXP 2023年07月17日

您好,感谢您的帮助!我刚才在电脑上尝试了一下,地图在桌面浏览和iserver中预览未发现该问题;

通过QueryBySQLParameters查询到四川省各市的地块,hover显示框出现未重叠现象,可以在桌面添加iserver发布的地图服务与原地图数据做对比,确认是否是iserver发布后出现偏移。这个“可以在桌面添加iserver发布的地图服务与原地图数据做对比”我不知道具体如何操作。

但是比对加载到同一个map中的天地图和四川省地图的地界线,发现二者的确没有完全重合,而使用iserver中的“浏览于 Tianditu.com"功能,点击预览是没有该问题的。

(项目中的两个地图的边界线,未重合)

(在iserver预览中,两个边界线完全重合)

通过QueryBySQLParameters查询到四川省各市的地块,并在hover时显示蓝色边框时,边框与地图上不重合,与天地图底图重合,如下:

另外,您提到的工作空间发布的服务类型,我发布的服务为地图和数据服务,服务接口类型为rest,但是我发现在iserver中默认开启了UGC类型的地图瓦片缓存功能,如下图:

我尝试将该功能关闭后,发现地图进入时能够正常显示,且hover时也能完全重叠,如下:

似乎关闭瓦片缓存解决了这个问题,但在缩放地图时感觉速度明显变慢,甚至卡顿,不知是否是受此影响,能否在开启瓦片缓存的同时,加载出完整的地图?

再次感谢您的帮助!

1、桌面加载iserver发布的地图服务:桌面右键数据源-打开web型数据源-iserverREST,输入地图服务地址打开即可。

2、可以清理了地图缓存后再加载看看,因为关闭了瓦片缓存,读取速率是会减缓的。
好的,谢谢!
...