react-leftlet 实战：一个demo
直接上代码。
import React, {PureComponent} from 'react';import {useState, useEffect, useRef, useMemo} from 'react';
import { connect } from 'dva';
import { Layout } from 'antd';
import styles from './leafletPage.less';
import L from 'leaflet';
// import {Map, TileLayer, Marker, Popup} from 'react-leaflet';
import {MapContainer, TileLayer, Marker, Popup} from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
// const { Content } = Layout;
//把图标重新引入
// delete L.Icon.Default.prototype._getIconUrl;
// L.Icon.Default.imagePath = '';
// L.Icon.Default.mergeOptions({
// iconUrl: 'https://leafletjs.com/docs/images/twitter-round.png',
// shadowUrl: '',
// });
let IconA = L.icon({
iconUrl: require('../../../assets/markers/marker-icon.png'),
shadowUrl: ''
});
let IconB = L.icon({
iconUrl: 'https://leafletjs.com/docs/images/twitter-round.png',
shadowUrl: '',
iconSize: [32, 32]
});
//处理每一个marker的显示
const PopupMarker = ({ children, position }) => {
const items = children.map(item => (
<span key={item.key} style={{color:'blue'}}>
{item.string}
<br />
</span>
));
const [one, setOne] = useState(null)
const markerRef = useRef(null)
const popRef = useRef(null)
const eventHandlers = useMemo(
() => ({
mouseover() {
console.log(markerRef)
const marker = markerRef.current
marker.openPopup()
},
mouseout() {
const marker = markerRef.current
marker.closePopup()
}
}),
[],
)
// const FuncOnMouseOver = (e) => {
// console.log(markerRef)
// console.log(popRef)
// const marker = markerRef.current
// const pop = popRef.current
// // marker.openPopup(pop)
// console.log(marker)
// console.log(pop)
// console.log(marker.isPopupOpen)
// console.log(markerRef.isPopupOpen)
// console.log(pop.unbindPopup)
// console.log(pop.unbindPopup)
// }
const m = Math.random()
console.log(m)
let icon = m > 0.5 ? IconA : IconB
return (
<Marker ref={markerRef}
eventHandlers={eventHandlers}
// onClick={e => {alert('???')}}
// onMouseOver={FuncOnMouseOver}
icon={icon} position={position}>
<Popup ref={popRef}>
<div>{items}</div>
</Popup>
</Marker>
);
};
//处理markerlist
const MarkersList = ({ markers }) => {
const items = markers.map(({ key, ...props }) => <PopupMarker key={key} {...props} />);
return <div>{items}</div>;
};
//连接models
// @connect(({site,loading}) => ({site,loading:loading.models.site}))
export default class LeafletMarker extends PureComponent {
//去拿mock的数据
componentDidMount(){
const {dispatch} = this.props;
// dispatch({
// type:'site/fetch',
// });
}
render() {
// const { site: { data }, loading } = this.props;
//console.log({ data });
const position = [22.7047, 113.302]; //中心点
// const dataList = { data }.data.list;
const dataList = (() => {
let arr = []
for (let i = 0; i < 9; i++) {
arr.push({
Id: i,
Name: `site ${i}`,
Lat: 22.7047 + `${i}` / 1000,
Lng: 113.302 - `${i}` / 1000,
currentValue: Math.floor(Math.random() * 1000),
status: Math.floor(Math.random() * 10) % 2,
purchaseDate: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
create_time: new Date(`2017-07-${Math.floor(i / 2) + 1}`),
progress: Math.ceil(Math.random() * 100),
Province: Math.floor(Math.random() * 10) % 2 ? '省份1' : '省份2',
City: Math.floor(Math.random() * 10) % 2 ? '城市1' : '城市2',
Maintainer: `m${i}`,
})
}
return arr
})()
let cellPoints = [];
dataList.map(item => {
let lng = Number.parseFloat(item.Lng);
let lat = Number.parseFloat(item.Lat);
let name = item.Name;
let city = item.City || '';
let district = item.District || '';
let address = item.Address || '';
let maintainer = item.Maintainer || '';
let popupContent = [{key:city,string:`城市：${city}`},
{key:name,string:`基站名称：${name}`},
{key:lng,string:`经度：${lng}`},
{key:lat,string:`纬度：${lat}`},
{key:district,string:`地区：${district}`},
{key:address,string:`地址：${address}`},
{key:maintainer,string:`维护人员：${maintainer}`},
]
cellPoints.push({key:name,position:[lat, lng],children:popupContent}); //重新组合marker数据
});
const style = {
width: '100%',
height: '600px',
};
return (
// <Content>
// <div className="ant-card-bordered" style={style}>
// <Map center={position} zoom={13} style={{ width: '100%', height: '100%' }}>
// <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
// <MarkersList markers={cellPoints} />
// </Map>
// </div>
// </Content>
<MapContainer center={position}
minZoom={13}
maxZoom={13}
zoom={13}
doubleClickZoom={false} dragging={false} scrollWheelZoom={false} boxZoom={false} touchZoom={false}
style={{ width: '1000px', height: '700px' }}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<MarkersList markers={cellPoints} />
</MapContainer>
);
}
}
版本很重要，也展示一下。
{ "private": true,
"scripts": {
"start": "umi dev",
"build": "umi build",
"test": "umi test",
"lint": "eslint --ext .js src mock tests",
"precommit": "lint-staged"
},
"dependencies": {
"echarts": "^4.4.0",
"leaflet": "^1.7.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-leaflet": "^3.0.0",
"reqwest": "^2.0.5",
"umi-request": "^1.2.8",
"wangeditor": "^4.2.2"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"eslint": "^5.4.0",
"eslint-config-umi": "^1.4.0",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.11.1",
"husky": "^0.14.3",
"lint-staged": "^7.2.2",
"react-test-renderer": "^16.7.0",
"umi": "^2.7.7",
"umi-plugin-react": "^1.8.4"
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
]
},
"engines": {
"node": ">=8.0.0"
}
}
以上。
以上是 react-leftlet 实战：一个demo 的全部内容， 来源链接： utcz.com/z/381809.html
