Openlayers 3 如何使用Open Layer 3在两个裁剪点之间绘制线？

我可以在地图中显示jsonlat和lon，但我想在两个选定点之间画线。 像这样

在这里，我可以单击地图中的所有位置，但我希望启用“仅单击显示的点”

我用这个链接来显示我的点，现在我想在两点之间画线

<script>  
    var flickrSource = new ol.source.Vector();
    function flickrStyle(feature) {
          var style = new ol.style.Style({
              image: new ol.style.Circle({
                      radius: 10,
                      stroke: new ol.style.Stroke({
                        color: 'white',
                        width: 2
                      }),

                    fill: new ol.style.Fill({
                        color: 'green'
                      }),
               }),
              text: new ol.style.Text({
                text: feature.getGeometryName(),
                fill: new ol.style.Fill({color: 'blue'}),
                stroke: new ol.style.Stroke({color: 'white', width: 1}),
                offsetX: 0,
                offsetY: 15
              }),       
          });

          return [style];
    }   
        var flickrLayer = new ol.layer.Vector({
          source: flickrSource,
          style: flickrStyle
        });

        var layer = new ol.layer.Tile({
          source: new ol.source.OSM()
        });

        var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');

        var view = new ol.View({
          center: center,

          zoom: 3
        });

        var source = new ol.source.Vector({wrapX: false});
        var map = new ol.Map({

          target: 'map',
          layers: [layer, flickrLayer],
          view: view
        });

    function successHandler(data) {

      var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
      data.items.forEach(function(item) {
        var feature = new ol.Feature(item);
        feature.setGeometryName(item.name);   
        var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
        var geometry = new ol.geom.Point(coordinate);
        feature.setGeometry(geometry);
        flickrSource.addFeature(feature);

      });
    }
</script>

var flickrSource=new ol.source.Vector（）；
功能flickrStyle（功能）{
var style=新的ol.style.style({
图片：新ol.style.Circle({
半径：10，
笔划：新的ol风格笔划({
颜色：'白色'，
宽度：2
}),
填充：新的ol.style.fill({
颜色：“绿色”
}),
}),
文本：新的ol.style.text({
文本：feature.getGeometryName（），
填充：新的ol.style.fill（{color:'blue'}），
笔划：新的ol.style.stroke（{颜色：'white'，宽度：1}），
抵销额：0，
副职：15
}),       
});
返回[风格]；
}   
var flickrLayer=new ol.layer.Vector({
资料来源：flickrSource，
风格：flickrStyle
});
var layer=新ol.layer.Tile({
来源：new ol.source.OSM（）
});
var center=ol.proj.transform（[-1.812,52.443]，'EPSG:4326'，'EPSG:3857'）；
变量视图=新的ol.view({
中心:中心,，
缩放：3
});
var source=new ol.source.Vector（{wrapX:false}）；
var map=新ol.map({
目标：“地图”，
图层：[图层，flickrLayer]，
视图：视图
});
函数successHandler（数据）{
var transform=ol.proj.getTransform（'EPSG:4326'，'EPSG:3857'）；
data.items.forEach（函数（项）{
var特性=新的ol.特性（项目）；
feature.setGeometryName（item.name）；
变量坐标=变换（[parseFloat（item.longitude），parseFloat（item.latitude）]；
变量几何=新的ol.几何点（坐标）；
特征。设置几何（几何）；
addFeature（feature）；
});
}

获取这两点的坐标并绘制线串

var thing = new ol.geom.LineString(points);
var featurething = new ol.Feature({
  name: "Thing",
  geometry: thing
});
flickrSource.addFeature(featurething);

var flickrSource=new ol.source.Vector（）；
风险值数据={
“项目”：[{
名称：'geo1'，
经度：“0.0”，
纬度：“0.0”
}, {
名称：'geo1'，
经度：“5.0”，
纬度：“5.0”
}]
};
功能flickrStyle（功能）{
var style=新的ol.style.style({
图片：新ol.style.Circle({
半径：10，
笔划：新的ol风格笔划({
颜色：'白色'，
宽度：2
}),
填充：新的ol.style.fill({
颜色：“绿色”
}),
}),
文本：新的ol.style.text({
文本：feature.getGeometryName（），
填充：新的ol.style.fill({
颜色：“蓝色”
}),
笔划：新的ol风格笔划({
颜色：'白色'，
宽度：1
}),
抵销额：0，
副职：15
}),
});
返回[风格]；
}
var flickrLayer=new ol.layer.Vector({
来源：flickrSource
//风格：flickrStyle
});
var layer=新ol.layer.Tile({
来源：new ol.source.OSM（）
});
var center=ol.proj.transform（[0.0,0.0]，'EPSG:4326'，'EPSG:3857'）；
变量视图=新的ol.view({
中心:中心,，
缩放：5
});
var source=新的ol.source.Vector({
wrapX：错误
});
var map=新ol.map({
目标：“地图”，
图层：[图层，flickrLayer]，
视图：视图
});
函数successHandler（数据）{
var点=[]；
data.items.forEach（函数（项）{
var point=ol.proj.transform（[parseFloat（项目经度），parseFloat（项目经度）]，'EPSG:4326'，'EPSG:3857'）；
点。推（点）；
变量几何=新的ol.几何点（点）；
var功能=新的ol.功能({
名称：item.name，
几何图形：几何图形
});
addFeature（feature）；
var thing=新ol.geom.LineString（点）；
var FEATURATING=新的ol.特性({
名字：“东西”，
几何：东西
});
flickrSource.addFeature（特性化）；
});
}
successHandler（数据）

