我尝试在 map 上设置图例。我不知道如何设置 css 样式,显示值(等级)。我应该在哪里放置样式?它的 Angular 5 和 typescript 。 从等级中获取颜色也不起作用。
TS:
创建图例(){ let legend = L.control.attribution({position: "topright"});
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [];
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(this.map);
}
CSS(不知道往哪插)
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
最佳答案
在 Angular 中,您的 css 要么在 component.css 中,要么在整个应用程序的 style.css 中。至于 Angular 指南,您应该有一个包含组件 ts 文件和组件样式文件的组件文件夹。
在您的情况下,不清楚图例是否在您的应用程序的多个部分中使用,因此您可以拥有图例组件或其他包含图例的组件。该组件应该像这样添加一个 *.component.css 文件:
@Component({
selector: 'something',
templateUrl: './something.component.html',
styleUrls: ['./something.component.css'],
})
export class SomethingComponent implements OnInit, OnDestroy {
更新
当你手动操作 DOM angular 不要添加组件 css 所需的属性时,你应该更改你的 css 选择器
::ng-deep .legend
或者也许
:host ::ng-deep .legend
关于html - 传单图例如何通过 typescript 代码在div中设置样式css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48579194/