如何在 azure 地圖中添加雙向線

Question

有什么方法可以在兩個坐標之間添加兩條折線 new atlas.data.LineString([[point A],[point B]]) new atlas.data.LineString([[point B],[point A]])像這樣，當我將它添加到數據源時它只顯示一行

Answer 1

如果它只是你想要在點之間 plot 並用兩個不同的 colors 表示的折線，你可以使用 LineLayerOptions 的偏移屬性和plot使用以下 JavaScript 的線。

  var dataSource = new atlas.source.DataSource();
  map.sources.add(dataSource);

  //Create a line and add it to the data source.
  dataSource.add(new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]));

  //Create a line layer to render the line to the map.
  map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
    strokeColor: 'green',
    strokeWidth: 1,
    offset: -2
  })); 
  
  map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
    strokeColor: 'red',
    strokeWidth: 1,
    offset: 2
  })); 
});

上述 JavaScript 將在 Azure 地圖上產生以下策略線。

或者，您可以根據需要添加不同的數據源，並為每個數據源添加 map 層。 但是您可以通過使用上面指示的單個數據源來實現相同的 output。

我已經根據 Azure 地圖文檔構建了 JavaScript 代碼將線圖層添加到 Map ，您可以在其中找到用於添加符號和線漸變的出色代碼參考。 這是LineLayers界面的鏈接，它提供了一個選項列表，您可以在 Azure Map 中渲染線層時使用這些選項。

Answer 2

如果您有一個線串並且想要第二個坐標順序相反的線串，您可以創建線串的深層副本，然后反轉坐標數組，然后將線添加到數據源。 例如，如果您有一個 GeoJSON 線串 object：

var line = new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]);

//Create a deep copy of the line.
var newLine  = JSON.parse(JSON.stringify(line));

//Reverse the order of the coordinates in the new line.
newLine.coordinates.reverse();

如您所述，這些線在渲染時會重疊。 您可以做些什么來添加視覺分隔，將其中一個變成 GeoJSON 功能並添加一個唯一的屬性，該屬性可以被數據驅動 styles 看到，然后使用LineLayer的偏移選項。 例如：

//Create a feature from the line and add some property we can use to know this is a reverse copy of a line when styling.
var newFeature = new atlas.data.Feature(newLine, { isCopy: true });

//Add the feature to the data source instead of the new line.
datasource.add(newFeature);

//Have two-line layers with a filter 

//Line layer for original lines.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
    strokeColor: 'green',
    strokeWidth: 1,
    offset: -2,
    filter: ['!', ['has', 'isCopy']]
})); 

//A second line layer that renders the line copies
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
    strokeColor: 'red',
    strokeWidth: 1,
    offset: 2,
    filter: ['has', 'isCopy']
}));