Javascript 打开图层3修改结束 问题
我已使用源和图层设置了下图所示的地图:Javascript 打开图层3修改结束 问题,javascript,openlayers,openlayers-3,Javascript,Openlayers,Openlayers 3,我已使用源和图层设置了下图所示的地图: var features = new ol.Collection(); vectorSource = new ol.source.Vector({ features: features }), vectorLayer = new ol.layer.Vector({ source: vectorSource }), styles = { route: new ol.style.Style({ stroke: new ol.style.
var features = new ol.Collection();
vectorSource = new ol.source.Vector({ features: features }),
vectorLayer = new ol.layer.Vector({
source: vectorSource
}),
styles = {
route: new ol.style.Style({
stroke: new ol.style.Stroke({
width: 4,
color: [255, 120, 0, 0.8]
})
}),
routeSR: new ol.style.Style ({
stroke: new ol.style.Stroke({
width: 6,
color: [0, 0, 0, 0.8]
})
}),
icon: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: session.icon_url
})
})
};
//CREATE THE MAP AND STORE IN SESSION.
session.map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: [-5685003, -3504484],
zoom: 11
})
});
然后,我在地图上设置了一个单击事件,它将为该点创建一个功能,以显示一个小图标。如果这是选定的第二个点,它将在两个点之间创建一条线串。二者均如下所示:
行字符串
function TestCreateLine() {
var CoordsFromTo = [];
for (var i = 0; i < session.points.length; i++) {
CoordsFromTo.push(session.points[i][0])
}
var line = new ol.geom.LineString(CoordsFromTo);
var feature = new ol.Feature(line);
feature.setStyle(styles.route);
vectorSource.addFeature(feature);
}
它们都将作为功能添加到源中。我目前面临的问题是,我希望能够修改路线,并将新的坐标传递给我
目前,我正在使用“ModifyEnd”事件,但它似乎返回给我不止一个坐标
session.interactions.modify.on('modifyend', function (e) {
//IF YOUR MODIFYING AN OSRM ROUTE
if (document.getElementById('Checkbox2').checked) {
}
//LINE STRING ROUTE
else {
session.points = [];
var changedFeatures = e.features.getArray();
var newFeature = changedFeatures[changedFeatures.length - 1];
var ben = newFeature.getGeometry().getCoordinates();
vectorSource.clear()
for (var i = 0; i < ben.length; i++) {
var newPointInformation = [];
newPointInformation.push((CreateGuid() + CreateGuid() + "-" + CreateGuid() + "-4" + CreateGuid().substr(0, 3) + "-" + CreateGuid() + "-" + CreateGuid() + CreateGuid() + CreateGuid()).toLowerCase());
newPointInformation.push(ben[i]);
session.points.push(newPointInformation);
TestCreateFeature(newPointInformation);
}
TestCreateLine();
}
});
session.interactions.modify.on('modifyend',函数(e){
//如果您正在修改OSRM路由
if(document.getElementById('Checkbox2')。选中){
}
//线串路由
否则{
session.points=[];
var changedFeatures=e.features.getArray();
var newFeature=changedFeatures[changedFeatures.length-1];
var ben=newFeature.getGeometry().getCoordinates();
vectorSource.clear()
对于(变量i=0;i
正如你所看到的,我尝试清空源特性并重新构建,但问题不是所有坐标都返回给我
有人能帮忙吗
session.interactions.modify.on('modifyend', function (e) {
//IF YOUR MODIFYING AN OSRM ROUTE
if (document.getElementById('Checkbox2').checked) {
}
//LINE STRING ROUTE
else {
session.points = [];
var changedFeatures = e.features.getArray();
var newFeature = changedFeatures[changedFeatures.length - 1];
var ben = newFeature.getGeometry().getCoordinates();
vectorSource.clear()
for (var i = 0; i < ben.length; i++) {
var newPointInformation = [];
newPointInformation.push((CreateGuid() + CreateGuid() + "-" + CreateGuid() + "-4" + CreateGuid().substr(0, 3) + "-" + CreateGuid() + "-" + CreateGuid() + CreateGuid() + CreateGuid()).toLowerCase());
newPointInformation.push(ben[i]);
session.points.push(newPointInformation);
TestCreateFeature(newPointInformation);
}
TestCreateLine();
}
});