我正在尝试构建自己的缩放按钮 react-leaflet
我有以下代码：
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Map, TileLayer } from 'react-leaflet';
import Control from 'react-leaflet-control';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ZoomIn from 'material-ui/svg-icons/action/zoom-in';
import ZoomOut from 'material-ui/svg-icons/action/zoom-out';
class LeafletMap extends React.Component {
constructor(props) {
super(props);
this.state = {
animate: true,
center: [
-34.989610443115,
-71.232476234436
],
zoom: 13,
zoomControl: false
};
}
render() {
return (
<div>
<Map
animate={this.state.animate}
center={this.state.center}
zoom={this.state.zoom}
zoomControl={this.state.zoomControl}
>
<TileLayer
url={'http://{s}.tile.osm.org/{z}/{x}/{y}.png'}
attribution={'© <a href="http://osm.org/copyright">OpenStreetMap</a>'}
/>
<Control position="topleft">
<MuiThemeProvider>
<div>
<div> </div> …我的版本：反应：16.0.0 反应传单：1.6.6
我试图将图层控制器添加到我的地图中。有两层，每层都包含多个标记。这是我尝试做的一个例子。
import React, { Component } from 'react'
import { render } from 'react-dom'
import { Map, TileLayer, Circle, Marker, Popup, LayersControl, LayerGroup } from 'react-leaflet'
class SimpleExample extends Component {
constructor() {
super()
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 3,
radius: 0
};
this.onClick1 = this.onClick1.bind(this);
this.onClick2 = this.onClick2.bind(this);
}
getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
onClick1(){
this.setState({radius: this.getRandomArbitrary(100, 800)});
}
onClick2(){
this.setState({radius: 0});
}
renderFirst() {
var result …我已经使用 react-leaflet 创建了折线，我想使用 polylinedacorator 在折线上显示方向。但我不知道如何使用 react-leaflet 做到这一点。我找到了多个带有传单的示例，但没有使用 react-leaflet
const polyline = [[51.505, -0.09], [51.51, -0.1], [51.51, -0.12]]
export default class VectorLayersExample extends Component<{}> {
render() {
return (
<Map center={center} zoom={13}>
<TileLayer
attribution='&copy <a
href="http://osm.org/copyright">OpenStreetMap</a>
contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Polyline color="lime" positions={polyline} />
</Map>
)
}
任何人都可以告诉我如何使用带有上述代码的 polylinedacorators
我正在使用 react-leaflet 并想在地图上添加一个图例。
我目前可以通过将地图的 ref 传递给自定义组件并渲染 null 来实现，同时让函数创建 HTML 并将其添加到地图中。使用 Jest 和 Enzyme 测试裁判是一场噩梦。
有没有办法使用 react-leaflet 组件来实现这一点？
我的一个组件中有这段代码
class MyMap extends Component {
state = {
lat: 51.505,
lng: -0.09,
zoom: 11
};
render() {
const position = [this.state.lat,this.state.lng]
return (
<MapContainer className="mymap" center={position} zoom={this.state.zoom} scrollWheelZoom={false}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position}>
</Marker>
</MapContainer >
)
}
}
我还通过这个命令安装了传单
npm install -s react-leaflet
我还在我的index.html 文件中插入了传单的CSS
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
我还给 MapContainer 一个
ClassName="mymap"
其中包括以下CSS代码
.mymap {
height: '100vh';
width: 100%;
}
所以我的问题是我的地图没有显示，有人可以帮助我吗？
我想为“react-leaflet”的标记元素定义一个反应组件。例如
import React,{useState} from 'react'
import {Marker,useMapEvent } from 'react-leaflet'
import fireIconSvg from './fire-icon.svg'
import L from "leaflet";
const OSLocationMarker = ( {position, onClick} ) => {
const locationIcon = new L.Icon({
iconUrl: fireIconSvg,
iconRetinaUrl: fireIconSvg,
iconAnchor: null,
popupAnchor: null,
shadowUrl: null,
shadowSize: null,
shadowAnchor: null,
iconSize: new L.Point(35, 45),
className: 'location-icon'
});
return (
<Marker
data="customdata"
position={position}
icon={locationIcon}
onClick={onClick}
>
</Marker>
);
}
export default OSLocationMarker;
通过这个，我想在单击任何 OSLocationMarker （有 N 个标记）时触发一个函数。OSLocationMarker 获取回调函数作为 prop。这是行不通的。使用 useMapEvent() 传单挂钩我没有让它工作。为什么函数没有被调用？
我正在尝试在反应传单中将鼠标悬停在图层上时显示弹出窗口。我使用 GeoJson 渲染地图上的所有图层，并使用 onEachFeature() 在悬停图层时显示弹出窗口。但是，当我将鼠标移入图层时，弹出窗口没有显示。它仅在单击时显示。这是我的代码和我的地图（图层为蓝色）。
import { MapContainer, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet';
import './index.css'
import React, { useEffect, useState } from 'react';
import "leaflet/dist/leaflet.css";
import Header from '../common/header'
import { PixiOverlay } from 'react-leaflet-pixi-overlay';
import * as polygonData from '../../data/tinh.json';
import axios from 'axios'
import * as Request from '../../services';
export default function Home() {
// const [display, setDisplay]=useState(false);
// const [options, setOptions]=useState([]);
// const [search, setSearch]= useState("");
//function to show popup when hover
const onEachContry = …我正在设置一个反应传单地图，并且正在按照他们网站上的设置进行操作。但每当我编译该网站时，屏幕都是空白的并且没有错误。
应用程序.js：
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import './App.css';
export default function App() {
return (
<MapContainer
center={43.38621, -79.83713}
zoom="13"
scrollWheelZoom={false}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
);
}
应用程序.css
.leaflet-container {
width: 100%;
height: 100vh;
}
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('root'));
我正在设置一个地图来查找一个人的坐标，然后将该位置放在地图上。但由于某种原因，坐标没有显示在地图上。我使用 console.log 确保状态变量（存储坐标的位置）发出正确的坐标，而且确实如此。我不知道为什么地图不会改变给他们。
我的代码：
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import Constants from "expo-constants";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import { render } from "react-dom";
import "leaflet/dist/leaflet.css";
export default class App extends React.Component {
constructor() {
super();
this.state = {
ready: false,
where: { lat: '', lng: '' },
error: null,
}; …我已经设置了一个包含十六进制颜色代码的 Redux 存储。我计划实现一个功能，用户可以选择线条显示的颜色。但是，当我使用选择器更新折线的颜色属性时，地图上的线本身不会改变颜色。我已经验证 redux 商店工作正常。
const DashboardLineAnimation: React.FC<Props> = (): ReactElement => {
const [start, setStart] = useState([0, 0]);
const [end, setEnd] = useState([45, 45]);
return (
<div>
<input onChange={() => {setStart([start[0] + 10, start[1] + 10])}}></input>
<Polyline color={useSelector((state: RootState): string => state.attackMap.options.color.hex)} positions={[start as LatLngTuple, end as LatLngTuple]} />
</div>
);
};