我正在将飞机航迹的GeoJSON文件加载到Leaflet中。我想将当前位置绘制为图标,将以前的“轨迹”绘制为线。显示所有轨道都随着飞机的增加而变得忙碌,因此,我希望能够仅在单击飞机时将其打开。
我可以/如何动态显示/隐藏LineString与标记分开?
我发现了对set the style transparent的建议,但.setStyle
适用于要素,而不是几何。
GeoJSON总结:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"reg": "G-CGWP",
"type": "fixed",
"model": "website.profile"
},
"id": 12,
"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"coordinates": [
[
-0.319281196282617,
52.08664390758181
],
[
-1.076445537370006,
52.79518475653341
],
[
-0.098191354875297,
51.94810149137197
],
[
-0.940941846648286,
53.508162348603435
]
]
},
{
"type": "Point",
"coordinates": [
-0.940941846648286,
53.508162348603435
]
}
]
}
},
...
]
}
我确实可以控制GeoJSON,所以可以更改它。
答案 0 :(得分:0)
由于LineString
集合表示为GeometryCollection
,因此您可以考虑将GeometryCollection
展平为LineString
的几何形状(例如,通过Turf.js
flatten
function ):
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"coordinates": [
[-105.00341892242432, 39.75383843460583],
[-105.0008225440979, 39.751891803969535]
]
},
{
"type": "LineString",
"coordinates": [
[-105.0008225440979, 39.751891803969535],
[-104.99820470809937, 39.74979664004068]
]
}
]
}
}
]
}
进入
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-105.00341892242432, 39.75383843460583],
[-105.0008225440979, 39.751891803969535]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-105.0008225440979, 39.751891803969535],
[-104.99820470809937, 39.74979664004068]
]
}
}
]
}
然后在每个图层上应用样式
layer.on({
click: function(e) {
toggleLayerVisibility(e.target);
}
});
其中
var selectedLayerId = null;
function toggleLayerVisibility(layer) {
if (selectedLayerId) {
geojson.resetStyle(layer);
selectedLayerId = null;
} else {
//hide a layer
layer.setStyle({
opacity: 0,
fillOpacity: 0.0
});
selectedLayerId = layer._leaflet_id;
}
}
这是一个例子
var data = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "GeometryCollection",
geometries: [
{
type: "LineString",
coordinates: [
[-105.00341892242432, 39.75383843460583],
[-105.0008225440979, 39.751891803969535]
]
},
{
type: "LineString",
coordinates: [
[-105.0008225440979, 39.751891803969535],
[-104.99820470809937, 39.74979664004068]
]
},
{
type: "LineString",
coordinates: [
[-104.99820470809937, 39.74979664004068],
[-104.98689651489258, 39.741052354709055]
]
}
]
}
},
{
type: "Feature",
geometry: {
type: "MultiPolygon",
coordinates: [
[
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.7462000683517],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.00071525573731, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
],
[
[-105.00361204147337, 39.74354376414072],
[-105.00301122665405, 39.74278480127163],
[-105.00221729278564, 39.74316428375108],
[-105.00283956527711, 39.74390674342741],
[-105.00361204147337, 39.74354376414072]
]
],
[
[
[-105.00942707061768, 39.73989736613708],
[-105.00942707061768, 39.73910536278566],
[-105.00685214996338, 39.73923736397631],
[-105.00384807586671, 39.73910536278566],
[-105.00174522399902, 39.73903936209552],
[-105.00041484832764, 39.73910536278566],
[-105.00041484832764, 39.73979836621592],
[-105.00535011291504, 39.73986436617916],
[-105.00942707061768, 39.73989736613708]
]
]
]
}
}
]
};
var map = L.map("map").setView([39.74739, -105], 14);
L.tileLayer(
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
{
maxZoom: 18,
attribution:
'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: "mapbox.light"
}
).addTo(map);
var data_flatten = turf.flatten(data);
var geojson = L.geoJSON(data_flatten, {
style: {
fillColor: '#1c9099',
weight: 8
},
onEachFeature: onEachFeature
}).addTo(map);
var selectedLayerId = null;
function toggleLayerVisibility(layer) {
if (selectedLayerId) {
geojson.resetStyle(layer);
selectedLayerId = null;
} else {
//hide a layer
layer.setStyle({
opacity: 0,
fillOpacity: 0.0
});
selectedLayerId = layer._leaflet_id;
}
}
function onEachFeature(feature, layer) {
layer.on({
click: function(e) {
toggleLayerVisibility(e.target);
}
});
}
#map {
width: 600px;
height: 400px;
}
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""
></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.js"
></script>
<div id="map"></div>