基于高德地图amap的地图组件，支持经停点面板，地图打点渲染， 电子围栏，放大等功能。

antd-bmsmap-fy

安装包

npm install antd-bmsmap-fy --save

注意

由于使用了antd-image-slide组件，需安装 npm install antd-image-slide并引入swiper

<link rel="stylesheet" href="http://public.fuyoukache.com/web/swiper.4.3.3.css" />
<script src="http://public.fuyoukache.com/web/swiper-4.4.6.rotate.min.js"></script>

webpack 配置

externals: {
  "Swiper": "Swiper",
  'antd-image-slide': 'antd-image-slide',
}

参数格式示例

//轨迹信息
const trajectoryInfo ={
    "driver": {
      "id": 3493054,
      "orderSn": "429120560622",
      "driverId": 558587,
      "driverName": "李东东",
      "driverMobile": "16022222222",
      "plateNumber": "黑B66666",
      "createTime": 1575541224000,
      "status": 0,
      "statusEnum": "OK",
      "comments": "",
      "idCardNo": "230231198801160632",
      "carLength": 8,
      "carLengthName": "9.6",
      "carModel": 1,
      "carModelName": "厢式车",
      "driverTagId": 38806821
    },
    "trajectory": [{
      "gisZone": {
        "address": "金隅嘉华大厦A座",
        "zipCodeId": 3137
      },
      "srcTypeEnum": "NETWORK",
      "lng": 116.30719,
      "createTime": 1575541541591,
      "zoneId": 1352,
      "id": 2911,
      "srcType": 3,
      "lat": 40.036184,
      "createTimeStr": "2019-12-05 18:25:41",
      "lastUpdateTime": 1575541541591
    }, {
      "gisZone": {
        "address": "保定东站",
        "zipCodeId": 3253
      },
      "srcTypeEnum": "NETWORK",
      "lng": 115.600776,
      "createTime": 1575541530008,
      "zoneId": 1378,
      "id": 2910,
      "srcType": 3,
      "lat": 38.863801,
      "createTimeStr": "2019-12-05 18:25:30",
      "lastUpdateTime": 1575541530008
    }, {
      "gisZone": {
        "address": "藁城农业科技园区",
        "zipCodeId": 3170
      },
      "srcTypeEnum": "NETWORK",
      "lng": 114.822266,
      "createTime": 1575541518504,
      "zoneId": 1778,
      "id": 2909,
      "srcType": 3,
      "lat": 37.991352,
      "createTimeStr": "2019-12-05 18:25:18",
      "lastUpdateTime": 1575541518504
    }, {
      "gisZone": {
        "address": "幸福小院",
        "zipCodeId": 3170
      },
      "srcTypeEnum": "NETWORK",
      "lng": 114.836891,
      "createTime": 1575541505029,
      "zoneId": 1379,
      "id": 2908,
      "srcType": 3,
      "lat": 38.020571,
      "createTimeStr": "2019-12-05 18:25:05",
      "lastUpdateTime": 1575541505029
    }, {
      "gisZone": {
        "address": "藁城区人民法院",
        "zipCodeId": 3170
      },
      "srcTypeEnum": "NETWORK",
      "lng": 114.8353616,
      "createTime": 1575541492432,
      "zoneId": 1349,
      "id": 2907,
      "srcType": 3,
      "lat": 38.02082682,
      "createTimeStr": "2019-12-05 18:24:52",
      "lastUpdateTime": 1575541492432
    }],
    "points": [{
      "contactMobile": "18000000001",
      "address": "藁城区人民法院",
      "districtName": "藁城区",
      "planOutTime": 1575627610000,
      "orderSn": "429120560622",
      "contactName": "测试",
      "realOutTime": 1575541505000,
      "latitude": 38.020827,
      "cityId": 138,
      "pointType": 1,
      "provinceId": 10,
      "deductOutTime": 1575541205000,
      "pointTypeEnum": "POINT_START",
      "deductInTime": 1575541492000,
      "statusEnum": "DEFAULT",
      "districtId": 1086,
      "cityName": "石家庄",
      "createTime": 1575541212000,
      "id": 20880428,
      "provinceName": "河北",
      "planInTime": 1575616810000,
      "realInTime": 1575541492000,
      "status": 0,
      "longitude": 114.835362
    }, {
      "contactMobile": "18000000001",
      "address": "藁城区人民法院",
      "cityName": "石家庄",
      "districtName": "藁城区",
      "contactName": "测试",
      "latitude": 38.020827,
      "provinceName": "河北",
      "longitude": 114.835362
    }, {
      "address": "保定东站",
      "districtName": "清苑区",
      "orderSn": "429120560622",
      "latitude": 38.863801,
      "cityId": 139,
      "pointType": 2,
      "provinceId": 10,
      "pointTypeEnum": "POINT_CENTER",
      "deductInTime": 1575541530000,
      "statusEnum": "DEFAULT",
      "districtId": 1110,
      "cityName": "保定",
      "createTime": 1575541365000,
      "id": 20880429,
      "provinceName": "河北",
      "realInTime": 1575541530000,
      "status": 0,
      "longitude": 115.600776
    }, {
      "contactMobile": null,
      "address": "保定东站",
      "cityName": "保定",
      "districtName": "清苑区",
      "contactName": null,
      "latitude": 38.863801,
      "provinceName": "河北",
      "longitude": 115.600776
    }, {
      "contactMobile": "18000000001",
      "address": "金隅嘉华大厦",
      "districtName": "海淀区",
      "orderSn": "429120560622",
      "contactName": "测试",
      "realOutTime": 1575541542000,
      "latitude": 40.036804,
      "cityId": 52,
      "pointType": 3,
      "provinceId": 2,
      "deductOutTime": 1575541542000,
      "pointTypeEnum": "POINT_END",
      "deductInTime": 1575541842000,
      "statusEnum": "DEFAULT",
      "districtId": 502,
      "cityName": "北京",
      "createTime": 1575541212000,
      "id": 20880430,
      "provinceName": "北京",
      "planInTime": 1575670810000,
      "realInTime": 1575541542000,
      "status": 0,
      "longitude": 116.307951
    }, {
      "contactMobile": "18000000001",
      "address": "金隅嘉华大厦",
      "cityName": "北京",
      "districtName": "海淀区",
      "contactName": "测试",
      "latitude": 40.036804,
      "provinceName": "北京",
      "longitude": 116.307951
    }]
  };
