ngx-leaflet:如何添加自定义控件?
ngx-leaflet: How to add a custom control?
我已经尝试了一段时间来使用 ngx-leaflet
.
来实现这个 leaflet tutorial
完全没有明确documentation如何在跟随教程的同时实现自定义控件或图例。
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);
创建图例也是如此。
任何人都可以指出正确的方向来尝试在 Angular 7 中使用 ngx-leaflet lib 实现它吗?
import { control, featureGroup, geoJson, icon, latLng, LatLngExpression, Map, Marker, marker, popup, tileLayer } from 'leaflet';
onMapReady(map: Map) {
this.map = map;
// create info control
let info = control(
{
onAdd: map => {
}
}
)
info.addTo(map);
我知道你需要做类似 this 的事情,但我不想添加圆形或形状,而是上面屏幕截图中的自定义控件以及图例。
要使此示例正常运行,您唯一需要做的就是监听 onMapReady 事件并将本教程的所有代码放入其中。地图引用是您想要的,它作为此函数的参数出现。
具体来说:
<div
style="height: 100vh"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)"
></div>
ts:
onMapReady(map) {
// place all the tutorial code inside here
...
// control that shows state info on hover
let info = L.control();
// here you want the reference to be info, therefore this = info
// so do not use es6 to access the the class instance
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
// also here you want the reference to be info, therefore this = info
// so do not use es6 to access the class instance
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);
...
const legend = L.control({ position: 'bottomright' });
legend.onAdd = map => {
let div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '–' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
}
使用 ngx-leaflet
查看 demo 中 Angular 7 中的完整示例
我已经尝试了一段时间来使用 ngx-leaflet
.
完全没有明确documentation如何在跟随教程的同时实现自定义控件或图例。
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);
创建图例也是如此。
任何人都可以指出正确的方向来尝试在 Angular 7 中使用 ngx-leaflet lib 实现它吗?
import { control, featureGroup, geoJson, icon, latLng, LatLngExpression, Map, Marker, marker, popup, tileLayer } from 'leaflet';
onMapReady(map: Map) {
this.map = map;
// create info control
let info = control(
{
onAdd: map => {
}
}
)
info.addTo(map);
我知道你需要做类似 this 的事情,但我不想添加圆形或形状,而是上面屏幕截图中的自定义控件以及图例。
要使此示例正常运行,您唯一需要做的就是监听 onMapReady 事件并将本教程的所有代码放入其中。地图引用是您想要的,它作为此函数的参数出现。
具体来说:
<div
style="height: 100vh"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)"
></div>
ts:
onMapReady(map) {
// place all the tutorial code inside here
...
// control that shows state info on hover
let info = L.control();
// here you want the reference to be info, therefore this = info
// so do not use es6 to access the the class instance
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
// also here you want the reference to be info, therefore this = info
// so do not use es6 to access the class instance
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);
...
const legend = L.control({ position: 'bottomright' });
legend.onAdd = map => {
let div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '–' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
}
使用 ngx-leaflet
查看 demo 中 Angular 7 中的完整示例