Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 属性? [英] Leaflet _ ReactJS - Where to find the invalidateSize property?
问题描述
我试图在以下位置找到它:
I have tried to find it in:
- this.mapRef.current.leafletElement
- this.mapRef.current.getLeafletElement()
- 使 this.mapRef.current.getLeafletElement().invalidateSize 失效
这里是我的反应片段:
import React, {Component, Fragment} from "react"; import L from "leaflet" import "~/lib/leaflet/leaflet.css" import "~/lib/leaflet/leaflet" import styled from "styled-components" import Head from 'next/head' constructor(props) { super(props); this.mapRef = React.createRef(); } componentDidMount(){ // console.log("this.map: ", this.map); console.log("this.refs.mapTest: ", this.mapRef.current.leafletElement // or other trial) {...} this.map= L.map("map", { center:location, zoom:12, zoomControl:true }) {...} } render(){ return ( <Fragment> <Head> <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon-2x.png"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon.png"/> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script> </Head> <Wrapper ref={this.mapRef} width="100%" height="80vh" id="map" /> </Fragment> ) } }我找不到invalidateSize的属性，
I cant find the invalidateSize's property,
任何提示都会很棒，谢谢
any hint would be great, thanks
推荐答案
如果你在
componentDidMount内登录，则引用MapIf you log inside
componentDidMountthe reference to theMapcomponentDidMount() { const map = this.mapRef.leafletElement; console.log(map) }在
_zoomBoundLayers: {26: NewClass}下__proto__:NewClass底部的控制台展开，你可以看到继承的方法和invalidateSize被显示出来，因此在那里提供.and expand in the console on the bottom
__proto__: NewClassunder_zoomBoundLayers: {26: NewClass}you can see the methods that are inherited and thatinvalidateSizeis displayed and therefore provided there.编辑
我以为你在使用 react-leaflet.
I thought you were using react-leaflet.
在不使用 react 传单的情况下，您可以使用以下代码获取对地图实例的引用.
Without the use of react leaflet you can use the following code to get a reference to the map instance.
class Map extends Component { componentDidMount() { const map = this.map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { maxZoom: 18, attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', id: 'mapbox.streets' }).addTo(map); console.log(this.map) } render() { return ( <div id="map"/> ); } }然后和 react-leaflet 版本一样:在控制台底部展开
__proto__:NewClass下_zoomBoundLayers: {26: NewClass}可以看到继承的方法，并且invalidateSize显示并因此提供在那里.and then do as in the react-leaflet version: expand in the console on the bottom
__proto__: NewClassunder_zoomBoundLayers: {26: NewClass}you can see the methods that are inherited and thatinvalidateSizeis displayed and therefore provided there.这篇关于Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
