React-google-maps: Как мне создать интерактивную карту kml, которая показывает мне метаданные kml? - PullRequest
Новая
       16

React-google-maps: Как мне создать интерактивную карту kml, которая показывает мне метаданные kml?

0 голосов
/ 21 января 2019

Редактировать: в соответствии с директивой , существует метод getMetadata ().Как я могу использовать это для возврата реквизита?

Описание:

Используя пакет React-google-maps, я смог загрузить Google Maps с моим собственным файлом kml,Этот файл KML содержит несколько фигур, каждая из которых содержит метаданные.Я хочу, чтобы, когда пользователь нажимает на одну из этих фигур, он видит данные позади формы, например, во всплывающем окне.

Пример

Допустим, у меня есть карта Google с файлом kml, который показывает две страны.Пользователь наводит курсор на одну из этих стран и видит всплывающее окно, показывающее, в какой стране он находится.Он парит над второй страной и получает то же самое.Когда он нажимает на форму кмл над страной, он получает больше информации.Это требует от меня знать несколько вещей:- Как создать эффект наведения на фигуру KML, который отображает данные на основе фигуры- Как создать событие щелчка на фигуре KML, которое показывает данные на основе фигуры

Однако я не понимаю, как сделать этот файл KML интерактивным.Вот что я до сих пор имею: 

import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker, KmlLayer } from "react-google-maps"

const MyMapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: 50.5010789, lng: 4.4764595 }}
  >
    <KmlLayer 
        url='https://example.be/kmlfile.kml'
        options={{ preserveViewport : false}}
    />
    {props.isMarkerShown && <Marker position={{ lat: 50.5010789, lng: 4.4764595 }} />}
  </GoogleMap>
))


export default class GoogleMaps extends Component {
    render(){
        return( 
            <MyMapComponent
              isMarkerShown
              googleMapURL="https://maps.googleapis.com/maps/api/js?key=MYKEY&v=3.exp&libraries=geometry,drawing,places"
              loadingElement={<div style={{ height: `100%` }} />}
              containerElement={<div style={{ height: `100%` }} />}
              mapElement={<div style={{ height: `100%` }} />}
            />
        )
    }
}

1 Ответ

0 голосов
/ 23 января 2019

Итак, я исправил это, следуя нескольким учебникам. Я полностью игнорирую пакет response-google-maps и просто использую простой Javascript. Любой, кто ищет способ добавлять и переключаться между KMLayers и добавлять к нему действия, связанные с кликом и наведением, - вот как я это сделал и мой совет коллегам-разработчикам:

TIPS

1: заменить KML на GEOJSON

Прежде всего, я сейчас не использую KMLayer, но Datalayer. Это позволяет мне больше контролировать и имеет гораздо больше документации в Google . Поэтому вы должны конвертировать ваш KML в GeoJson. Я считаю, что @ Mapbox toGeoJSON отлично справляется с работой, поскольку он также сохраняет ваши пользовательские данные (что очень важно, если вы хотите иметь больше свободы с вашими данными!) . Кроме того, они также делятся своим кодом для интеграции в ваше приложение, поэтому вам не нужно каждый раз конвертировать вручную.

2: анализ документации Google Api Data Layer

Звучит просто, но все же стоит упомянуть. Как я уже сказал, Google делится большим количеством информации о реализации Data Layer. Как добавить события щелчка и наведения мыши, как стилизовать каждую отдельную фигуру и получить конкретную информацию, ...
Документ Google на уровне данных

3: заменить loadGeoJson () на addGeoJson ()

Если вашим приложениям нужно переключаться между различными уровнями данных или просто нужно добавить и удалить один из них, вы быстро застрянете при использовании loadGeoJson(). Следовательно, addGeoJson(), что позволит вам использовать map.data.remove() для удаления текущего слоя данных.

Автор: @mensi за ответ на вопрос , как удалить уровень данных

.

ФИНАЛЬНЫЙ КОД 

import React, { Component } from 'react';
import { SearchConsumer } from '../App.js';
import Icon from '../library/icons/Icon';

var map = ''
var dataLayer = ''
export default class mapSelection extends Component  {
    constructor(props){
        super(props)
        this.onScriptLoad = this.onScriptLoad.bind(this)
    }
    onScriptLoad() {
        // CREATE YOUR GOOGLE MAPS
        map = new window.google.maps.Map(
          document.getElementById('map'),
           {
                // ADD OPTIONS LIKE STYLE, CENTER, GESTUREHANDLING, ...
                center: { lat: 50.5, lng: 4 },
                zoom: 8,
                gestureHandling: 'greedy',
                disableDefaultUI: true,
            });
    }
    dataHandler = (getJson) => {
        // FIRST I REMOVE THE CURRENT LAYER (IF THERE IS ONE)
        for (var i = 0; i < dataLayer.length; i++) {
            map.data.remove(dataLayer[i])
        }
        // THEN I FETCH MY JSON FILE, IN HERE I'M USING A PROP BECAUSE 
        // I WANT TO USE THIS DATAHANDLER MULTIPLE TIMES & DYNAMICALLY 
        // I CAN NOW DO SOMETHING LIKE THIS: 
        // onClick(this.dataHandler(www.anotherlinktojsonfile.com/yourjsonfile.json))
        // ON EACH BUTTON AND CHOOSE WHICH JSON FILE NEEDS TO BE FETCHED IN MY DATAHANDLER.
        fetch(getJson)
            .then(response => response.json())
            .then(featureCollection => {
                dataLayer = map.data.addGeoJson(featureCollection)
                // ADD SOME NEW STYLE IF YOU WANT TO
                map.data.setStyle({strokeWeight: 0.5, fillOpacity: 0 });
            }
            );
        map.data.addListener('mouseover', (event) => {
            map.data.revertStyle();
            // ADD A STYLE WHEN YOU HOVER OVER A SPECIFIC POLYGON
            map.data.overrideStyle(event.feature, {strokeWeight: 1, fillOpacity: 0.1 });
            // IN CONSOLE LOG, YOU CAN SEE ALL THE DATA YOU CAN RETURN
            console.log(event.feature)
        });
        map.data.addListener('mouseout', (event) => {
            // REVERT THE STYLE TO HOW IT WAS WHEN YOU HOVER OUT
            map.data.revertStyle();
        });
    }
    componentDidMount() {
        // LOADING THE GOOGLE MAPS ITSELF
        if (!window.google) {
          var s = document.createElement('script');
          s.type = 'text/javascript';
          s.src = 'https://maps.google.com/maps/api/js?key=' + process.env.REACT_APP_MAPS_API_KEY;
          var x = document.getElementsByTagName('script')[0];
          x.parentNode.insertBefore(s, x);
          // Below is important. 
          //We cannot access google.maps until it's finished loading
          s.addEventListener('load', e => {
            this.onScriptLoad()
            this.dataHandler('https://linktoyourjson.com/yourjsonfile.json')

          })
        } else {
          this.onScriptLoad()
        }
    }
    render () {
        return (
            <div id='mapContainer'>
                <div style={{ width: '100%', height: '100%' }} id='map' />
            </div>
        );
    }
};

ДОПОЛНИТЕЛЬНЫЕ КРЕДИТЫ

Я также хочу поблагодарить cuneyt.aliustaoglu.biz за его хорошо объясненное руководство по использованию Карт Google без какого-либо пакета.

И спасибо всем, кто помог мне с незначительной проблемой

ВОПРОСЫ ИЛИ ПРЕДЛОЖЕНИЯ?

Если есть какие-либо вопросы или я что-то пропустил, вы всегда можете задать или сказать мне, и я отредактирую этот пост, если необходимо.

...