如何触发ol.Map的按需刷新/重绘

时间:2017-02-02 14:11:53

标签: javascript jquery angularjs openlayers-3

我有一个名为" LoadMap"

的函数
    rcisWebMapLoad.prototype.LoadMap = function (param1, param2) {
     //Get some vector objects and create layers
     var fieldVectorObjs = rcisWebMapVectorObjs.GetFieldVectorObjects(param1, param2);
        var objectVectorLines = rcisWebMapVectorObjs.GetLinesVectorObjects(param1, param2, 1);

       //Create Map object and add layers then insert into map div
        control.map = new ol.Map({
            target: 'map',
            renderer: 'canvas',
            layers: layers,
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [0, 0],
                zoom: 8
            })
        });

           //******* MapServer imagery ***************
            var aerial = new ol.layer.Tile({
                name: 'Imagery',
                source: new ol.source.TileWMS({
                    url: mapServerPath.ResponseString,
                    params: { 'LAYERS': 'aerial', 'FORMAT': 'image/png', 'TILED': true },
                    serverType: 'mapserver'

                })

            });
            control.map.addLayer(aerial);


    }

这会加载地图!

我在地图上有我的图像和矢量对象......但是当我想切换到不同的地图时问题出现了,即(不同的图像和矢量对象)......

更新 最初我认为地图没有得到更新,但实际上在原始地图下生成并添加了另一个地图...如何重用或替换已经存在的地图对象以显示另一个地图?

因为我使用AngularJS并通过服务传递maps参数,所以我不能再次调用页面并从之前向我建议的查询字符串中获取参数。

这似乎是在线地图的主要功能。

非常感谢任何帮助

1 个答案:

答案 0 :(得分:0)

好的,所以我无法强制按需刷新OpenLayers 3的地图对象。

所以我最终做的就是销毁地图对象并每次创建一个新对象。

所以对于上面的例子,它看起来像这样......

对于angularJS用户,您还需要确保在.factory加载函数中创建一个空地图(因此最初需要销毁一些内容)...如果您不使用角度,则只需要在页面加载时创建地图

 function rcisWebMapLoad() {          

        this.map = new ol.Map({});

    }



 rcisWebMapLoad.prototype.LoadMap = function (param1, param2) {
 //Get some vector objects and create layers
 var fieldVectorObjs = rcisWebMapVectorObjs.GetFieldVectorObjects(param1, param2);
    var objectVectorLines = rcisWebMapVectorObjs.GetLinesVectorObjects(param1, param2, 1);

        var layers = [];

在创建新地图对象之前销毁地图对象

     control.map.setTarget(null);
     control.map = null;

   //Create Map object and add layers then insert into map div
    control.map = new ol.Map({
        target: 'map',
        renderer: 'canvas',
        layers: layers,
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [0, 0],
            zoom: 8
        })
    });

       //******* MapServer imagery ***************
        var aerial = new ol.layer.Tile({
            name: 'Imagery',
            source: new ol.source.TileWMS({
                url: mapServerPath.ResponseString,
                params: { 'LAYERS': 'aerial', 'FORMAT': 'image/png', 'TILED': true },
                serverType: 'mapserver'

            })

        });
        control.map.addLayer(aerial);


}