如何在 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']
}));