Geoserver服务多边形被多次标注解决方式

问题描述:块状区域在一定缩放到一定尺寸时,会出现均匀分布的多个标注。(理论上一个区域应有一个标注,一个中国不改有多个CHINA标注)

解决方案:采用ImageWMS取代TileWMS;

问题场景:多个标注、支持不平铺

 

源码:

FangDaMap.MapFun.prototype.addWMS = function(option) {
    if (!(option && option.url && option.url && option.name)) return;
    var layer = new ol.layer.Tile({
        group: "WMS",
        title: option.name || 'TEST_MAP',
        source: new ol.source.TileWMS({
            wrapX: false, //不平铺
            ratio: 1,
            url: option.url || "http://localhost:8080/geoserver/wms",
            params: {
                'VERSION': '1.1.1',  
                'LAYERS': option.name || 'TEST_MAP',
               'TILED': true ,//是否要将数据制作成切片,省略后返回的是一张完整图。
                'exceptions': 'application/vnd.ogc.se_inimage'
            },
            serverType: option.serverType || 'geoserver',
            projection: option.projection || FangDaMap.Enum.Projections.wgs84
        }),
    })
    window.map.addLayer(layer); //添加图层
};

  

解决效果:单一标注、只能平铺

  

 源码:

FangDaMap.MapFun.prototype.addWMS = function(option) {
    if (!(option && option.url && option.url && option.name)) return;
    var layer=new ol.layer.Image({
        group: "WMS",
        title: option.name || 'TEST_MAP',
        source: new ol.source.ImageWMS({
            //wrapX: false, //不支持
            ratio: 1,
            url: option.url || "http://localhost:8080/geoserver/wms",
            params: {
                'FORMAT': 'image/png',
                'VERSION': '1.1.1',  
                'LAYERS': option.name || 'TEST_MAP',
                'exceptions': 'application/vnd.ogc.se_inimage'
            },
            serverType: option.serverType || 'geoserver',
            projection: option.projection || FangDaMap.Enum.Projections.wgs84
        }),
    })
    window.map.addLayer(layer); //添加图层
};

 

因数据平铺,为防止在WGS84坐标系下交互拾取数据超限问题,可采用监听地图中心点策略;

/**
 * @name: 保证地图在-180,180°显示
 * @test: 
 * @msg: 
 * @param {type} 
 * @return: 
 */
FangDaMap.MapFun.prototype.mapChangeCenter = function() {
    //监听
    map.getView().on('change:center', function() {
        // map.on("moveend", function(evt) {

        var nowCenter = map.getView().getCenter();
        var x = nowCenter[0];
        if (x > 180) { //行至最右边
            nowCenter[0] = 178;
            map.getView().setCenter(nowCenter);
        }
        if (x < -180) { //行至最左边
            nowCenter[0] = -178;
            map.getView().setCenter(nowCenter);
        }
    });
}

  

 对比分析:

TileWMS,是服务端生成规则网格切片,切片一旦生成,还可以指定是否要缓存在服务端(的文件夹中),于是下次请求的时候,会有效率提升,缺点,需要消耗存储空间。TileWMS对标注label的处理策略为大区域斑块均匀分布多个标注。支持数据平铺与否

ImageWMS,根据请求实时生成和当前视图相同尺寸的一张大图,数据皆为平铺(交互采集数据时,可能出现采集数据超过数据源范围的问题),不会有缓存,相比TileWMS,效率可能低些,但图的质量更好(特别是标注label)。

posted @ 2020-08-27 22:38  红领巾1994  阅读(996)  评论(0编辑  收藏  举报