反应传单 mapboxgl 集成不起作用
react-leaflet mapboxgl integration not working
遵循本页中的答案:
当我导出 MapBoxGLLayer
并将其导入到我的主 class,
喜欢
import MapBoxGLLayer from './MapBoxGLLayer';
并尝试在我的渲染函数中访问它,例如:
<Map>
<MapBoxGLLayer
accessToken={MAPBOX_ACCESS_TOKEN}
style='https://style.example.com/style.json'
/>
</Map>
我收到了这个非常一致的错误。
MapLayer.js:77 Uncaught TypeError: Cannot read property 'layerContainer' of undefined
at VectorgridLayer.get (MapLayer.js:77)
at VectorgridLayer.componentDidMount (MapLayer.js:38)
道具没有传单
我不知道我做错了什么。
从你提到的答案中得到提示,我能够让它工作。
你的 MapBoxGLLayer.js
import L from "leaflet";
import {} from "mapbox-gl-leaflet";
import PropTypes from "prop-types";
import { GridLayer, withLeaflet } from "react-leaflet";
class MapBoxGLLayer extends GridLayer {
createLeafletElement(props){
return L.mapboxGL(props);
}
}
export default withLeaflet(MapBoxGLLayer);
缺少的是 withLeaflet
HOC。
用法:
npm i mapbox-gl-leaflet
将 mapbox-gl-js 和 css 添加到 index.html
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
// Import the MapBoxGLLayer component mentioned above.
class App extends Component {
state = {
center: [51.505, -0.091],
zoom: 13
};
render() {
return (
<div>
<Map center={this.state.center} zoom={this.state.zoom}>
<MapBoxGLLayer
accessToken={MAPBOX_ACCESS_TOKEN}
style="mapbox://styles/mapbox/streets-v9"
/>
</Map>
</div>
);
}
}
您可以在此处找到工作示例:https://codesandbox.io/s/ooypokn26y
添加您自己的 mapbox 令牌以查看它是否正常工作。
这似乎是 mapbox-gl-leaflet 版本 0.0.3 中的一个错误,即 npm 中的 "latest" 并且是两年前发布的。
onRemove: function (map) {
if (this._map.options.zoomAnimation) {
L.DomEvent.off(this._map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this);
}
map.getPanes().tilePane.removeChild(this._glContainer);
this._glMap.remove();
this._glMap = null;
}
未定义对象 this.map._proxy。解决方案是在 React 地图组件中使用 zoomAnimation={false} 禁用缩放动画。然后分支不在mapbox-gl-leaflet中,你不会得到这个错误。
这个问题在GitHub的mapbox-gl-leaflet的master分支中解决了:
https://github.com/mapbox/mapbox-gl-leaflet/blob/954875e2e4269db313c99d522689bc08f4aadad2/leaflet-mapbox-gl.js
所以尝试更新你的库。
遵循本页中的答案:
当我导出 MapBoxGLLayer
并将其导入到我的主 class,
喜欢
import MapBoxGLLayer from './MapBoxGLLayer';
并尝试在我的渲染函数中访问它,例如:
<Map>
<MapBoxGLLayer
accessToken={MAPBOX_ACCESS_TOKEN}
style='https://style.example.com/style.json'
/>
</Map>
我收到了这个非常一致的错误。
MapLayer.js:77 Uncaught TypeError: Cannot read property 'layerContainer' of undefined
at VectorgridLayer.get (MapLayer.js:77)
at VectorgridLayer.componentDidMount (MapLayer.js:38)
道具没有传单
我不知道我做错了什么。
从你提到的答案中得到提示,我能够让它工作。
你的 MapBoxGLLayer.js
import L from "leaflet";
import {} from "mapbox-gl-leaflet";
import PropTypes from "prop-types";
import { GridLayer, withLeaflet } from "react-leaflet";
class MapBoxGLLayer extends GridLayer {
createLeafletElement(props){
return L.mapboxGL(props);
}
}
export default withLeaflet(MapBoxGLLayer);
缺少的是 withLeaflet
HOC。
用法:
npm i mapbox-gl-leaflet
将 mapbox-gl-js 和 css 添加到 index.html
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
// Import the MapBoxGLLayer component mentioned above.
class App extends Component {
state = {
center: [51.505, -0.091],
zoom: 13
};
render() {
return (
<div>
<Map center={this.state.center} zoom={this.state.zoom}>
<MapBoxGLLayer
accessToken={MAPBOX_ACCESS_TOKEN}
style="mapbox://styles/mapbox/streets-v9"
/>
</Map>
</div>
);
}
}
您可以在此处找到工作示例:https://codesandbox.io/s/ooypokn26y
添加您自己的 mapbox 令牌以查看它是否正常工作。
这似乎是 mapbox-gl-leaflet 版本 0.0.3 中的一个错误,即 npm 中的 "latest" 并且是两年前发布的。
onRemove: function (map) {
if (this._map.options.zoomAnimation) {
L.DomEvent.off(this._map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this);
}
map.getPanes().tilePane.removeChild(this._glContainer);
this._glMap.remove();
this._glMap = null;
}
未定义对象 this.map._proxy。解决方案是在 React 地图组件中使用 zoomAnimation={false} 禁用缩放动画。然后分支不在mapbox-gl-leaflet中,你不会得到这个错误。
这个问题在GitHub的mapbox-gl-leaflet的master分支中解决了: https://github.com/mapbox/mapbox-gl-leaflet/blob/954875e2e4269db313c99d522689bc08f4aadad2/leaflet-mapbox-gl.js
所以尝试更新你的库。