如何触发点播 refresh/redraw of ol.Map
How do I trigger an on demand refresh/redraw of ol.Map
我有一个函数叫做 "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 并通过服务传递地图参数,所以我不能像之前有人向我建议的那样再次调用该页面并从查询字符串中获取参数。
这似乎是在线地图的主要功能。
非常感谢任何帮助
好的,所以我无法强制 on-demand 刷新 OpenLayers 3 的地图对象。
所以我最后做的是每次销毁地图对象并创建一个新对象。
所以对于上面的例子,它看起来像这样...
对于 angularJS 用户,您还需要确保在 .factory 加载函数中创建了一个空映射(因此最初有一些东西要销毁)...如果您没有使用 angular,您只需要在页面加载时创建地图 。
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);
}
我有一个函数叫做 "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 并通过服务传递地图参数,所以我不能像之前有人向我建议的那样再次调用该页面并从查询字符串中获取参数。
这似乎是在线地图的主要功能。
非常感谢任何帮助
好的,所以我无法强制 on-demand 刷新 OpenLayers 3 的地图对象。
所以我最后做的是每次销毁地图对象并创建一个新对象。
所以对于上面的例子,它看起来像这样...
对于 angularJS 用户,您还需要确保在 .factory 加载函数中创建了一个空映射(因此最初有一些东西要销毁)...如果您没有使用 angular,您只需要在页面加载时创建地图 。
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);
}