「OpenLayers4」を利用して図形の再読み込み処理

「OpenLayers4」を利用してjsonファイルに図形を追加したが、再読み込みされなかったので、再読み込みする方法に関するメモ

１．レイヤの作成と図形読み込み処理

図形読み込み処理では、サーバーから取得した図形を、該当するレイヤに
全件登録する。

    var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        loader:function(extent, resolution, projection) {
            var json = null;
            Ext.Ajax.request({
                method: 'POST',
                url: 'json/deatures.json',
                async: false,
                failure: function (response, options) {
                    Ext.Msg.alert("ネットワークエラー", "サーバーとの通信ができませんでした！");
                },
                success: function (response, options) {
                    json = response.responseText;
                }
            });

            var features = new ol.format.GeoJSON().readFeatures(json);
        this.addFeatures(features);
        },
        strategy: ol.loadingstrategy.all
    });

    var layer = new ol.layer.Vector({
        name: '指定避難所',
        source: vectorSource,
        legendUrl: 'images/s_evac_area.png'
    });
    this.addLayer(layer);

var vectorSource = new ol.source.Vector({

format: new ol.format.GeoJSON(),

loader:function(extent, resolution, projection) {

var json = null;

Ext.Ajax.request({

method: 'POST',

url: 'json/deatures.json',

async: false,

failure: function (response, options) {

Ext.Msg.alert("ネットワークエラー", "サーバーとの通信ができませんでした！");

success: function (response, options) {

json = response.responseText;

}

});

var features = new ol.format.GeoJSON().readFeatures(json);

this.addFeatures(features);

strategy: ol.loadingstrategy.all

});

var layer = new ol.layer.Vector({

name: '指定避難所',

source: vectorSource,

legendUrl: 'images/s_evac_area.png'

});

this.addLayer(layer);

以下は、図形追加前のイメージ、図形(避難所)が1件しかない。

２．図形のクリアと再描画を指示

画面上で編集し終えた後は、レイヤからいったん図形を全件削除し、
配下のレイヤの再描画を指示する。
map.updateSize()を実行すると、非同期でol.source.Vectorのloader()
が呼ばれる。

    buttons: [
    {
        text   :'追加',
        handler: function() {
            // サーバーへの更新処理

            // レイヤからいったん図形を全件削除
            var gxmap = Ext.ComponentQuery.query('gx_map')[0];
            var layers = gxmap.map.getLayers().getArray();
            layers[2].getSource().clear();

            // レイヤの再描画を指示
            gxmap.map.updateSize();
        }
    }