Javascript 如何修改openlayer3输入值?

Javascript 如何修改openlayer3输入值?,javascript,jquery,html,openlayers,openlayers-3,Javascript,Jquery,Html,Openlayers,Openlayers 3,目前,我正在使用OpenLayer3API开发该程序。 下面源代码中的输入值使用用户单击的数据。 用户单击了Lat Lon like:start=[31.032741119.211365]end=[32.032741129.211365] 但是,我不希望从用户接收输入值,而是希望从服务器接收数组格式的数据并立即显示。 比如说 map.addInteraction(新的ol.interaction.Draw({您是否尝试加载json数据或geojson数据 我有geojson格式的解决方案 var

目前,我正在使用OpenLayer3API开发该程序。 下面源代码中的输入值使用用户单击的数据。 用户单击了Lat Lon like:start=[31.032741119.211365]end=[32.032741129.211365]

但是,我不希望从用户接收输入值,而是希望从服务器接收数组格式的数据并立即显示。 比如说


map.addInteraction(新的ol.interaction.Draw({您是否尝试加载json数据或geojson数据

我有geojson格式的解决方案

var source = new ol.source.Vector({
    url: 'https://openlayers.org/en/v3.20.0/examples/data/geojson/line-samples.geojson',
    format: new ol.format.GeoJSON()
});
var styleFunction = function(feature) {
    var geometry = feature.getGeometry();
    var styles = [
        new ol.style.Style({
            stroke : new ol.style.Stroke({
                color : '#ffcc33',
                width : 2
            })
        }) 
    ];
    geometry.forEachSegment(function(start, end) {
        var dx = end[0] - start[0];
        var dy = end[1] - start[1];
        var rotation = Math.atan2(dy, dx);
        styles.push(new ol.style.Style({
            geometry : new ol.geom.Point(end),
            image : new ol.style.Icon({
                src : 'https://openlayers.org/en/v4.0.1/examples/data/arrow.png',
                anchor : [ 0.75, 0.5 ],
                rotateWithView : true,
                rotation : -rotation
            })
        }));
    });
    return styles;
};
var vectorLines = new ol.layer.Vector({
    source : source,
    style: styleFunction
});

var map = new ol.Map({
    layers: [
             new ol.layer.Tile({
                 source: new ol.source.OSM()
             }),
          vectorLines
        ],
    target: 'map',
    view: new ol.View({
        center: [-8161939, 6095025],
        zoom: 8
    })
});
map.addInteraction(new ol.interaction.Draw({
    source : source,
    type : 'LineString'
}));

在脚本标记中使用此代码,它将按照您的预期工作。但我不知道如何加载json数组。如果您找到了与我们共享的内容。

我不清楚您的问题。您想根据自己的坐标执行类似操作吗?我目前正在同时处理四个项目,因此我可以在这一次。这就是我想要的答案。非常感谢~!!^^如果你知道如何加载json数组与我们共享。
var source = new ol.source.Vector({
    url: 'https://openlayers.org/en/v3.20.0/examples/data/geojson/line-samples.geojson',
    format: new ol.format.GeoJSON()
});
var styleFunction = function(feature) {
    var geometry = feature.getGeometry();
    var styles = [
        new ol.style.Style({
            stroke : new ol.style.Stroke({
                color : '#ffcc33',
                width : 2
            })
        }) 
    ];
    geometry.forEachSegment(function(start, end) {
        var dx = end[0] - start[0];
        var dy = end[1] - start[1];
        var rotation = Math.atan2(dy, dx);
        styles.push(new ol.style.Style({
            geometry : new ol.geom.Point(end),
            image : new ol.style.Icon({
                src : 'https://openlayers.org/en/v4.0.1/examples/data/arrow.png',
                anchor : [ 0.75, 0.5 ],
                rotateWithView : true,
                rotation : -rotation
            })
        }));
    });
    return styles;
};
var vectorLines = new ol.layer.Vector({
    source : source,
    style: styleFunction
});

var map = new ol.Map({
    layers: [
             new ol.layer.Tile({
                 source: new ol.source.OSM()
             }),
          vectorLines
        ],
    target: 'map',
    view: new ol.View({
        center: [-8161939, 6095025],
        zoom: 8
    })
});
map.addInteraction(new ol.interaction.Draw({
    source : source,
    type : 'LineString'
}));