Изменение цвета LineString GeoJSON на основе другой переменной в Картах Google

Question

Я загружаю функцию GeoJson LineString в API Карт Google. Есть ли способ покрасить различные части строки строки по-разному на основе значения другой переменной, например. скорости или наклона дороги в каждой точке координат?

Answer 1

Если у вас есть набор цветов (или массив чисел, которые вы можете перевести в цвета), размер которого равен вашей полилинии, вы можете создать google.maps.Polyline google.maps.Polyline for each segment of the GeoJSON LineString, each.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>