React-google-maps:如何创建一个可点击的 kml 地图来显示 kml 的元数据?
React-google-maps: How do I create a clickable kml map that shows me meta data of the kml?
编辑:根据the guideline,有一个名为getMetadata() 的方法。我怎样才能使用这个return道具?
描述:
使用 React-google-maps 包,我已经能够用我自己的 kml 文件加载 Google 地图。该 KML 文件包含多个形状,每个形状背后都有元数据。我想要的是,当用户单击这些形状之一时,他会在弹出窗口中看到形状背后的数据。
例子
假设我有一张 Google 地图,其中的 kml 文件显示了两个国家。用户将鼠标悬停在这些国家/地区之一上,然后会看到一个弹出窗口,显示他在哪个国家/地区。他在第二个国家上空盘旋,得到了同样的结果。当他单击全国范围内的 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%` }} />}
/>
)
}
}
所以我按照一些教程修复了这个问题。我完全忽略了 react-google-maps 包,我只是使用普通的 Javascript。任何正在寻找在 KMLayer 之间添加和切换以及向其添加单击和悬停操作的方法的人,这就是我的做法,也是我对其他开发人员的建议:
小贴士
1: 用 GEOJSON 替换 KML
首先,我现在用的不是KMLayer而是Datalayer。这让我有更多的控制权和更多 documentation on Google. Therefore, you have to convert your KML to a GeoJson. I find that @Mapbox toGeoJSON 做得很好,因为它还保留了您的自定义数据 (如果您想对数据有更多的自由,这非常重要!).此外,他们还共享他们的代码以集成到您的应用程序中,因此您不必每次都手动转换。
2:分析 Google Api 数据层文档
听起来很简单,但仍然值得一提。正如我所说,Google 分享了很多关于实现数据层的信息。如何添加点击和鼠标悬停事件,如何设置每个形状的样式并获取特定信息,...
Google doc on Data Layer
3:将loadGeoJson()替换为addGeoJson()
如果您的应用程序需要在不同的数据层之间切换,或者只需添加和删除一个数据层,您很快就会发现自己在使用 loadGeoJson()
时陷入困境。因此 addGeoJson()
,这将允许您使用 map.data.remove()
删除当前数据层。
致谢:@mensi 在 how to remove Data Layer
上的回答
最终代码
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 地图的详细解释教程。
感谢所有帮助我
的人
有问题或建议吗?
如果有任何问题或者我遗漏了什么,您可以随时询问或告诉我,我会在必要时编辑此 post。
编辑:根据the guideline,有一个名为getMetadata() 的方法。我怎样才能使用这个return道具?
描述:
使用 React-google-maps 包,我已经能够用我自己的 kml 文件加载 Google 地图。该 KML 文件包含多个形状,每个形状背后都有元数据。我想要的是,当用户单击这些形状之一时,他会在弹出窗口中看到形状背后的数据。
例子
假设我有一张 Google 地图,其中的 kml 文件显示了两个国家。用户将鼠标悬停在这些国家/地区之一上,然后会看到一个弹出窗口,显示他在哪个国家/地区。他在第二个国家上空盘旋,得到了同样的结果。当他单击全国范围内的 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%` }} />}
/>
)
}
}
所以我按照一些教程修复了这个问题。我完全忽略了 react-google-maps 包,我只是使用普通的 Javascript。任何正在寻找在 KMLayer 之间添加和切换以及向其添加单击和悬停操作的方法的人,这就是我的做法,也是我对其他开发人员的建议:
小贴士
1: 用 GEOJSON 替换 KML
首先,我现在用的不是KMLayer而是Datalayer。这让我有更多的控制权和更多 documentation on Google. Therefore, you have to convert your KML to a GeoJson. I find that @Mapbox toGeoJSON 做得很好,因为它还保留了您的自定义数据 (如果您想对数据有更多的自由,这非常重要!).此外,他们还共享他们的代码以集成到您的应用程序中,因此您不必每次都手动转换。
2:分析 Google Api 数据层文档
听起来很简单,但仍然值得一提。正如我所说,Google 分享了很多关于实现数据层的信息。如何添加点击和鼠标悬停事件,如何设置每个形状的样式并获取特定信息,...
Google doc on Data Layer
3:将loadGeoJson()替换为addGeoJson()
如果您的应用程序需要在不同的数据层之间切换,或者只需添加和删除一个数据层,您很快就会发现自己在使用 loadGeoJson()
时陷入困境。因此 addGeoJson()
,这将允许您使用 map.data.remove()
删除当前数据层。
致谢:@mensi 在 how to remove Data Layer
最终代码
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 地图的详细解释教程。
感谢所有帮助我
有问题或建议吗?
如果有任何问题或者我遗漏了什么,您可以随时询问或告诉我,我会在必要时编辑此 post。