OpenLayers：無法向地圖添加坐標線串

Question

我在顯示基於現有坐標列表的線串時遇到麻煩，希望能提供一些幫助。 下面是我的代碼，它顯示了一個OpenLayers5映射，但是沒有覆蓋線串。

我讀過很多不同的線程（ OpenLayers 3：簡單的LineString示例）和API文檔，但是我無法弄清缺少的內容。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

<body>
  <div id="map" class="map"></div>

  <script type="text/javascript">   
    var view = new ol.View({
      center: ol.proj.fromLonLat([10,50]),
      zoom: 14
    })

    //Dummy coords
    var coordinates = [
      [10, 50],
      [11, 51],
      [12, 55]
    ];

    var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.LineString(coordinates),
                name: 'Line'
            })]
        }),
        style : new ol.style.Style({
          stroke : new ol.style.Stroke({ 
            strokeColor: '#ff0000',
            strokeWidth: 5                      
          })
        })
    });

    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: view
    });

    map.addLayer(layerLines);

    </script>

</body>
</html>

JSFiddle鏈接

Answer 1

兩個錯誤。 首先，它是width和color ，而不是strokeWidth/Color 。 其次，您將中心從lon / lat重新投影到WebMercator，但忘記對線坐標進行同樣的操作-這樣您的線實際上位於幾內亞灣的某個地方（距0,0點10/50米）。

這是更正的版本。

 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <script> var view = new ol.View({ center: ol.proj.fromLonLat([10, 50]), zoom: 14 }) //Dummy coords var coordinates = [ ol.proj.fromLonLat([10, 50]), ol.proj.fromLonLat([11, 51]), ol.proj.fromLonLat([12, 55]) ]; var layerLines = new ol.layer.Vector({ source: new ol.source.Vector({ features: [new ol.Feature({ geometry: new ol.geom.LineString(coordinates), name: 'Line' })] }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#ff0000', width: 3 }) }) }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: view }); map.addLayer(layerLines); </script> </body> </html>

OpenLayers：無法向地圖添加坐標線串

問題描述

1 個解決方案

解決方案1
1 已采納 2019-04-06 16:06:35

OpenLayers：無法向地圖添加坐標線串

問題描述

1 個解決方案

解決方案1 1 已采納 2019-04-06 16:06:35

解決方案1
1 已采納 2019-04-06 16:06:35