[JavaScript][MySQL][PHP]Kontury na obrazku Opcje

[brzanek]

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 
    <?
    include('db.php');
    include('array.php');
    ?>
    <link href="http://nowa.pogoda-zachodniopomorskie.pl/testt/css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <?
    echo '<div class="container">';
    echo '<div class="col-xs-12 col-sm-6 col-md-6"><img src="images/mapa.png" class="img-responsive" alt="">';
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =1 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='choszczno' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =2 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='szczecin' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =4 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='swinoujscie' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =3 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='koszalin' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =5 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='walcz' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =6 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='kolobrzeg' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =7 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='debno' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =8 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='drawsko' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =9 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='darlowo' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =10 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='gryfice' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =11 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='nowogard' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =12 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='stargard' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =13 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='szczecinek' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =14 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='czlopa' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =15 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='czaplinek' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =16 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='slawno' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =17 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='bobolice' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    $result = $mysqli->query("SELECT * FROM obecnie WHERE id_miasto =35 ORDER BY id ASC LIMIT 1");
    while ( $row = mysqli_fetch_array($result) ) {
    echo "<div class='kamien' data-toggle='tooltip' data-placement='top' title='Temperatura &deg;C' style='color: ".$tempArray4[ceil($row['temperature'])].";'> ".$row['temperature']."</div>";
    }
    echo '</div>';
    echo '</div>';
    ?>
[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]

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

[trueblue]

A masz w bazie zapisane współrzędne tych punktów?

[brzanek]

Mogę mieć te współrzędne.

[trueblue]

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

Ten post edytował trueblue 22.03.2018, 11:26:40

[brzanek]

Znalazłem troszkę inny na to sposób tylko mam jeden problem
Jak zastąpić dane w "" danymi z bazy mysql

[PHP] pobierz, plaintext 
<!DOCTYPE html>
<html>  
<head>
    <title>GridLayer Test</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css"/>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 590px;
            width: 600px;
			position: absolute;
			opacity: 0.999;
        }
		.tlo {
            height: 603px;
            width: 610px;
			position: absolute;
		}
    </style>
</head>
<body>
    <div id="map"></div>
    <div class="tlo">
	<img src="http://brzanek.webd.pl/2017/Leaflet.idw-master/example/mapaaa.png">
	</div>
</body>
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"> </script>
    <script src="../src/leaflet-idw.js"></script>
    <script>
 
    var meteoPoints = [
[53.165246, 15.405640, "11"],
[53.423798, 14.546544, "0"],
[54.188946, 16.177284, "0"],
[53.901899, 14.243151, "0"],
[53.272598, 16.466926, "0"],
[54.172996, 15.591984, "0"],
[52.731677, 14.696901, "0"],
[53.532029, 15.811808, "0"],
[54.429791, 16.398224, "0"],
[53.913285, 15.201148, "0"],
[53.673976, 15.110885, "0"],
[53.334351, 15.046874, "0"],
[53.709982, 16.693660, "0"],
[53.087991, 16.118558, "11"],
[53.555588, 16.229920, "0"],
[54.358499, 16.677729, "0"],
[53.952695, 16.590419, "0"],
[53.298850, 15.902762, "0"],
[53.037661, 15.663925, "0"],
[52.996378, 15.212792, "0"],
[53.465263, 15.336522, "0"],
[53.104978, 15.080064, "0"],
[52.922836, 14.855624, "0"],
[52.960999, 14.431242, "0"],
[53.251748, 14.487758, "0"],
[53.550950, 14.570500, "0"],
[53.147528, 14.896472, "0"],
[53.562454, 14.827649, "0"],
[53.638311, 15.622662, "0"],
[54.007723, 15.981029, "0"],
[53.772207, 15.408535, "0"],
[54.027723, 15.533004, "0"],
[54.062919, 15.270917, "0"],
[54.081248, 15.015305, "0"],
[53.969001, 14.776628, "0"],
[54.027660, 14.759995, "0"]
        ];
 
    var map = L.map('map').setView([53.606015, 15.517806], 8);
 
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);
 
    var idw = L.idwLayer(meteoPoints,{
            opacity: 3,
            maxZoom: 8,
            cellSize: 1,
            exp: 5,
            max: 30,
			min: -25
        }).addTo(map);
 
    </script>
</html>
[PHP] pobierz, plaintext 

[SmokAnalog]

[HTML] pobierz, plaintext 
<script>
let data = <?php echo json_encode($data) ?>;
</script>
[HTML] pobierz, plaintext 

Albo zrób Ajaxa/fetch do pliku, który wypluwa te dane. Pewnie pierwszy sposób będzie łatwiejszy.

[brzanek]

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]

Te punkty meteo mają być luzem w kodzie? Coś mi to się nie podoba.

