Изменение цвета слоев Geo JSON при наведении курсора мыши - PullRequest
Новая
       77

Изменение цвета слоев Geo JSON при наведении курсора мыши

1 голос
/ 13 июля 2020

Привет, я пытаюсь продемонстрировать листовку Map на моей странице React, и она работала пару дней go, но я только что вернулся к ней, и она не работает должным образом. Я сделал хороплетную карту и загрузил информацию из двух файлов json для отображения на карте, но, посмотрев на нее сегодня, изменения цвета не работают на карте, а при наведении курсора мыши возникают сбои и работают только на границах, когда они должны работать на всем слое. Это мой Mapportal. js код: 

import React, { Component } from 'react'
import { render } from 'react-dom'
import ReactDOM from 'react-dom'
import L from 'leaflet';
import countries from './countries.json';
import states from './us-states.json';

const style = {
width: "100%",
height: "600px"
};

const mapstyle = (feature) => {
return {
    fillColor: '#FFEDA0',
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7
};
};
class Mapportal extends Component {
componentDidMount() {


    this.map = L.map("map", {
        center: [37.8, -96],
        zoom: 4,
        layers: [
            L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoicmFjaGVsb21ib2siLCJhIjoiY2tjODZ6c3UzMTh3ZTJyb2JndHN0dXhlOSJ9.h8aubFClamI3kiUsjIgNTg",
            {
                maxZoom: 18,
                attribution:
                    'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
                id: "mapbox/dark-v10"
            })
        ]
    });

this.geojson = L.geoJson(countries, {
        style: mapstyle,
        onEachFeature: this.onEachFeature
    }).addTo(this.map);

this.states = L.geoJSON(states, {
        style: mapstyle,
        onEachFeature: this.onEachFeature
    }).addTo(this.map);

    var overlay = {
        "Countries": this.geojson,
        "States" : this.states
};
L.control.layers(overlay).addTo(this.map);

}


onEachFeature = (feature, layer) => {
    layer.bindTooltip(feature.properties.name.toString(),{noHide:true}).openTooltip();
    layer.on({
        mouseover: this.highlightFeature,
        mouseout: this.resetHighlight
    });
    layer.on("click",function(e){
        // this gets the id for each country, and we can use that to redirect to different pages since each 
        // json layer has different ids. the states are 1-50, and the countries are their official code
        //window.alert(layer.feature.id);
});

}

highlightFeature = (e) => {
    var layer = e.target;
    layer.setStyle({
        weight: 5,
        color: "#666",
        dashArray: "",
        fillOpacity: 0.7
    });

    layer.bringToFront();

}

resetHighlight = (event) => {
    this.geojson.resetStyle(event.target);

}


render() {
    return <div id="map" style={style} />;
}


}


export default Mapportal;

Я не уверен, почему это не работает. Я импортирую компонент в свое приложение. js как обычно, но чороплет просто не работает. Есть предложения?

1 Ответ

0 голосов
/ 13 июля 2020

Вы устанавливаете начальные параметры стиля color (для обводки / границы) и fillColor (для области внутреннего слоя) для всех ваших слоев в функции mapstyle.

Но при наведении указателя мыши ваша функция highlightFeature устанавливает только параметр стиля color, поэтому не влияет на цвет заливки.

...