2017-07-18 147 views
0

使用Mapbox GL JS來繪製地圖。我想在地圖上繪製幾個點序列。每個點應該以地圖的形式出現在地圖上。點序列應該用虛線連接。此外,每個點的順序應使用不同的顏色着色。如何繪製虛線連接的點?

這裏是我的GeoJSON的樣本:

const geoJson = { 
    type: 'FeatureCollection', 
    features: [ 
    { 
     type: 'Feature', 
     properties: { 
     id: 1, 
     }, 
     geometry: { 
     type: 'LineString', 
     coordinates: [ 
      [-77.0366048812866, 38.89873175227713], 
      [-77.03364372253417, 38.89876515143842], 
      [-77.03364372253417, 38.89549195896866], 
      [-77.02982425689697, 38.89549195896866], 
      [-77.02400922775269, 38.89387200688839], 
      [-77.01519012451172, 38.891416957534204], 
      [-77.01521158218382, 38.892068305429156], 
      [-77.00813055038452, 38.892051604275686], 
      [-77.00832366943358, 38.89143365883688], 
      [-77.00818419456482, 38.89082405874451], 
      [-77.00815200805664, 38.88989712255097], 
     ], 
     }, 
    }, 
    { 
     type: 'Feature', 
     properties: { 
     id: 2, 
     }, 
     geometry: { 
     type: 'LineString', 
     coordinates: [ 
      [-77.027035, 38.913438], 
      [-77.015877, 38.917178], 
      [-77.009525, 38.917980], 
     ], 
     }, 
    }, 
    ], 
}; 

如果需要的話我可以改變GeoJSON的,但是這是我的起點。

回答

0

爲了得到虛線點我最終加入2層:

// lines 
    map.addLayer({ 
    id: 'my-points', 
    type: 'line', 
    source: 'my-data', 
    paint: { 
     'line-color': 'gray', 
     'line-width': 1, 
     'line-dasharray': [2, 1], 
    }, 
    }); 

    // circles 
    map.addLayer({ 
    id: 'my-lines', 
    type: 'circle', 
    source: 'my-data', 
    paint: { 
     'circle-color': 'red', 
     'circle-radius': 3, 
    }, 
    }); 
+0

任何例子或者的jsfiddle? –

+0

代碼在答案中。不要有一個jsfiddle,但如果你做一個我可以更新答案 – sthomps