@czty/mmapgmix v0.0.11

一：说明： 针对高德地图的人口分析类的组件,一个区域的人口流动或者多个区域之间的人口流动。

二：使用： npm i @czty/mmapgmix

import React from 'react'; import MMapgmix from '@czty/mmapgmix';

const MyComponent = () => { return ( <MMapgmix draggable={true} configer={ x: 0, y: 0, clazz: '', params: {}, url: '', method: 'get', width: '380px', height: '380px',

    mapCenter: [120.442378,30.482656],
    mapMode: '2D',
    mapType: 'default', // default / layers
    mapKey: 'b4632e015f7c759ad338e6f44b404ca2',
    mapStyle: 'e7a049b4b7de96fb23f8b1b49e362b56',

    scatterStyle: {
      unit: 'px',
      size: [30, 30],
      borderWidth: 0,
      texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
      duration: 500,
      animate: true,
    },
    point:  [{ location: [120.242378,30.282656], label: '杭州' }, { location: [120.755989,30.760587], label: '嘉兴' }, { location: [120.595228,30.041977], label: '绍兴' }],
    // 3D
    // pointStyle: {
    //   fontSize: 12,
    //   fontWeight: 'normal',
    //   fillColor: '#fff',
    // },
    // 2D
    pointStyle: {
      padding: '0',
      background: 'none',
      border: 'none',
      width: 'auto',
      fontSize: '12px',
      color: '#fff'
    },

    lineFocus: { location: [120.242378,30.282656], label: '杭州' }, // { location: [120.242378,30.282656], label: '杭州' } echarts线
    lineType: 'default', // echarts default layer
    line: [{ fromName:'绍兴', toName:'杭州', fromCoord:[120.595228,30.041977], toCoord:[120.242378,30.282656], data: 90000 },
    { fromName:'杭州', toName:'绍兴', fromCoord:[120.242378,30.282656], toCoord:[120.595228,30.041977], data: 60000 },
    { fromName:'嘉兴', toName:'杭州', fromCoord:[120.755989,30.760587], toCoord:[120.242378,30.282656], data: 40000 }],
    lineStyle: {
      width: 2,
      opacity: 0.6,
      curveness: 0.3,
      scatterColor: '#1de7e2'
    },
    
    polygon: [{ location: [[119.867898, 30.399751], [120.614969, 30.494464], [120.584756, 30.100805], [119.823953, 30.041383] ], label: '杭州' },
    { location: [[120.392496,30.910104], [121.043436,30.9478], [121.065408,30.617453], [120.450174,30.558343]], label: '嘉兴' }
    ],
    // 3D
    // polygonStyle: {
    //   topColor: '#FFD87B',
    //   sideTopColor: '#FFD87B',
    //   sideBottomColor: '#FFD87B',
    //   height: 1,
    //   altitude: 0,
    // },
    // 2D
    polygonStyle: {
      fillColor: '#ccebc5',
      fillOpacity: '0.6',
      strokeWeight : 1,
      strokeColor : 'none'
    },
    legendTitle: '流入流出量（万）',
    legendData: [0, 1, 3, 7, 10],
    legendColor: ['#00ffff','#00ff00','#ffff00','#ffa500','#ff3333'],
    legendShow: '是',
    heatMapData: [{"lng": 120.595228,"lat": 30.041977,"count": 80}, {"lng": 119.907898,"lat": 30.409851,"count": 89 }],
    heatMapColor: ['#00ffff', '#00ff00', '#ffff00', '#ffa500', '#ff3333'],
    heatMapRadius: 20,
    heatMapMaxData: 100
  }
/>

) }

三：字段说明 x: y: clazz: 可添加的组件的className params: 请求的传参参数 url: 请求的url地址 method: 请求方式 width: 组件的整体宽度 height: 组件的整体高度 mapCenter: 地图的中心点 mapMode: 地图模式 mapType: 普通地图或导航地图 mapKey: 地图Key mapStyle: 地图密钥 scatterStyle: 呼吸点样式 point: 点数据 pointStyle: 点的label样式 lineFocus: 聚焦地 line: 线数据 lineStyle：线样式 polygon：面数据 polygonStyle：面样式 legendTitle: 图例标题 legendData：图例分档数据 legendColor：图例颜色 heatMapData: 热力数据 heatMapColor: 热力图颜色 heatMapRadius: 热力图点半径 heatMapMaxData: 最大热力值