我没有编码经验。我从mapbox创建了一个互动式地图，并使用了tileset中的矢量文件。除此之外，我在地图的左侧和表格的内部添加了一个表格。当我单击“作物田地”时，弹出窗口...
喜欢这个：
<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>
我正在尝试创建一个事件，用户可以在该事件上单击贴砖上的CROP FIELDS，然后在表列内部显示相应的多边形属性（如POPOUTS内的信息），但从表。知道我只是在出错...
我尝试了这种编码，但是我真的不知道是否应该这样：
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;
}）;
如果有人能为我提供最佳方法指导，我将非常感激。
我不是编码专家，所以我可能需要一些深入的解释。谢谢!!!!!