[brzanek]

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 
    var meteoPoints = [
[53.165246, 15.405640, "11"],
[53.423798, 14.546544, "0"],
[54.188946, 16.177284, "0"],
[53.901899, 14.243151, "0"],
[53.272598, 16.466926, "0"],
[54.172996, 15.591984, "0"],
[52.731677, 14.696901, "0"],
[53.532029, 15.811808, "0"],
[54.429791, 16.398224, "0"],
[53.913285, 15.201148, "0"],
[53.673976, 15.110885, "0"],
[53.334351, 15.046874, "0"],
[53.709982, 16.693660, "0"],
[53.087991, 16.118558, "11"],
[53.555588, 16.229920, "0"],
[54.358499, 16.677729, "0"],
[53.952695, 16.590419, "0"],
[53.298850, 15.902762, "0"],
[53.037661, 15.663925, "0"],
[52.996378, 15.212792, "0"],
[53.465263, 15.336522, "0"],
[53.104978, 15.080064, "0"],
[52.922836, 14.855624, "0"],
[52.960999, 14.431242, "0"],
[53.251748, 14.487758, "0"],
[53.550950, 14.570500, "0"],
[53.147528, 14.896472, "0"],
[53.562454, 14.827649, "0"],
[53.638311, 15.622662, "0"],
[54.007723, 15.981029, "0"],
[53.772207, 15.408535, "0"],
[54.027723, 15.533004, "0"],
[54.062919, 15.270917, "0"],
[54.081248, 15.015305, "0"],
[53.969001, 14.776628, "0"],
[54.027660, 14.759995, "0"]
        ];
[PHP] pobierz, plaintext 

To co w cudzysłowie to ma się pobierać z bazy danych. Współrzędne mogą być przypisane na sztywno.

Ten post edytował brzanek 22.03.2018, 23:04:24

[SmokAnalog]

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]

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]

Chodzi o to że kolory jakie są przypisane do wartości są od 0 do 1

[PHP] pobierz, plaintext 
            0: '#ffd4ff',
            0.1: '#ffb5ff',
            0.12: '#f966f9',
            0.15: '#d34a95',
            0.17: '#7d0000',
            0.2: '#a60000',
            0.23: '#e11400',
            0.25: '#ff3300',
            0.27: '#ff6100',
            0.3: '#ffa100',
            0.32: '#ffc03d',
            0.35: '#ffe878',
            0.4: '#01a515',  
            0.43: '#01c318',  
            0.45: '#00e51b',   
            0.47: '#00ff42',            
            0.5: '#5fff88',            
itd
            0.95: '#ef77fe',
            0.97: '#ef77fe',
            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 
$tempArray4=array(
'-20' => '1', 
'-19' => '2', 
'-18' => '2.3', 
'-17' => '2.5', 
'-16' => 2.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 
[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]

Tam chyba jest też javascript. Jeszcze może ten trop https://github.com/d3/d3-contour

[brzanek]

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]

Sporo już w tym siedzisz, a masz problemy z podstawami.

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

y=(x-min)/(xmax-xmin)

[brzanek]

Chyba nie bardzo
x i y to współrzędne a wartość pobierana z bazy danych to tak zwane z czyli wysokość

[trueblue]

A co maja do tego współrzędne x i y? Interpolujesz z.

[brzanek]

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 
<!DOCTYPE html>
<html>  
<head>
    <title>GridLayer Test</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css"/>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 590px;
            width: 600px;
			position: absolute;
			opacity: 0.999;
        }
		.tlo {
            height: 603px;
            width: 610px;
			position: absolute;
		}
    </style>
</head>
<body>
    <div id="map"></div>
    <div class="tlo">
	<img src="http://brzanek.webd.pl/2017/Leaflet.idw-master/example/mapaaa.png">
	</div>
</body>
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"> </script>
    <script src="../src/leaflet-idw.js"></script>
    <script>
/*
18 = 2*
20 = 0*
*/  
 
var meteoPoints = [
[53.165246, 15.405640, "13"],
[53.423798, 14.546544, "13"],
[54.188946, 16.177284, "13"],
[53.901899, 14.243151, "14"],
[53.272598, 16.466926, "13"],
[54.172996, 15.591984, "13"],
[52.731677, 14.696901, "13"],
[53.532029, 15.811808, "13"],
[54.429791, 16.398224, "14"],
[53.913285, 15.201148, "13"],
[53.673976, 15.110885, "13"],
[53.334351, 15.046874, "13"],
[53.709982, 16.693660, "13"],
[53.087991, 16.118558, "13"],
[53.555588, 16.229920, "13"],
[54.358499, 16.677729, "14"],
[53.952695, 16.590419, "13"],
[53.298850, 15.902762, "13"],
[53.037661, 15.663925, "13"],
[52.996378, 15.212792, "13"],
[53.465263, 15.336522, "13"],
[53.104978, 15.080064, "13"],
[52.922836, 14.855624, "13"],
[52.960999, 14.431242, "13"],
[53.251748, 14.487758, "13"],
[53.550950, 14.570500, "13"],
[53.147528, 14.896472, "13"],
[53.562454, 14.827649, "13"],
[53.638311, 15.622662, "13"],
[54.007723, 15.981029, "13"],
[53.772207, 15.408535, "13"],
[54.027723, 15.533004, "13"],
[54.062919, 15.270917, "15"],
[54.081248, 15.015305, "14"],
[53.969001, 14.776628, "14"],
[54.027660, 14.759995, "14"],
];
 
    var map = L.map('map').setView([53.606015, 15.517806], 8);
 
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);
 
    var idw = L.idwLayer(meteoPoints,{
            opacity: 1,
            maxZoom: 8,
            cellSize: 1,
            max: 63
        }).addTo(map);
 
    </script>
</html>
[PHP] pobierz, plaintext 

Ten kod odpowiada za interoplacje
leaflet-idw.js
http://brzanek.webd.pl/2017/Leaflet.idw-ma.../leaflet-idw.js

[trueblue]

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.