六边形分箱示意地图

地图

六边形分箱示意地图

六边形分箱示意地图，Hexgin Choropleth，根据地图上的点进行分箱统计画示意图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>六边形分箱示意地图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  function addPoint(collection, point) {
    var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;

for (var i = 0; i < count; i++) {
      collection.push(point);
    }
  }

// console.log(ranges, medians);
    var userData = [];
    for (var lon = ranges.lon[0]; lon <= ranges.lon[1]; lon += .5) {
      for (var lat = ranges.lat[0]; lat <= ranges.lat[1]; lat += .5) {
        if (geoDv.geoContains(GeoJSON, [lon, lat])) {
          addPoint(userData, {
            latitude: lat,
            longitude: lon
          }, getCount(lon, lat, medians.lon, medians.lat));
        }
      }
    }
    // console.log(userData);
    var userDv = new DataSet.View().source(userData).transform({
      // sizeByCount: true,
      type: 'bin.hexagon',
      fields: ['longitude', 'latitude'],
      binWidth: [2, 3],
      as: ['longitude', 'latitude', 'count']
    });
    // console.log(userDv);

var geoView = chart.view();
    geoView.source(geoDv);
    geoView.polygon().position('longitude*latitude').color('grey').opacity(0.3);

var userView = chart.view();
    userView.source(userDv);
    userView.polygon().position('longitude*latitude').color('count', '#BAE7FF-#1890FF-#0050B3').style({
      lineWidth: 10,
      stroke: 'white'
    });
    chart.render();
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>六边形分箱示意地图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  function addPoint(collection, point) {
    var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;

for (var i = 0; i < count; i++) {
      collection.push(point);
    }
  }

var geoView = chart.view();
    geoView.source(geoDv);
    geoView.polygon().position('longitude*latitude').color('grey').opacity(0.3);

图表简介

六边形分箱示意地图，Hexgin Choropleth，根据地图上的点进行分箱统计画示意图

了解更多

图表用法

当地理信息不重要，甚至会对可视化信息造成干扰时，可以用这样的示意地图。

关联图表

地图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接