ngx-leaflet / GeoJson / 国家边界

Question

我们已经在我们的网站之一上使用 Leaflet，但现在我们正在迁移到 Angular。现在我们正在尝试使用 Ngx-Leaflet 重现它。

但是我们没有国界...

我们现在拥有的：

在component.html

    <div class="col col-md-8">
    <div style="height: 700px; padding: 0; width: 100%;" leaflet [(leafletZoom)]="leafletZoom"
        [(leafletCenter)]="leafletCenter" [leafletMaxZoom]="leafletMaxZoom" [leafletMinZoom]="leafletMinZoom"
        [leafletOptions]="leafletOptions"
        [leafletLayers]="leafletLayers">
    </div>
</div>

在component.ts中的ngOnInit()

        this.leafletZoom = 4;
    this.leafletMaxZoom = 4;
    this.leafletMinZoom = 4;
    this.leafletCenter = latLng([this.lat, this.lng]);

    this.geoJSONsOption = { style: { 'color': '#ff7800', 'weight': 5, 'opacity': 0.65 } };
    this.projectMapJsonService.getProjectMapJson().subscribe((data: any) => {
        this.geoJSONs = data;
        // console.log(this.geoJSONs);
        let defaultBaseLayer = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        });
        let defaultOverlay = geoJSON(this.geoJSONs, this.geoJSONsOption);
        this.leafletLayers = [
            defaultBaseLayer,
            defaultOverlay
        ];
    });

    this.leafletOptions = {};

GeoJson 就像

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"Afghanistan","iso":"AF","label":"1","totalentries":"430","show_on_map":true},"geometry":{"type":"Point","coordinates":["65","33"]}},...

我很难找到如何转换某些代码例如

            var countries_options = {
            insets: true,
            style: {
                fillColor: getColor(feature.properties.label),
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                visible: false
            },

            onEachFeature: function (feature2, layer) {

                layer.on({
                    mouseover: function (e) {
                        info.update(feature.properties);
                    },
                    mousemove: function (e) {

                        var popup = L.popup({
                                offset: new L.Point(120, 0),
                                closeButton: false,
                                className: 'popuphomemap'
                            })
                            .setLatLng(e.latlng)
                            .setContent('Click to have the list of the projects')
                            .openOn(homeMap);
                    },

                    mouseout: function () {
                        info.update();
                    },
                    click: function () {
                        info.click(feature.properties);
                    }
                });
            }
        }
L.wt.countries([{
            "level": 0,
            "countries": [cca2]
        }], countries_options).addTo(homeMap);

如果有人能支持我或分享具有此类功能的代码，我将不胜感激。

Answer 1

这是一个使用 ngx-leaflet 突出显示欧洲国家的示例，这些国家/地区根据 国家人口.

具有不同的颜色

使用 onMapReady 获取地图参考，然后在该方法中执行您在 vanilla js 上执行的所有操作。我在 here.

的欧洲国家使用了 json

onMapReady(map: L.Map) {
    function resetHighlight(e) {
      geojson.resetStyle(e.target);
    }

    function getColor(d) {
      return d > 100000000
        ? "#800026"
        : d > 80000000
        ? "#BD0026"
        : d > 50000000
        ? "#E31A1C"
        : d > 10000000
        ? "#FC4E2A"
        : d > 1000000
        ? "#FD8D3C"
        : d > 1000000
        ? "#FEB24C"
        : d > 100000
        ? "#FED976"
        : "blue";
    }

    function style(feature) {
      return {
        weight: 2,
        opacity: 1,
        color: "white",
        dashArray: "3",
        fillOpacity: 0.7,
        fillColor: getColor(feature.properties.pop_est)
      };
    }

    function highlightFeature(e) {
      var layer = e.target;

      layer.setStyle({
        weight: 5,
        color: "#666",
        dashArray: "",
        fillOpacity: 0.7
      });

      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }
    }

    const onEachFeature = (feature, layer) => {
      layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight
      });
    };

    let geojson = L.geoJSON(euCountries, {
      style: style,
      onEachFeature: onEachFeature
    }).addTo(map);

    map.fitBounds(geojson.getBounds());
  }

你可以看到完整的例子here

在此基础上，您可以添加任何您想要的附加功能。

Answer 2

    import { AfterViewInit, Component } from '@angular/core';
import * as L from 'leaflet';
import { MapService } from './map.service';
import { OutlinecountriesService } from './outlinecountries.service';

@Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    // styleUrls: ['./map.component.scss']
})
export class MapComponent implements AfterViewInit {
    private map: L.Map;
    private countries: any;

    constructor(private mapService: MapService, private outlinecountriesService: OutlinecountriesService) { }

    ngAfterViewInit(): void {
        this.initMap();
        this.mapService.makeMarkers(this.map);
        this.outlinecountriesService.getCountriesShapes().subscribe(countries => {
            this.countries = countries;
            this.initCountriesLayer();
        });
    }

    private initMap(): void {
        this.map = L.map('map', {
            center: [50.8503, 4.3517],
            zoom: 3
        });

        const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        });

        tiles.addTo(this.map);
    }

    private initCountriesLayer() {
        // console.log(this.countries);
        const countriesLayer = L.geoJSON(this.countries, {
            style: (feature) => ({
                weight: 3,
                opacity: 0.5,
                color: '#008f68',
                fillOpacity: 0.5,
                fillColor: this.getColor(feature.properties.label, feature.properties.totalentries)
            }),
            onEachFeature: (feature, layer) => (
                layer.on({
                    mouseover: (e) => (this.highlightFeature(e)),
                    mouseout: (e) => countriesLayer.resetStyle(e.target),
                })
            )
        });

        this.map.addLayer(countriesLayer);
    }

    private highlightFeature(e: any) {
        const layer = e.target;
        layer.setStyle({
            weight: 3,
            opacity: 0.5,
            color: '#DFA612',
            fillOpacity: 1.0,
            fillColor: '#FAE042',
        });
    }

    private getColor(value: any, maxValue: any) {
        // console.log(value);
        // console.log(maxValue);

        return value > maxValue
            ? '#800026'
            : value > maxValue * (90 / 100)
                ? '#BD0026'
                : value > maxValue * (80 / 100)
                    ? '#E31A1C'
                    : value > maxValue * (70 / 100)
                        ? '#FC4E2A'
                        : value > maxValue * (60 / 100)
                            ? '#FD8D3C'
                            : value > maxValue * (50 / 100)
                                ? '#FEB24C'
                                : value > maxValue * (40 / 100)
                                    ? '#FED976'
                                    : 'blue';
    }

}

ngx-leaflet / GeoJson / 国家边界

ngx-leaflet / GeoJson / Country Border

geojson

leaflet

typescript

angular

ngx-leaflet