Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][MySQL][PHP]Kontury na obrazku
Forum PHP.pl > Forum > Przedszkole
brzanek
22.03.2018, 10:49:54
Witam szczerze mówiąc nie wiem jak się do tego zabrać ale potrzebuję zrobić coś takiego jak jest na tym obrazku


Wartości były by pobierane z bazy danych mysql
[PHP] pobierz, plaintext 
  1.     <?
  2.     include('db.php');
  3.     include('array.php');
  4.     ?>
  5.     <link href="http://nowa.pogoda-zachodniopomorskie.pl/testt/css/bootstrap.css" rel="stylesheet">
  6.     <link href="css/style.css" rel="stylesheet">
  7.     <?
  8.     echo '<div class="container">';
  9.     echo '<div class="col-xs-12 col-sm-6 col-md-6"><img src="images/mapa.png" class="img-responsive" alt="">';
  10.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =1 ORDER BY id ASC LIMIT 1");
  11.     while ( $row = mysqli_fetch_array($result) ) {
  12.     echo "<div class='choszczno' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  13.     }
  14.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =2 ORDER BY id ASC LIMIT 1");
  15.     while ( $row = mysqli_fetch_array($result) ) {
  16.     echo "<div class='szczecin' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  17.     }
  18.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =4 ORDER BY id ASC LIMIT 1");
  19.     while ( $row = mysqli_fetch_array($result) ) {
  20.     echo "<div class='swinoujscie' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  21.     }
  22.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =3 ORDER BY id ASC LIMIT 1");
  23.     while ( $row = mysqli_fetch_array($result) ) {
  24.     echo "<div class='koszalin' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  25.     }
  26.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =5 ORDER BY id ASC LIMIT 1");
  27.     while ( $row = mysqli_fetch_array($result) ) {
  28.     echo "<div class='walcz' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  29.     }
  30.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =6 ORDER BY id ASC LIMIT 1");
  31.     while ( $row = mysqli_fetch_array($result) ) {
  32.     echo "<div class='kolobrzeg' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  33.     }
  34.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =7 ORDER BY id ASC LIMIT 1");
  35.     while ( $row = mysqli_fetch_array($result) ) {
  36.     echo "<div class='debno' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  37.     }
  38.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =8 ORDER BY id ASC LIMIT 1");
  39.     while ( $row = mysqli_fetch_array($result) ) {
  40.     echo "<div class='drawsko' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  41.     }
  42.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =9 ORDER BY id ASC LIMIT 1");
  43.     while ( $row = mysqli_fetch_array($result) ) {
  44.     echo "<div class='darlowo' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  45.     }
  46.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =10 ORDER BY id ASC LIMIT 1");
  47.     while ( $row = mysqli_fetch_array($result) ) {
  48.     echo "<div class='gryfice' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  49.     }
  50.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =11 ORDER BY id ASC LIMIT 1");
  51.     while ( $row = mysqli_fetch_array($result) ) {
  52.     echo "<div class='nowogard' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  53.     }
  54.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =12 ORDER BY id ASC LIMIT 1");
  55.     while ( $row = mysqli_fetch_array($result) ) {
  56.     echo "<div class='stargard' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  57.     }
  58.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =13 ORDER BY id ASC LIMIT 1");
  59.     while ( $row = mysqli_fetch_array($result) ) {
  60.     echo "<div class='szczecinek' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  61.     }
  62.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =14 ORDER BY id ASC LIMIT 1");
  63.     while ( $row = mysqli_fetch_array($result) ) {
  64.     echo "<div class='czlopa' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  65.     }
  66.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =15 ORDER BY id ASC LIMIT 1");
  67.     while ( $row = mysqli_fetch_array($result) ) {
  68.     echo "<div class='czaplinek' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  69.     }
  70.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =16 ORDER BY id ASC LIMIT 1");
  71.     while ( $row = mysqli_fetch_array($result) ) {
  72.     echo "<div class='slawno' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  73.     }
  74.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =17 ORDER BY id ASC LIMIT 1");
  75.     while ( $row = mysqli_fetch_array($result) ) {
  76.     echo "<div class='bobolice' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  77.     }
  78.     $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =35 ORDER BY id ASC LIMIT 1");
  79.     while ( $row = mysqli_fetch_array($result) ) {
  80.     echo "<div class='kamien' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
  81.     }
  82.     echo '</div>';
  83.     echo '</div>';
  84.     ?>
[PHP] pobierz, plaintext


Teraz jak połączyć te wartości liniami zaokrąglonymi (tak jak na obrazku wyżej) i na koniec jak kolorować pola odcinane liniami?

Czy jest to możliwe w php?
nospor
22.03.2018, 10:55:30
No najpierw musisz wyliczyc te obszary a to z php ma sredni zwiazek - ot kupa obliczen matematycznych na podstawie jakiegos fajnego algorytmu.

ps: w cudny sposob pobierasz dane z bazy wink.gif
trueblue
22.03.2018, 10:55:44
A masz w bazie zapisane współrzędne tych punktów?
brzanek
22.03.2018, 11:13:14
Mogę mieć te współrzędne.
trueblue
22.03.2018, 11:19:41
Jeśli w PHP to przychodzi mi taki pomysł:
1. Dla każdego punktu danych obliczasz w jakim promieniu ma sąsiadów.
2. Kreślisz okręgi o wyliczonym promieniu względem środka (punktu danej), zaczynając od tych o największym promieniu przypisanych do najniższego zakresu (czyli na najniższej warstwie największe okręgi).
3. Na całość nakładasz mocny gaussian blur.
4. Potem robisz posteryzację obrazka.
5. Po posteryzacji otrzymane kolory obszarów mogą nie odpowiadać tym, którymi chcesz kolorować obszary, więc musisz znaleźć wszystkie jakie otrzymałeś, zamapować do docelowych i pokolorować obszary tymi docelowymi.

Być może przy kreśleniu okręgów powstaną czarne przestrzenie jeśli gdzieniegdzie okręgi nie będą się ze sobą stykać, więc rozwiązaniem może być wypełnienie całości na start kolorem powiązanym z najniższym zakresem i już niekreślenie okręgów przypisanych do tego zakresu.

A w JS być może to:
https://developers.google.com/maps/document...s/layer-heatmap
brzanek
22.03.2018, 21:03:13
Znalazłem troszkę inny na to sposób tylko mam jeden problem
Jak zastąpić dane w "" danymi z bazy mysql
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>  
  3. <head>
  4.     <title>GridLayer Test</title>
  5.     <meta charset="utf-8" />
  6.     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css"/>
  7.     <style>
  8.         body {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.         html, body, #map {
  13.             height: 590px;
  14.             width: 600px;
  15. 			position: absolute;
  16. 			opacity: 0.999;
  17.         }
  18. 		.tlo {
  19.             height: 603px;
  20.             width: 610px;
  21. 			position: absolute;
  22. 		}
  23.     </style>
  24. </head>
  25. <body>
  26.     <div id="map"></div>
  27.     <div class="tlo">
  28. 	<img src="http://brzanek.webd.pl/2017/Leaflet.idw-master/example/mapaaa.png">
  29. 	</div>
  30. </body>
  31.     <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"> </script>
  32.     <script src="../src/leaflet-idw.js"></script>
  33.     <script>
  34.  
  35.     var meteoPoints = [
  36. [53.165246, 15.405640, "11"],
  37. [53.423798, 14.546544, "0"],
  38. [54.188946, 16.177284, "0"],
  39. [53.901899, 14.243151, "0"],
  40. [53.272598, 16.466926, "0"],
  41. [54.172996, 15.591984, "0"],
  42. [52.731677, 14.696901, "0"],
  43. [53.532029, 15.811808, "0"],
  44. [54.429791, 16.398224, "0"],
  45. [53.913285, 15.201148, "0"],
  46. [53.673976, 15.110885, "0"],
  47. [53.334351, 15.046874, "0"],
  48. [53.709982, 16.693660, "0"],
  49. [53.087991, 16.118558, "11"],
  50. [53.555588, 16.229920, "0"],
  51. [54.358499, 16.677729, "0"],
  52. [53.952695, 16.590419, "0"],
  53. [53.298850, 15.902762, "0"],
  54. [53.037661, 15.663925, "0"],
  55. [52.996378, 15.212792, "0"],
  56. [53.465263, 15.336522, "0"],
  57. [53.104978, 15.080064, "0"],
  58. [52.922836, 14.855624, "0"],
  59. [52.960999, 14.431242, "0"],
  60. [53.251748, 14.487758, "0"],
  61. [53.550950, 14.570500, "0"],
  62. [53.147528, 14.896472, "0"],
  63. [53.562454, 14.827649, "0"],
  64. [53.638311, 15.622662, "0"],
  65. [54.007723, 15.981029, "0"],
  66. [53.772207, 15.408535, "0"],
  67. [54.027723, 15.533004, "0"],
  68. [54.062919, 15.270917, "0"],
  69. [54.081248, 15.015305, "0"],
  70. [53.969001, 14.776628, "0"],
  71. [54.027660, 14.759995, "0"]
  72.         ];
  73.  
  74.     var map = L.map('map').setView([53.606015, 15.517806], 8);
  75.  
  76.     var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  77.         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  78.     }).addTo(map);
  79.  
  80.     var idw = L.idwLayer(meteoPoints,{
  81.             opacity: 3,
  82.             maxZoom: 8,
  83.             cellSize: 1,
  84.             exp: 5,
  85.             max: 30,
  86. 			min: -25
  87.         }).addTo(map);
  88.  
  89.     </script>
  90. </html>
[PHP] pobierz, plaintext
SmokAnalog
22.03.2018, 21:07:40 
[HTML] pobierz, plaintext 
  1. <script>
  2. let data = <?php echo json_encode($data) ?>;
  3. </script>
[HTML] pobierz, plaintext


Albo zrób Ajaxa/fetch do pliku, który wypluwa te dane. Pewnie pierwszy sposób będzie łatwiejszy.
brzanek
22.03.2018, 22:12:51
Nie bardzo wiem jak to zrobić.
Pojawił się jeszcze jeden problem pobierane wartości z bazy danych mogą być też ujemne.
Czy w tym kodzie jaki podałem wyżej mogę zastosować jakąś tablicę gdzie przypiszę coś takiego
danem z bazy mysql
1 = -22 (wartość z bazy)
2 = -21 (wartość z bazy)
3 = -20 (wartość z bazy)
itd
Teraz w tym miejscu chciałbym to zastosować
var meteoPoints = [
[53.165246, 15.405640, "0"],
[53.423798, 14.546544, "0"],
[54.188946, 16.177284, "0"],
[53.901899, 14.243151, "0"],
...
Tu gdzie jest 0
SmokAnalog
22.03.2018, 22:46:13
Te punkty meteo mają być luzem w kodzie? Coś mi to się nie podoba.
brzanek
22.03.2018, 23:01:54
Mogą być luzem lub przypisane na sztywno albo mogą też być pobierane z bazy danych.
Ważne aby były w takiej formie
[PHP] pobierz, plaintext 
  1.     var meteoPoints = [
  2. [53.165246, 15.405640, "11"],
  3. [53.423798, 14.546544, "0"],
  4. [54.188946, 16.177284, "0"],
  5. [53.901899, 14.243151, "0"],
  6. [53.272598, 16.466926, "0"],
  7. [54.172996, 15.591984, "0"],
  8. [52.731677, 14.696901, "0"],
  9. [53.532029, 15.811808, "0"],
  10. [54.429791, 16.398224, "0"],
  11. [53.913285, 15.201148, "0"],
  12. [53.673976, 15.110885, "0"],
  13. [53.334351, 15.046874, "0"],
  14. [53.709982, 16.693660, "0"],
  15. [53.087991, 16.118558, "11"],
  16. [53.555588, 16.229920, "0"],
  17. [54.358499, 16.677729, "0"],
  18. [53.952695, 16.590419, "0"],
  19. [53.298850, 15.902762, "0"],
  20. [53.037661, 15.663925, "0"],
  21. [52.996378, 15.212792, "0"],
  22. [53.465263, 15.336522, "0"],
  23. [53.104978, 15.080064, "0"],
  24. [52.922836, 14.855624, "0"],
  25. [52.960999, 14.431242, "0"],
  26. [53.251748, 14.487758, "0"],
  27. [53.550950, 14.570500, "0"],
  28. [53.147528, 14.896472, "0"],
  29. [53.562454, 14.827649, "0"],
  30. [53.638311, 15.622662, "0"],
  31. [54.007723, 15.981029, "0"],
  32. [53.772207, 15.408535, "0"],
  33. [54.027723, 15.533004, "0"],
  34. [54.062919, 15.270917, "0"],
  35. [54.081248, 15.015305, "0"],
  36. [53.969001, 14.776628, "0"],
  37. [54.027660, 14.759995, "0"]
  38.         ];
[PHP] pobierz, plaintext

To co w cudzysłowie to ma się pobierać z bazy danych. Współrzędne mogą być przypisane na sztywno.
SmokAnalog
22.03.2018, 23:24:00
Dobrze, ale w jaki sposób mają się połączyć? Jaka cecha przypisuje dany punkt do danej liczby? Bo po samej kolejności to raczej dziwacznie.
trzczy
23.03.2018, 06:51:04
Trzeba poszukać bibliotek na hasła:


dla izoterm:
contour | isoline


jeśli idzie o wygładzanie łamanych:

interpolation


https://jpgraph.net/download/manuals/chunkhtml/ch15s06.html
https://plot.ly/nodejs/contour-plots/
brzanek
23.03.2018, 07:36:48
Chodzi o to że kolory jakie są przypisane do wartości są od 0 do 1
[PHP] pobierz, plaintext 
  1.             0: '#ffd4ff',
  2.             0.1: '#ffb5ff',
  3.             0.12: '#f966f9',
  4.             0.15: '#d34a95',
  5.             0.17: '#7d0000',
  6.             0.2: '#a60000',
  7.             0.23: '#e11400',
  8.             0.25: '#ff3300',
  9.             0.27: '#ff6100',
  10.             0.3: '#ffa100',
  11.             0.32: '#ffc03d',
  12.             0.35: '#ffe878',
  13.             0.4: '#01a515',  
  14.             0.43: '#01c318',  
  15.             0.45: '#00e51b',   
  16.             0.47: '#00ff42',            
  17.             0.5: '#5fff88',            
  18. itd
  19.             0.95: '#ef77fe',
  20.             0.97: '#ef77fe',
  21.             1: '#ef77fe'
[PHP] pobierz, plaintext

Nie mam jak zastosować danego koloru do ujemnej wartości dlatego chcę zrobić coś takiego jak tablice w php czyli np.
[PHP] pobierz, plaintext 
  1. $tempArray4=array(
  2. '-20' => '1', 
  3. '-19' => '2', 
  4. '-18' => '2.3', 
  5. '-17' => '2.5', 
  6. '-16' => 2.7'
  7. );
[PHP] pobierz, plaintext

Teraz do pola gdzie podawane są współrzędne i wartości dodał bym coś takiego
zapytanie do bazy i
[PHP] pobierz, plaintext 
  1. [54.027660, 14.759995, ".$tempArray4($row['tempmax']).""],
[PHP] pobierz, plaintext


trzczy ten plot to fajna sprawa ale nie ma tam chyba możliwości wykorzystania tego w php. Tam jest chyba tylko opcja na pythona którego próbowałem odpalić ale coś poszło nie tak i nie zadziałał.
trzczy
23.03.2018, 07:40:17
Tam chyba jest też javascript. Jeszcze może ten trop https://github.com/d3/d3-contour
brzanek
23.03.2018, 09:13:54
Ta strona też nie jest zła tylko tam nie mogę dodać tam mojej mapy z obrazkiem

Chyba jestem zmuszony pracować na tym co dałem wyżej tylko muszę uporać się z tym #13
trueblue
23.03.2018, 11:10:04
Sporo już w tym siedzisz, a masz problemy z podstawami.

Interpolacja zakresu <xmin,xmax> do <0,1>:

y=(x-min)/(xmax-xmin)
brzanek
23.03.2018, 15:52:56
Chyba nie bardzo
x i y to współrzędne a wartość pobierana z bazy danych to tak zwane z czyli wysokość
trueblue
23.03.2018, 15:55:00
A co maja do tego współrzędne x i y? Interpolujesz z.
brzanek
24.03.2018, 19:15:55
Nic mi nie chce wyjść.
Mam przypisane kolory do danych wartości a i tak skrypt robi sobie co chce i daje jakieś swoje dziwne kolory.
Mam taki kod do wyświetlania obrazka
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>  
  3. <head>
  4.     <title>GridLayer Test</title>
  5.     <meta charset="utf-8" />
  6.     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css"/>
  7.     <style>
  8.         body {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.         html, body, #map {
  13.             height: 590px;
  14.             width: 600px;
  15. 			position: absolute;
  16. 			opacity: 0.999;
  17.         }
  18. 		.tlo {
  19.             height: 603px;
  20.             width: 610px;
  21. 			position: absolute;
  22. 		}
  23.     </style>
  24. </head>
  25. <body>
  26.     <div id="map"></div>
  27.     <div class="tlo">
  28. 	<img src="http://brzanek.webd.pl/2017/Leaflet.idw-master/example/mapaaa.png">
  29. 	</div>
  30. </body>
  31.     <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"> </script>
  32.     <script src="../src/leaflet-idw.js"></script>
  33.     <script>
  34. /*
  35. 18 = 2*
  36. 20 = 0*
  37. */  
  38.  
  39. var meteoPoints = [
  40. [53.165246, 15.405640, "13"],
  41. [53.423798, 14.546544, "13"],
  42. [54.188946, 16.177284, "13"],
  43. [53.901899, 14.243151, "14"],
  44. [53.272598, 16.466926, "13"],
  45. [54.172996, 15.591984, "13"],
  46. [52.731677, 14.696901, "13"],
  47. [53.532029, 15.811808, "13"],
  48. [54.429791, 16.398224, "14"],
  49. [53.913285, 15.201148, "13"],
  50. [53.673976, 15.110885, "13"],
  51. [53.334351, 15.046874, "13"],
  52. [53.709982, 16.693660, "13"],
  53. [53.087991, 16.118558, "13"],
  54. [53.555588, 16.229920, "13"],
  55. [54.358499, 16.677729, "14"],
  56. [53.952695, 16.590419, "13"],
  57. [53.298850, 15.902762, "13"],
  58. [53.037661, 15.663925, "13"],
  59. [52.996378, 15.212792, "13"],
  60. [53.465263, 15.336522, "13"],
  61. [53.104978, 15.080064, "13"],
  62. [52.922836, 14.855624, "13"],
  63. [52.960999, 14.431242, "13"],
  64. [53.251748, 14.487758, "13"],
  65. [53.550950, 14.570500, "13"],
  66. [53.147528, 14.896472, "13"],
  67. [53.562454, 14.827649, "13"],
  68. [53.638311, 15.622662, "13"],
  69. [54.007723, 15.981029, "13"],
  70. [53.772207, 15.408535, "13"],
  71. [54.027723, 15.533004, "13"],
  72. [54.062919, 15.270917, "15"],
  73. [54.081248, 15.015305, "14"],
  74. [53.969001, 14.776628, "14"],
  75. [54.027660, 14.759995, "14"],
  76. ];
  77.  
  78.     var map = L.map('map').setView([53.606015, 15.517806], 8);
  79.  
  80.     var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  81.         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  82.     }).addTo(map);
  83.  
  84.     var idw = L.idwLayer(meteoPoints,{
  85.             opacity: 1,
  86.             maxZoom: 8,
  87.             cellSize: 1,
  88.             max: 63
  89.         }).addTo(map);
  90.  
  91.     </script>
  92. </html>
[PHP] pobierz, plaintext

Ten kod odpowiada za interoplacje
leaflet-idw.js
http://brzanek.webd.pl/2017/Leaflet.idw-ma.../leaflet-idw.js
trueblue
24.03.2018, 19:33:10
Zakres temperatur <-20,10>
xmin=-20
xmax=10

Dla x=-20, y=(-20 - -20)/(10 - -20)=0
Dla x=10, y=(10 - -20)/(10 - -20)=1
Dla x=0, y=(0 - -20)/(10 - -20)=0,6666
itd.
brzanek
26.03.2018, 11:56:01
Kolory mam już odpowiednie ale jeszcze nie wiem jak zrobić aby te kolory były przypisane na sztywno bo teraz wychodzi gradient.
Tak wygląda kod co za to odpowiada. 
[PHP] pobierz, plaintext 
  1.     var idw = L.idwLayer(meteoPoints,{
  2.             opacity: 1,
  3.             maxZoom: 8,
  4.             cellSize: 1,
  5. 			exp: 3,
  6.  
  7. 			gradient: {
  8. 				0:	'#970033',
  9. 				0.01:	'#b10022',
  10. 				0.02:	'#b90025',
  11. 				0.05:	'#c80026',
  12. 				0.07:	'#d8002a',
  13. 				0.1:	'#ed002f',
  14. 				0.11:	'#fc003e',
  15. 				0.12:	'#dd0004',
  16. 				0.14:	'#e00004',
  17. 				0.15:	'#e90916',
  18. 				0.17:	'#ed1e31',
  19. 				0.19:	'#ee4831',
  20. 				0.2:	'#fc4a06',
  21. 				0.21:	'#fd6007',
  22. 				0.22:	'#fd7707',
  23. 				0.25:	'#fd8e07',
  24. 				0.27:	'#fda207',
  25. 				0.29:	'#feb908',
  26. 				0.3:	'#fed809',
  27. 				0.31:	'#ffee0a',
  28. 				0.32:	'#ffff0c',
  29. 				0.35:	'#e8f909',
  30. 				0.37:	'#cfef08',
  31. 				0.39:	'#b8e609',
  32. 				0.4:	'#a0da08',
  33. 				0.41:	'#89d007',
  34. 				0.42:	'#76c809',
  35. 				0.44:	'#50bf06',
  36. 				0.45:	'#209404',
  37. 				0.47:	'#1c9f05',
  38. 				0.49:	'#1cae05',
  39. 				0.5:	'#21c306',
  40. 				0.51:	'#26dc06',
  41. 				0.52:	'#29eb07',
  42. 				0.54:	'#35ff1b',
  43. 				0.55:	'#44ff33',
  44. 				0.57:	'#6cff64',
  45. 				0.59:	'#9aff96',
  46. 				0.6:	'#cdffff',
  47. 				0.61:	'#cdffff',
  48. 				0.62:	'#cdffff',
  49. 				0.65:	'#cdffff',
  50. 				0.67:	'#cdffff',
  51. 				0.69:	'#cdffff',
  52. 				0.7:	'#cdffff',
  53. 				0.71:	'#cdffff',
  54. 				0.72:	'#cdffff',
  55. 				0.75:	'#cdffff',
  56. 				0.77:	'#cdffff',
  57. 				0.79:	'#cdffff',
  58. 				0.8:	'#cdffff',
  59. 				0.81:	'#cdffff',
  60. 				0.82:	'#cdffff',
  61. 				0.85:	'#cdffff',
  62. 				0.87:	'#cdffff',
  63. 				0.89:	'#cdffff',
  64. 				0.9:	'#cdffff',
  65. 				0.91:	'#cdffff',
  66. 				0.92:	'#cdffff',
  67. 				0.95:	'#cdffff',
  68. 				0.97:	'#cdffff',
  69. 				0.99:	'#cdffff',
  70. 				1:	'#cdffff'				
  71. 			},
  72.  
  73.             max: 63
  74.         }).addTo(map);
[PHP] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.