React-leaflet在ant-design pro中的基本使用

react-leaflet的github地址：https://github.com/PaulLeCam/react-leaflet

react-leaflet-markercluster点聚合github地址 :https://github.com/YUzhva/react-leaflet-markercluster

本篇案例github地址：https://github.com/GugaLiz/ant-design-react-ProDemo

一、react-leaflet显示多个marker点并显示多行popup

1.注意点：安装leaflet。命令：npm install leaflet

React-leaflet在ant-design pro中的基本使用

2.装好环境以后这里有两个难点，①marker图标重新引入。②popup多行显示。

因为之前有踩过vue结合leaflet的坑、所以第一个问题这次跟vue里面重新引用图标一样解决了。第二个问题其实也不难、就是要灵活一点去试吧。因为官方文档没有写这种情况，只是很简单的示例。我先着重贴一下解决方案的代码、后面有整体代码结合理解。最后有我自己整理的github链接可以方便在实际开发中参考。

效果：

React-leaflet在ant-design pro中的基本使用

①。解决marker图标重新引入，第一import Leaflet，第二把leaflet模块中的markers文件夹复制到src路径下的asset静态资源文件夹中，第三重新引入图标。

import L from 'leaflet'; //引入leaflet

import { Map, TileLayer,Marker,Popup } from 'react-leaflet';

import "leaflet/dist/leaflet.css";

//把图标重新引入

delete L.Icon.Default.prototype._getIconUrl

L.Icon.Default.imagePath = ''

L.Icon.Default.mergeOptions({

iconRetinaUrl: require('../../assets/markers/marker-icon-2x.png'),

iconUrl: require('../../assets/markers/marker-icon.png'),

shadowUrl: require('../../assets/markers/marker-shadow.png')

})

②。解决第二问题，第一把每一个marker需要多行显示的popup的每一行都做成一个obj，这样在第二步进行处理的时候就可以分开与样式融合到一起。第二步处理popup

//处理popup的内容

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}`},

]

//处理popup的显示

const PopupMarker = ({ children,position }) => {

const items = children.map((item) => (<span key={item.key}>{item.string}<br /></span>)) //把每一行要显示的数据与样式融合为一个item方便调用显示

return <Marker position={position}>

{items}

</div></Popup>

</Marker>

}

整体代码参上：

import React, { PureComponent, Fragment } from 'react';
import { render } from 'react-dom';

import { connect } from 'dva';
import { Row, Col, Card, Tooltip, Menu, Dropdown, Icon, Button,Layout } from 'antd';

import styles from './MapTest.less';

import L from 'leaflet';
import { Map, 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({
      iconRetinaUrl: require('../../assets/markers/marker-icon-2x.png'),
       iconUrl: require('../../assets/markers/marker-icon.png'),
      shadowUrl: require('../../assets/markers/marker-shadow.png')
})


//处理每一个marker的显示
const PopupMarker = ({ children,position }) => {
const items = children.map((item) => (<span key={item.key}>{item.string}<br /></span>))

return  <Marker position={position}>
  <Popup><div>
  {items}
  </div></Popup>
</Marker>

}
//处理markerlist
const MarkersList = ({markers}) => {
  const items = markers.map(({ key,...props}) => (
    <PopupMarker key={key} {...props} />   
  ))
  return <div>{items}</div>
}

export default class SiteMap extends PureComponent {

  render() {
    
    const position = [22.7047, 113.302];  //中心点

    //模拟数据
   const dataList = [];
   for (let i = 0; i < 46; i += 1) {
     dataList.push({
       id: i,
       Province: '',
       Name: `site ${i}`,
       Lat: 22.7047 + `${i}`,
       Lng: 113.302 - `${i}`,
       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',
     });
   }
    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});
    });
    
    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>
    );
  }
}

LeafletMarker.js