这是代码

以下是矢量源、图层和地图：

// Vector source of data points
var flickrSource = new ol.source.Vector();

// Style function for the data points
function flickrStyle(feature) {
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
                stroke: new ol.style.Stroke({
                color: 'white',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'green'
            })
        }),
        text: new ol.style.Text({
           text: feature.getGeometryName(),
           fill: new ol.style.Fill({color: 'blue'}),
           stroke: new ol.style.Stroke({color: 'white', width: 1}),
           offsetX: 0,
           offsetY: 15
        })
    });

    return [style];
}

// Layers
var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
var flickrLayer = new ol.layer.Vector({
     source: flickrSource,
     style: flickrStyle
});  

// MAP
var map = new ol.Map({
     target: 'map',
     layers: [osmLayer, flickrLayer],
     view: new ol.View({
          center: ol.proj.transform([0, 20], 'EPSG:4326', 'EPSG:3857'),
          zoom: 3
     })
});

// Data points
var data = {
     "items": [{
          name: 'p1',
          longitude: "0.0",
          latitude: "0.0"
     }, {
          name: 'p2',
          longitude: "50.0",
          latitude: "50.0"
     }, {
          name: 'p3',
          longitude: "50.0",
          latitude: "-50.0"
     }]
};

// Placing data points on the map
function placePoints(data) {
     var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

     data.items.forEach( function(item) {
          // for each item of data points we create feature geometry
          // with coords contained in data and add them to the source

          var feature = new ol.Feature(item);
          feature.setGeometryName(item.name);   

          var coordinate = transform(
               [parseFloat(item.longitude), parseFloat(item.latitude)]
          );

          var geometry = new ol.geom.Point(coordinate);
          feature.setGeometry(geometry);

          flickrSource.addFeature(feature);
    } );
}
placePoints(data); // do the stuff of placing points 

然后是数据点，并将其放置在地图上：

// Vector source of data points
var flickrSource = new ol.source.Vector();

// Style function for the data points
function flickrStyle(feature) {
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
                stroke: new ol.style.Stroke({
                color: 'white',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'green'
            })
        }),
        text: new ol.style.Text({
           text: feature.getGeometryName(),
           fill: new ol.style.Fill({color: 'blue'}),
           stroke: new ol.style.Stroke({color: 'white', width: 1}),
           offsetX: 0,
           offsetY: 15
        })
    });

    return [style];
}

// Layers
var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
var flickrLayer = new ol.layer.Vector({
     source: flickrSource,
     style: flickrStyle
});  

// MAP
var map = new ol.Map({
     target: 'map',
     layers: [osmLayer, flickrLayer],
     view: new ol.View({
          center: ol.proj.transform([0, 20], 'EPSG:4326', 'EPSG:3857'),
          zoom: 3
     })
});

// Data points
var data = {
     "items": [{
          name: 'p1',
          longitude: "0.0",
          latitude: "0.0"
     }, {
          name: 'p2',
          longitude: "50.0",
          latitude: "50.0"
     }, {
          name: 'p3',
          longitude: "50.0",
          latitude: "-50.0"
     }]
};

// Placing data points on the map
function placePoints(data) {
     var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

     data.items.forEach( function(item) {
          // for each item of data points we create feature geometry
          // with coords contained in data and add them to the source

          var feature = new ol.Feature(item);
          feature.setGeometryName(item.name);   

          var coordinate = transform(
               [parseFloat(item.longitude), parseFloat(item.latitude)]
          );

          var geometry = new ol.geom.Point(coordinate);
          feature.setGeometry(geometry);

          flickrSource.addFeature(feature);
    } );
}
placePoints(data); // do the stuff of placing points 

然后是绘制点之间线条的交互：

// select interaction working on "click"
var mySelectInteraction = new ol.interaction.Select({
     condition: ol.events.condition.click,
     multi: false
});

// init coords of line to draw between points
var pointA = null;
var pointB = null;

// Interaction on points for drawing lines between
mySelectInteraction.on('select', function(e) {

    if (e.selected.length === 0) {
        // clicking nothing, so reset points coords
        pointA = null;
        pointB = null;
    }
    else {
        // Feature clicked and its coords
        var feature = e.target.getFeatures().item(0);
        var coords = feature.getGeometry().getCoordinates();

        // Definition of coords points
        if (pointA === null) { pointA = coords; }
        else { pointB = coords; }


        if ( pointA !== null && pointB !== null) {

            var LinesSource = new ol.source.Vector();
            var LinesLayer = new ol.layer.Vector({ source : LinesSource });
            map.addLayer( LinesLayer );

            // Line construction
            LinesSource.addFeature( new ol.Feature({
                geometry : new ol.geom.LineString( [pointA, pointB] )
            }) );

            // Reset points for next drawing
            pointA = null;
            pointB = null;
        }
    }
});

map.addInteraction(mySelectInteraction);

对我来说太棒了