根據Google地圖中的另一個變量更改LineString GeoJSON的顏色

Question

我正在將GeoJson LineString功能加載到Google Maps API中。是否有辦法根據另一個變量的值對行字符串的不同部分進行不同的着色，例如：在每個座標點的速度或道路坡度？

Answer 1

如果您有與您的多段線尺寸相同的顏色數組（或可以翻譯成顏色的數組），您可以創建一個google.maps.Polyline for each segment of the GeoJSON LineString, each google.maps.Polyline可以有其自己的顏色。

// process the loaded GeoJSON data. 
    google.maps.event.addListener(map.data, 'addfeature', function(e) { 
    if (e.feature.getGeometry().getType() === 'GeometryCollection') { 
     var geometry = e.feature.getGeometry().getArray(); 
     for (var i = 0; i < geometry.length; i++) { 
     if (geometry[i].getType() === 'LineString') { 
      var polyPath = geometry[i].getArray(); 
      for (var j = 0; j < polyPath.length - 1; j++) { 
      new google.maps.Polyline({ 
       map: map, 
       path: [polyPath[j], polyPath[j + 1]], 
       strokeColor: colors[j % colors.length], 
       strokeOpacity: 1, 
      }) 
      } 
     } 
     } 
    } 
    map.data.setMap(null); 
    }); 

proof of concept fiddle

function initialize() { 
 
    // Create a simple map. 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: 8, 
 
    center: { 
 
     lat: 37, 
 
     lng: 134 
 
    } 
 
    }); 
 

 
    // data to determine colors of line segments. 
 
    var colors = ["#FF0000", "#00FF00", "#0000FF"]; 
 
    // process the loaded GeoJSON data. 
 
    google.maps.event.addListener(map.data, 'addfeature', function(e) { 
 
    if (e.feature.getGeometry().getType() === 'GeometryCollection') { 
 
     var geometry = e.feature.getGeometry().getArray(); 
 
     for (var i = 0; i < geometry.length; i++) { 
 
     if (geometry[i].getType() === 'LineString') { 
 
      var polyPath = geometry[i].getArray(); 
 
      for (var j = 0; j < polyPath.length - 1; j++) { 
 
      new google.maps.Polyline({ 
 
       map: map, 
 
       path: [polyPath[j], polyPath[j + 1]], 
 
       strokeColor: colors[j % colors.length], 
 
       strokeOpacity: 1, 
 
      }) 
 
      } 
 
     } 
 
     } 
 
    } 
 
    map.data.setMap(null); 
 
    }); 
 
    map.data.addGeoJson(data); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var data = { 
 
    "type": "FeatureCollection", 
 
    "created": "2014/07/08 03:00:55 GMT", 
 
    "announced_date": "2017/07/10 03:00:55 GMT", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "properties": { 
 
     "name": "n18", 
 
     "analized_date": "2013/07/08 10:00:00 GMT" 
 
    }, 
 
    "geometry": { 
 
     "type": "GeometryCollection", 
 
     "geometries": [{ 
 
     "type": "LineString", 
 
     "coordinates": [ 
 
      [134.7, 37.3], 
 
      [134.6, 37.1], 
 
      [134.4, 37.1], 
 
      [134.3, 36.9] 
 
     ] 
 
     }] 
 
    } 
 
    }] 
 
};

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>