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）。