传单多段线不显示自定义颜色
Leaflet polyline is not displayed with custom color
我正在做一个项目,我正在使用 Leaflet。从数据库中提取的对象列表中,我目前可以显示带有自定义图标的标记。现在我正在努力显示我在数据库中获得的数据的折线。使用 Javascript,我得到列表并到达显示折线,但它们都是蓝色的,我希望它们根据折线的 属性 具有不同的颜色。
var geoJsonFluxMatiere = {
'type': 'FeatureCollection',
'features': []
};
for (indexfluxMatiere = 0; indexfluxMatiere < listeFluxMatiere.length; indexfluxMatiere++) {
var tableauFluxMatiere = {
type: 'Feature',
properties: {
'id': listeFluxMatiere[indexfluxMatiere].idFluxMatiere,
'fluxPrimaire': listeFluxMatiere[indexfluxMatiere].fluxPrimaire
},
geometry: {
'type': 'LineString',
'coordinates': [
[listeFluxMatiere[indexfluxMatiere].posXDepart, listeFluxMatiere[indexfluxMatiere].poxYDepart],
[listeFluxMatiere[indexfluxMatiere].posXArrivee, listeFluxMatiere[indexfluxMatiere].posYArrivee]
]
}
}
geoJsonFluxMatiere['features'].push(tableauFluxMatiere);
}
var layerFluxMatiere = L.geoJson(geoJsonFluxMatiere, {
pointToLayer: function (feature, latlng) {
if(feature.properties.fluxPrimaire == true){
var polylineFluxMatiere = new L.polyline(
feature.geometry.coordinates,
{
color: 'red',
}
);
}else{
var polylineFluxMatiere = new L.polyline(
feature.geometry.coordinates,
{
color: 'green',
}
);
}
return polylineFluxMatiere;
},
}).addTo(map);
坐标没问题,多段线显示在它们必须显示的地方,但好像颜色的参数被忽略了。
我是不是做错了什么?
顺便说一句,如果我的英语不完美,我很抱歉。
谢谢!
拉斐尔
使用 .geoJSON()
时,您可以使用 style
选项来设置要素样式。有两种方法可以做到这一点,您可能希望将一个函数传递给 styles
属性 以再次执行您的检查 fluxPrimaire
。这是来自 geoJSON Docs:
的示例
var states = [{
"type": "Feature",
"properties": { "party": "Republican" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
"type": "Feature",
"properties": { "party": "Democrat" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[-109.05, 41.00],
[-102.06, 40.99],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}];
L.geoJSON(states, {
//this is where you will perform your check to change the polyline color
style: function (feature) {
switch (feature.properties.party) {
case 'Republican': return { color: "#ff0000" };
case 'Democrat': return { color: "#0000ff" };
}
}
}).addTo(map);
对于你的情况,你可以尝试类似的方法:
var layerFluxMatiere = L.geoJson(geoJsonFluxMatiere, {
style: function (feature) {
if(feature.properties.fluxPrimaire == true){
return { color: '#ff0000' };
}else{
return { color: '#0000ff' };
}
},
}).addTo(map);
Leaflet GeoJSON 工厂的 pointToLayer
选项仅用于 "Point"
类型的几何图形。
对于 "LineString"
(折线)类型,您可以使用 style
选项代替。注意应该直接return样式选项,而不是图层。
我正在做一个项目,我正在使用 Leaflet。从数据库中提取的对象列表中,我目前可以显示带有自定义图标的标记。现在我正在努力显示我在数据库中获得的数据的折线。使用 Javascript,我得到列表并到达显示折线,但它们都是蓝色的,我希望它们根据折线的 属性 具有不同的颜色。
var geoJsonFluxMatiere = {
'type': 'FeatureCollection',
'features': []
};
for (indexfluxMatiere = 0; indexfluxMatiere < listeFluxMatiere.length; indexfluxMatiere++) {
var tableauFluxMatiere = {
type: 'Feature',
properties: {
'id': listeFluxMatiere[indexfluxMatiere].idFluxMatiere,
'fluxPrimaire': listeFluxMatiere[indexfluxMatiere].fluxPrimaire
},
geometry: {
'type': 'LineString',
'coordinates': [
[listeFluxMatiere[indexfluxMatiere].posXDepart, listeFluxMatiere[indexfluxMatiere].poxYDepart],
[listeFluxMatiere[indexfluxMatiere].posXArrivee, listeFluxMatiere[indexfluxMatiere].posYArrivee]
]
}
}
geoJsonFluxMatiere['features'].push(tableauFluxMatiere);
}
var layerFluxMatiere = L.geoJson(geoJsonFluxMatiere, {
pointToLayer: function (feature, latlng) {
if(feature.properties.fluxPrimaire == true){
var polylineFluxMatiere = new L.polyline(
feature.geometry.coordinates,
{
color: 'red',
}
);
}else{
var polylineFluxMatiere = new L.polyline(
feature.geometry.coordinates,
{
color: 'green',
}
);
}
return polylineFluxMatiere;
},
}).addTo(map);
坐标没问题,多段线显示在它们必须显示的地方,但好像颜色的参数被忽略了。
我是不是做错了什么?
顺便说一句,如果我的英语不完美,我很抱歉。
谢谢!
拉斐尔
使用 .geoJSON()
时,您可以使用 style
选项来设置要素样式。有两种方法可以做到这一点,您可能希望将一个函数传递给 styles
属性 以再次执行您的检查 fluxPrimaire
。这是来自 geoJSON Docs:
var states = [{
"type": "Feature",
"properties": { "party": "Republican" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
"type": "Feature",
"properties": { "party": "Democrat" },
"geometry": {
"type": "Polygon",
"coordinates": [[
[-109.05, 41.00],
[-102.06, 40.99],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}];
L.geoJSON(states, {
//this is where you will perform your check to change the polyline color
style: function (feature) {
switch (feature.properties.party) {
case 'Republican': return { color: "#ff0000" };
case 'Democrat': return { color: "#0000ff" };
}
}
}).addTo(map);
对于你的情况,你可以尝试类似的方法:
var layerFluxMatiere = L.geoJson(geoJsonFluxMatiere, {
style: function (feature) {
if(feature.properties.fluxPrimaire == true){
return { color: '#ff0000' };
}else{
return { color: '#0000ff' };
}
},
}).addTo(map);
Leaflet GeoJSON 工厂的 pointToLayer
选项仅用于 "Point"
类型的几何图形。
对于 "LineString"
(折线)类型,您可以使用 style
选项代替。注意应该直接return样式选项,而不是图层。