如何在openlayers中的点之间添加线 [英] how to add lines between point in openlayers

问题描述

我正在尝试在地图上的两个点之间添加一条线.我有以下代码，但该网页仅向我显示基本地图，而没有我想要的线.

I'm trying to add a line between two points on my map. I have the following code but the web page only shows me a base map without the line that I want.

如何将这行添加到OpenLayers地图中?

How do I add this line to an OpenLayers map?

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([ -95.36,29.75]),
      zoom: 10
    })
  });
    var coords = [[-95.36,29.75], [-96.36,30.75]];
    var lineString = new ol.geom.LineString(coords);
    // transform to EPSG:3857
    lineString.transform('EPSG:4326', 'EPSG:3857');

    // create the feature
    var feature = new ol.Feature({
        geometry: lineString,
        name: 'Line'
    });

    var lineStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 10
        })
    });

    var raster = new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'sat'})
    });
    var source = new ol.source.Vector({
        features: [feature]
    });
    var vector = new ol.layer.Vector({
        source: source,
        style: [lineStyle]
    });
    map.addLayer(vector);
</script>

`

推荐答案

您的代码包含OpenLayers v5.x(和v4.6.5，在v3.16.0中未出现)中的javascript错误:

Your code contains a javascript error in OpenLayers v5.x (and v4.6.5, which doesn't appear in v3.16.0):

Uncaught TypeError: ol.source.MapQuest is not a constructor

删除指定以下内容的代码:

Remove the code that specifies that:

var raster = new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'sat'})
});

并显示该行.

概念提琴证明

代码段:

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-95.36, 29.75]),
    zoom: 10
  })
});
var coords = [
  [-95.36, 29.75],
  [-96.36, 30.75]
];
var lineString = new ol.geom.LineString(coords);
// transform to EPSG:3857
lineString.transform('EPSG:4326', 'EPSG:3857');

// create the feature
var feature = new ol.Feature({
  geometry: lineString,
  name: 'Line'
});

var lineStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#ffcc33',
    width: 10
  })
});

var source = new ol.source.Vector({
  features: [feature]
});
var vector = new ol.layer.Vector({
  source: source,
  style: [lineStyle]
});
map.addLayer(vector);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

<link rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
<div id="map" class="map"></div>

这篇关于如何在openlayers中的点之间添加线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！