Как нарисовать область на карте, окрашенную градиентом?

Я хотел бы нарисовать фигуру (скажем, прямоугольник, для простоты), покрывая область цветом, которая изменяет оттенок, например. от зеленого до красного. Единственный подход - рисовать газиллион маленьких прямоугольников с цветами, смещающимися по индексу, или есть способ указать градиентный от-до (или даже лучше, от-до-до) цветной массив?Как нарисовать область на карте, окрашенную градиентом?

источник

2016-10-10 Konrad Viltersten

Я думаю, что вы можете использовать холст html для создания градиента и заполнить его форму (http://www.w3schools.com/tags/canvas_createlineargradient.asp).

Или вы можете использовать градиент svg (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients).

Также вы можете попытаться использовать область html-карты с некоторыми плагинами.

Для вашей карты полигоны, нарисованные как this. Параметры для них описаны here. Кажется, что они поддерживают только цвета без градиентов, но в качестве опции вы можете попробовать наложить как this.

источник

2016-10-10 12:35:18

у меня нет ни одного примера, еще потому, что я нахожусь на стадии проектирования, и пытается отработать сложные детали. Но если вы представляете себе, что у вас есть две точки (или более на самом деле) со значениями -5 и +23 с соответствующими цветами красного и зеленого, то я бы хотел нарисовать круги, интерполирующие значения между ними. Такое решение, которое я могу сделать, используя D3, но теперь я хочу ** как-то ** вставить его в карту отсюда. И вот где я застрял ... –

Вы можете изменить свою карту на Карты Google или использовать api для своей карты: Они поддерживают svg, поэтому вы можете сделать фигуру в svg с градиентом и использовать ее (https: // developer.here.com/api-explorer/maps-js/v3.0/markers/map-with-svg-graphic-markers). Вы также можете использовать маркер dom (https://developer.here.com/api-explorer/maps-js/v3.0/markers/map-with-dom-marker) с градиентом css (http: // www .colorzilla.com/gradient-editor /) Вы можете попробовать справиться с этим (https://developer.here.com/api-explorer/data-lens/data_lens/telco-heatmap3) –

Для вашей карты полигоны, нарисованные как здесь описаны параметры (https://developer.here.com/api-explorer/maps-js/v3.0/geoshapes/polygon-on-the-map) для них (https://developer.here.com /javascript-apis/documentation/v3/maps/topics_api_nlp/h-map-spatialstyle-options.html#h-map-spatialstyle-options__fillcolor). Кажется, что они поддерживают только цвета без градиентов, но в качестве опции вы можете попробовать наложить (https://developer.here.com/api-explorer/maps-js/v3.0/infoBubbles/custom-tile-overlay) , –

Если вы используете Google Map, вы можете попробовать Heatmaps с градиентами

источник

2016-10-10 12:40:55 Thaadikkaaran

Вот к чему я стремлюсь. Существует ли общее решение, не связанное с Google Maps? Я работаю с Here Maps. –

Я не считаю, что у нас есть общее решение. Но вы можете расширить решение Map, которое вы используете для поддержки слоев градиента с помощью решения @Sergey Yastrebov. – Thaadikkaaran

Если вы действительно после тепловой карты, как это было предложено в свой комментарий в @ jaganathan-bantheswaran ответ, то вы сможете сделать это в ЗДЕСЬ Карты, используя H.data.heatmap.Provider класс

в API Reference описывает, как это сделать:

// Create heat map provider 
var heatmapProvider = new H.data.heatmap.Provider({ 
    colors: new H.data.heatmap.Colors({ 
    '0': 'blue', 
    '0.5': 'yellow', 
    '1': 'red' 
    }, true), 
    // paint assumed values in regions where no data is available 
    assumeValues: true 
}); 

// Add the data 
heatmapProvider.addData([ 
    {lat: 52, lng: 1, value: 1}, 
    {lat: 53, lng: 2, value: 2} 
]); 

// Create semi transparent heat map layer 
var heatmapLayer = new H.map.layer.TileLayer(heatmapProvider, { 
    opacity: 0.6 
}); 

// Add layer to the map 
map.addLayer(heatmapLayer);

источник

2016-10-22 20:13:13

Как нарисовать область на карте, окрашенную градиентом?

ответ

Смежные вопросы