//晚点预估信息
const EsctimateInfo = {
    "id": 105,
    "orderSn": "429120560622",
    "status": null,
    "statusEnum": null,
    "statusName": null,
    "lastProvinceId": null,
    "lastCityId": null,
    "lastDistrictId": null,
    "lastProvinceName": "",
    "lastCityName": "",
    "lastDistrictName": "",
    "lastAddress": "",
    "lastLongitude": null,
    "lastLatitude": null,
    "lastLocationTime": null,
    "departTime": null,
    "planArrivedEndTime": null,
    "estmatedTime": null,
    "estmatedDistance": null,
    "estArrivedEndTime": null,
    "createTime": 1575541519000,
    "updateTime": 1575541519000,
    "arrivedEndTime": null,
    "isUnload": 1
  };
//公司配置地理围栏半径
const radius = 500;
//运单号
const orderSn=429120560622;
sidePanleVisible={true}//右侧边打点信息折叠面板是否展示，默认是否
driverPanleVisible={true}//司机个人信息面板是否展示，默认是否
estimatePanleVisible={true}//晚点估计信息面板是否展示，默认是否
locationPanleVisible={true}//打点来源筛选面板是否展示，默认是否

  //获取城市code
  getCityCode = async parms => {
    let res = await getCityCodeByName(parms);
    if (res && res.status && res.status.code === 0) {
      return res.property.code;
    } else {
      return '';
    }
  };
  //导出按钮定制
    handleExportOk = async value => {
    let parms = {};
    const { orderSn } = this.props;
    const driver = this.state.trajectoryInfo ? this.state.trajectoryInfo.driver : {};
    parms.orderSn = orderSn;
    parms.driverName = driver && driver.driverName;
    parms.plateNumber = driver && driver.plateNumber;
    let host = window.location.host;
    let devhost = 'bms.fuyoukache.com/service';
    if (host != 'bms.fuyoukache.com') {
      devhost = getDevHost() + 'proxy.fuyoukache.com';
    }
    if (value == 1) {
      let res = await exportOrderLocationAndPicZip(parms);
      listExport(
        'http://' + devhost + '/fykc-bms-wrapper/api/order/exportOrderLocationAndPicZip',
        parms
      );
    }
    if (value == 2) {
      let res = await exportOrderLocation(parms);
      listExport('http://' + devhost + '/fykc-bms-wrapper/api/order/exportOrderLocation', parms);
    }
    if (value == 3) {
      let res = await exportOrderLocationPicZip(parms);
      if (res && res.status && res.status.code === 3) {
        message.error(res.status.desc);
      } else {
        listExport(
          'http://' + devhost + '/fykc-bms-wrapper/api/order/exportOrderLocationPicZip',
          parms
        );
      }
    }
  };

示例

import BmsMap from 'antd-bmsmap-fy';

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <BmsMap
        trajectoryInfo={trajectoryInfo}
        EstimateInfo={EstimateInfo}
        radius={radius}
        orderSn={this.props.orderSn}
        getCityCodeByName={this.getCityCode}
        exportFunctions={this.handleExportOk}
        sidePanleVisible={true}
        driverPanleVisible={true}
        estimatePanleVisible={true}
        locationPanleVisible={true}
      />
    );
  }
}