Карта с интерактивными полигонами для извлечения свойств и заполнения столбца таблицы с использованием HTML / CSS - PullRequest
Новая
       24

Карта с интерактивными полигонами для извлечения свойств и заполнения столбца таблицы с использованием HTML / CSS

0 голосов
/ 17 января 2019

У меня нет опыта в кодировании ... Я создал интерактивную карту из mapbox с векторным файлом из набора плиток. В дополнение к этому я добавил ползунок в левой части карты, а внутри ползунка - таблицу. С POPOUT, когда я нажимаю «CROP FIELD» ...

Как это: 

<html>
	<head>
	    <meta charset='utf-8' />
	    <title>Locator</title>
	    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
	    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
   </head>

	    <style>
			body {
				color:#404040;
				font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
				margin:0;
				padding:0;
				-webkit-font-smoothing:antialiased;
			}

			.sidebar {
				position:absolute;
				width:20.0%;
				height:100%;
				top:0;left:0;
				overflow:hidden;
				border-right:1px solid rgba(0,0,0,0.25);
			}

			.map {
				position:absolute;
				left:20.0%;
				width:80.0%;
				top:0;bottom:0;
			}
			          table.minimalistBlack {
										margin:0px 0px;
			              border: 2px solid #000000;
			              width: 20%;
			              text-align: left;
			              border-collapse: collapse;
										

			            }
			            table.minimalistBlack td, table.minimalistBlack th {
			              border: 1px solid #000000;
			              padding: 5px 4px;
			            }
			            table.minimalistBlack tbody td {
			              font-size: 13px;
			            }
			            table.minimalistBlack thead {
			              background: #009933;
			              border-bottom: 2px solid #000000;
			            }
			            table.minimalistBlack thead th {
			              font-size: 15px;
			              font-weight: bold;
			              color: #ffffff;
			              text-align: left;
			              border-left: 2px solid #009933;
			            }
			            table.minimalistBlack thead th:first-child {
			              border-left: none;
			            }

			            table.minimalistBlack tfoot td {
			              font-size: 14px;
			            }


	    </style>
	<body>

    <div class="sidebar"></div>
		<div id='map' class='map'></div>
		<table  style="width:20%">
			<tr>
							 <table class="minimalistBlack">
							 <thead><tr>
							 <th>CARACTERISTICAS</th>
							 <th></th>
							 </tr></thead>
							 <tbody><tr>
							 <td>LLAVE</td>
							 <td id='f1'>cell2_1</td>
							 </tr><tr>
							 <td>NOMBRE DE PLANTA</td>
							 <td id='f2'>cell2_2</td>
							 </tr><tr>
							 <td>COLONIA</td>
							 <td id='f3'>cell2_3</td>
							 </tr><tr>
							 <td>VARIEDAD</td>
							 <td id='f4'>cell2_4</td>
							 </tr><tr>
							 <td>ZAFRA</td>
							 <td id='f5'>cell2_5</td>
							 </tr><tr>
							 <td>HA-REAL</td>
							 <td id='f6'>cell2_6</td>
							 </tr> <tr>
							 <td>TCH-REAL</td>
							 <td id='f7'>cell2_7</td>
							 </tr><tr>
							 <td>HA-COLONIA</td>
							 <td id='f8'>cell2_8</td>
							 </tr><tr>
							 <td>TCH-COLONIA</td>
							 <td id='f9'>cell2_9</td>
							 </tr><tr>
							 <td>EDAD DEL CULTIVO</td>
							 <td id='f10'>cell2_10</td>
							 </tr><tr>
							 <td>NUMERO DE CORTES</td>
							 <td id='f11'>cell2_11</td>
							 </tr><tr>
							 <td>TIPO DE CORTES</td>
							 <td id='f12'>cell2_12</td>
							 </tr>
							 </tbody>
							 <a href="#"></a></td>
							 </tr><tr>
							 </table></div>
  	<script>
  	mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';
  	var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-69.509284, 18.587161],
      zoom: 12.80,
    });

    map.on('load', function () {
     map.addSource('testile', {
            type: 'vector',
            url: 'mapbox://leanamatos.cjqpet0n307lp30nagf56xi89-5tui0'
            });

      map.addLayer({
        'id': 'campos',
        'type': 'fill',
        'source': 'testile',
        'source-layer': 'testile',
        'layout': { },
        'paint': {
          'fill-color': 'transparent',
          'fill-outline-color': '#000000',
          'fill-opacity': 1
            }
        });

        // When a click event occurs on a feature in the states layer, open a popup at the
         // location of the click, with description HTML from its properties.
         map.on('click', 'campos', function (e) {
					 var description = e.features[0].properties.LLAVE;
 	        var description2 = e.features[0].properties.AREA_HA;
 	        var description3 = e.features[0].properties.Cosechado;
 	             new mapboxgl.Popup()
 	                 .setLngLat(e.lngLat)
 	                 .setHTML("LLAVE" + ": "+ description + "<br/>"
 	                 +"AREA" + ": "+ description2+"ha" + "<br/>"
 	                 +"ZAFRA" + ": "+ description3)
 	 
 	                 .addTo(map);
 	         });
         // Change the cursor to a pointer when the mouse is over the states layer.
         map.on('mouseenter', 'campos', function () {
             map.getCanvas().style.cursor = 'pointer';
         });

         // Change it back to a pointer when it leaves.
         map.on('mouseleave', 'campos', function () {
             map.getCanvas().style.cursor = '';
         });
});

		</script>
	</body>
