@zsqcli/mmapgmix
v0.0.2
Published
一:说明: 针对高德地图的人口分析类的组件,一个区域的人口流动或者多个区域之间的人口流动。
Downloads
3
Readme
一:说明: 针对高德地图的人口分析类的组件,一个区域的人口流动或者多个区域之间的人口流动。
二:使用: npm i @zsqcli/mmapgmix
import React from 'react'; import MMapgmix from '@zsqcli/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: 最大热力值