Tworzenie siatki "plaster miodu"

matti9410 · 2018-03-07T17:31:08.000Z

Witam,
potrzebuję narysować siatkę na mapie (plastra miodu) z informacją o położeniu środka sześciokąta i jego aktualnej wielkości. W momencie przybliżania siatka ma się zagęszczać, a po oddaleniu rozszerzać. W momencie kliknięcia na dany sześciokąt wyświetla się informacja.
http://szablony.freeware.info.pl/background.html
W jaki sposób mogę taką siatkę stworzyć ?

RicoElectrico · 2018-03-07T20:01:04.000Z

Witaj, obecnie za mało informacji podałeś, aby spróbować Ci pomóc.

Jaka platforma? Przeglądarka czy Android/iOS?
Jaka biblioteka do wyświetlania map? Leaflet, OpenLayers, osmdroid, Mapbox GL, Tangram czy coś jeszcze innego?

matti9410 · 2018-03-08T07:07:31.000Z

Chodzi o mapy w przeglądarce, biblioteka to Leaflet.
Coś podobnego znalazłem tutaj github.com/euoia/hex-grid.js/tree/master z tym że nie jest to dla map. http://gps.wroclaw.pl/mapy.html
Chodzi tutaj o stworzenie czegoś ala heat mapy, z możliwością kolorowania pól (plastrów miodu) w zależności od jakiejś wartości a po kliknieciu w pole wykonywać jakiś skrypt JS. Przez to potrzebuje wiedzieć w jakim miejscu jest pole żeby wiedzieć że gdy w polu są 2 pkt to mogę je uśrednić i zamalować pole na jakiś tam kolor.

RicoElectrico · 2018-03-08T08:49:53.000Z

Biblioteka leaflet-hexbin robi coś takiego, z tym że opiera się to na zliczaniu punktów wpadających w element siatki.
Nie robi dokładnie tego czego potrzebujesz, ale zawsze możesz ją sobie przerobić.

matti9410 · 2018-03-22T18:47:35.000Z

dzieki mam z ta biblioteka jeden mały problem w przerobieniu. Nie umiem pobrac srodków połozenia pól. Do biblioteki jest dołączona biblioteka d3-hexabin.js https://github.com/d3/d3-hexbin ma ona w sobie wbudowaną funkcję o ile dobrze tłumaczę dokumentacje

# hexbin.centers()

Returns an array of [x, y] points representing the centers of every hexagon in the extent.

Nie działa mi to… zwraca mi to aby jeden punkt [0,0].
Część kodu

// Create the hex layout
this._hexLayout = d3_hexbin()
.radius(this.options.radius)
.x(function(d) { return d.point[0]; })
.y(function(d) { return d.point[1]; });

centers: function() {
var points_table = [];
points_table = this._hexLayout.centers();

for (let i=0; i<points_table.length; i++) {
console.log('licznik pętli: ' + i);
console.log('element: ' + points_table[i]);
}

return points_table;
},

var hexLayer = L.hexbinLayer(options).addTo(map)
hexLayer.centers();

Jest ktoś w stanie mi pomóc ogarnąć tą jedną rzecz ? Strasznie mnie to blokuje, siedzę nad tym już któryś dzień ;/.