</html>

Я пытаюсь создать событие, в котором пользователи могут щелкнуть ПОЛЯ ОБРАБОТКИ с наклона, а затем внутри столбца таблицы отображаются свойства соответствующего многоугольника (как ИНФОРМАЦИЯ В ФОТОГРАФИЯХ), но они вставляются в столбцы из столбца. Таблица. Точно знаю, что я просто получаю ошибки ...

Я попробовал эту кодировку, но я действительно не знаю, должен ли я пойти по этому пути: 

onEachFeature: function (feature, layer) {
    layer.on('click', function (e) {

onMapClick(coords);
//place attributes in panel table.
var field1=e.features[0].properties.LLAVE; ('f1');
field1.innerHTML=e.target.feature.properties.League;
var field2=e.features[0].properties.NOMBRE DE PLANTA;('f2');
field2.innerHTML=e.target.feature.properties.Team;
var field3=e.features[0].properties.COLONIA;('f3');
field3.innerHTML=e.target.feature.properties.Address;
var field4=e.features[0].properties.VARIEDAD;('f4');
field4.innerHTML=e.target.feature.properties.Stadium;
var field5=e.features[0].properties.ZAFRA;('f5');
field5.innerHTML=e.target.feature.properties.Capacity;
var field6=e.features[0].properties.HA-REAL;('f6');
field6.innerHTML=e.target.feature.properties.Capacity;
var field7=e.features[0].properties.TCH-REAL;('f7');
field6.innerHTML=e.target.feature.properties.Capacity;
var field8=e.features[0].properties.HA-COLONIA;('f8');
field6.innerHTML=e.target.feature.properties.Capacity;
var field9=e.features[0].properties.TCH-COLONIA;('f9');
field6.innerHTML=e.target.feature.properties.Capacity;
var field10=e.features[0].properties.EDAD DEL CULTIVO;('f10');
field6.innerHTML=e.target.feature.properties.Capacity;
var field11=e.features[0].properties.NUMERO DE CORTES;('f11');
field6.innerHTML=e.target.feature.properties.Capacity;
var field12=e.features[0].properties.TIPO DE CORTES;('f12');
field6.innerHTML=e.target.feature.properties.Capacity;

});

Если бы кто-нибудь мог дать мне несколько советов о том, как лучше всего это сделать, я бы очень признателен.

Я не эксперт по кодированию, поэтому мне, возможно, понадобится подробное объяснение. Спасибо !!!!!

...