OpenLayers 重叠 LineStrings 问题
OpenLayers overlapping LineStrings issue
我有一组坐标,我从中创建了 2 LineStrings
// global variables, I have previously defined map
let route = null;
let routeFeature = null;
let routeOverlay = null;
let routeOverlayFeatur = null;
我的主线串
function createMainRoute(coordinates) {
route = new LineString(coordinates);
routeFeature = new Feature({ geometry: route });
routeFeature.setStyle(styles.mainRoute);
const routeLayer = new VectorLayer({
source: new VectorSource({
features: [routeFeature],
}),
});
map.addLayer(routeLayer);
}
我的第二个具有精确坐标的 LineString
function createMainRouteOverlay(coordinates) {
routeOverlay = new LineString(coordinates);
routeOverlayFeature = new Feature({ geometry: routeOverlay });
routeOverlayFeature.setStyle(styles.routeOverlay);
const routeOverlayLayer = new VectorLayer({
source: new VectorSource({
features: [routeOverlayFeature],
}),
});
map.addLayer(routeOverlayLayer );
}
现在我有一个绘制这两条线的函数,当我从服务器获取初始数据时调用这个函数
function init(coordinates) {
createMainRoute(coordinates);
createMainRouteOverlay(coordinates);
}
目标是想修改覆盖线上的坐标,如坐标、样式等,但不丢失主路线的轨迹,但它们在开始时是相同的。
现在我有一个函数可以动态改变覆盖线的坐标集。当外部数据改变时调用此函数。
function readjust(newCoordinates) {
routeOverlayFeature.getGeomety().setCoordinates(newCoordinates)
}
这里的问题是,当我调用 readjust()
时,地图上没有任何反应,这些新坐标的线保持不变,但是当我从 init 函数中注释掉 createMainRoute()
时,意思是我只有一根线,只要调用 readjust()
,线就会用新数据更新。有谁知道这里的问题是什么?是否不支持这样的事情,或者我需要设置一些 属性 来允许这样做吗?我不明白为什么当它们是 2 个分开的变量并且只有一个被更新时它们会发生冲突。感谢任何帮助
您的要素共享相同的几何结构
routeOverlayFeature = new Feature({ geometry: route });
应该是
routeOverlayFeature = new Feature({ geometry: routeOverlay });
我有一组坐标,我从中创建了 2 LineStrings
// global variables, I have previously defined map
let route = null;
let routeFeature = null;
let routeOverlay = null;
let routeOverlayFeatur = null;
我的主线串
function createMainRoute(coordinates) {
route = new LineString(coordinates);
routeFeature = new Feature({ geometry: route });
routeFeature.setStyle(styles.mainRoute);
const routeLayer = new VectorLayer({
source: new VectorSource({
features: [routeFeature],
}),
});
map.addLayer(routeLayer);
}
我的第二个具有精确坐标的 LineString
function createMainRouteOverlay(coordinates) {
routeOverlay = new LineString(coordinates);
routeOverlayFeature = new Feature({ geometry: routeOverlay });
routeOverlayFeature.setStyle(styles.routeOverlay);
const routeOverlayLayer = new VectorLayer({
source: new VectorSource({
features: [routeOverlayFeature],
}),
});
map.addLayer(routeOverlayLayer );
}
现在我有一个绘制这两条线的函数,当我从服务器获取初始数据时调用这个函数
function init(coordinates) {
createMainRoute(coordinates);
createMainRouteOverlay(coordinates);
}
目标是想修改覆盖线上的坐标,如坐标、样式等,但不丢失主路线的轨迹,但它们在开始时是相同的。
现在我有一个函数可以动态改变覆盖线的坐标集。当外部数据改变时调用此函数。
function readjust(newCoordinates) {
routeOverlayFeature.getGeomety().setCoordinates(newCoordinates)
}
这里的问题是,当我调用 readjust()
时,地图上没有任何反应,这些新坐标的线保持不变,但是当我从 init 函数中注释掉 createMainRoute()
时,意思是我只有一根线,只要调用 readjust()
,线就会用新数据更新。有谁知道这里的问题是什么?是否不支持这样的事情,或者我需要设置一些 属性 来允许这样做吗?我不明白为什么当它们是 2 个分开的变量并且只有一个被更新时它们会发生冲突。感谢任何帮助
您的要素共享相同的几何结构
routeOverlayFeature = new Feature({ geometry: route });
应该是
routeOverlayFeature = new Feature({ geometry: routeOverlay });