地理映射 - AntV

其他

地理映射

<!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>
  $('#mountNode').append('\n<div class="toolbar" style="text-align: center;">\n    <label for="projection">Select GEO Projection: </label>\n    <select name="projection" id="projection">\n        <option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>\n        <option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>\n        <option value="geoGnomonic">geoGnomonic</option>\n        <option value="geoOrthographic">geoOrthographic</option>\n        <option value="geoStereographic">geoStereographic</option>\n        \n        <option value="geoAlbers">geoAlbers</option>\n        <option value="geoConicConformal">geoConicConformal</option>\n        <option value="geoConicEqualArea">geoConicEqualArea</option>\n        <option value="geoConicEquidistant">geoConicEquidistant</option>\n        <option value="geoEquirectangular">geoEquirectangular</option>\n        <option value="geoMercator">geoMercator</option>\n        <option value="geoTransverseMercator">geoTransverseMercator</option>\n        <option value="geoAiry">geoAiry</option>\n        <option value="geoAitoff">geoAitoff</option>\n        <option value="geoAlbers">geoAlbers</option>\n        <option value="geoArmadillo">geoArmadillo</option>\n        <option value="geoAugust">geoAugust</option>\n        <option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>\n        <option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>\n        <option value="geoBaker">geoBaker</option>\n        <option value="geoBerghaus">geoBerghaus</option>\n        <option value="geoBoggs">geoBoggs</option>\n        <option value="geoBonne">geoBonne</option>\n        <option value="geoBottomley">geoBottomley</option>\n        <option value="geoBromley">geoBromley</option>\n        <option value="geoChamberlin">geoChamberlin</option>\n        <option value="geoCollignon">geoCollignon</option>\n        <option value="geoConicConformal">geoConicConformal</option>\n        <option value="geoConicEqualArea">geoConicEqualArea</option>\n        <option value="geoConicEquidistant">geoConicEquidistant</option>\n        <option value="geoCraig">geoCraig</option>\n        <option value="geoCraster">geoCraster</option>\n        <option value="geoCylindricalEqualArea">geoCylindricalEqualArea</option>\n        <option value="geoCylindricalStereographic">geoCylindricalStereographic</option>\n        <option value="geoEckert1">geoEckert1</option>\n        <option value="geoEckert2">geoEckert2</option>\n        <option value="geoEckert3">geoEckert3</option>\n        <option value="geoEckert4">geoEckert4</option>\n        <option value="geoEckert5">geoEckert5</option>\n        <option value="geoEckert6">geoEckert6</option>\n        <option value="geoEisenlohr">geoEisenlohr</option>\n        <option value="geoEquirectangular">geoEquirectangular</option>\n        <option value="geoFahey">geoFahey</option>\n        <option value="geoFoucaut">geoFoucaut</option>\n        <option value="geoGilbert">geoGilbert</option>\n        <option value="geoGingery">geoGingery</option>\n        <option value="geoGinzburg4">geoGinzburg4</option>\n        <option value="geoGinzburg5">geoGinzburg5</option>\n        <option value="geoGinzburg6">geoGinzburg6</option>\n        <option value="geoGinzburg8">geoGinzburg8</option>\n        <option value="geoGinzburg9">geoGinzburg9</option>\n        <option value="geoGnomonic">geoGnomonic</option>\n        <option value="geoGringorten">geoGringorten</option>\n        <option value="geoGuyou">geoGuyou</option>\n        <option value="geoHammer">geoHammer</option>\n        <option value="geoHammerRetroazimuthal">geoHammerRetroazimuthal</option>\n        <option value="geoHealpix">geoHealpix</option>\n        <option value="geoHill">geoHill</option>\n        <option value="geoHomolosine">geoHomolosine</option>\n        <option value="geoKavrayskiy7">geoKavrayskiy7</option>\n        <option value="geoLagrange">geoLagrange</option>\n        <option value="geoLarrivee">geoLarrivee</option>\n        <option value="geoLaskowski">geoLaskowski</option>\n        <option value="geoLittrow">geoLittrow</option>\n        <option value="geoLoximuthal">geoLoximuthal</option>\n        <option value="geoMercator">geoMercator</option>\n        <option value="geoMiller">geoMiller</option>\n        <option value="geoModifiedStereographic">geoModifiedStereographic</option>\n        <option value="geoModifiedStereographicAlaska">geoModifiedStereographicAlaska</option>\n        <option value="geoModifiedStereographicGs48">geoModifiedStereographicGs48</option>\n        <option value="geoModifiedStereographicGs50">geoModifiedStereographicGs50</option>\n        <option value="geoModifiedStereographicMiller">geoModifiedStereographicMiller</option>\n        <option value="geoModifiedStereographicLee">geoModifiedStereographicLee</option>\n        <option value="geoMollweide">geoMollweide</option>\n        <option value="geoMtFlatPolarParabolic">geoMtFlatPolarParabolic</option>\n        <option value="geoMtFlatPolarQuartic">geoMtFlatPolarQuartic</option>\n        <option value="geoMtFlatPolarSinusoidal">geoMtFlatPolarSinusoidal</option>\n        <option value="geoNaturalEarth">geoNaturalEarth</option>\n        <option value="geoNaturalEarth2">geoNaturalEarth2</option>\n        <option value="geoNellHammer">geoNellHammer</option>\n        <option value="geoOrthographic">geoOrthographic</option>\n        <option value="geoPatterson">geoPatterson</option>\n        <option value="geoPolyconic">geoPolyconic</option>\n        <option value="geoRectangularPolyconic">geoRectangularPolyconic</option>\n        <option value="geoRobinson">geoRobinson</option>\n        <option value="geoSatellite">geoSatellite</option>\n        <option value="geoSinusoidal">geoSinusoidal</option>\n        <option value="geoSinuMollweide">geoSinuMollweide</option>\n        <option value="geoStereographic">geoStereographic</option>\n        <option value="geoTimes">geoTimes</option>\n        <option value="geoTransverseMercator">geoTransverseMercator</option>\n        <option value="geoTwoPointAzimuthal">geoTwoPointAzimuthal</option>\n        \n        <option value="geoTwoPointEquidistant">geoTwoPointEquidistant</option>\n        \n        <option value="geoVanDerGrinten">geoVanDerGrinten</option>\n        <option value="geoVanDerGrinten2">geoVanDerGrinten2</option>\n        <option value="geoVanDerGrinten3">geoVanDerGrinten3</option>\n        <option value="geoVanDerGrinten4">geoVanDerGrinten4</option>\n        <option value="geoWagner4">geoWagner4</option>\n        <option value="geoWagner6">geoWagner6</option>\n        <option value="geoWagner7">geoWagner7</option>\n        <option value="geoWiechel">geoWiechel</option>\n        <option value="geoWinkel3">geoWinkel3</option>\n        <option value="geoInterruptedHomolosine">geoInterruptedHomolosine</option>\n        <option value="geoInterruptedSinusoidal">geoInterruptedSinusoidal</option>\n        <option value="geoInterruptedBoggs">geoInterruptedBoggs</option>\n        <option value="geoInterruptedSinuMollweide">geoInterruptedSinuMollweide</option>\n        <option value="geoInterruptedMollweide">geoInterruptedMollweide</option>\n        <option value="geoInterruptedMollweideHemispheres">geoInterruptedMollweideHemispheres</option>\n        <option value="geoPolyhedral">geoPolyhedral</option>\n        <option value="geoPolyhedralButterfly">geoPolyhedralButterfly</option>\n        <option value="geoPolyhedralCollignon">geoPolyhedralCollignon</option>\n        <option value="geoPolyhedralWaterman">geoPolyhedralWaterman</option>\n        <option value="geoGringortenQuincuncial">geoGringortenQuincuncial</option>\n        <option value="geoPeirceQuincuncial" selected="selected">geoPeirceQuincuncial</option>\n    </select>\n</div>\n');

$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/usa.geo.json', function(data) {
    var $projection = $('#projection');
    var ds = new DataSet({
      state: {
        projection: $projection.val()
      }
    });
    var dv = ds.createView('back').source(data, {
      type: 'GeoJSON'
    }).transform({
      type: 'geo.projection',
      projection: '$state.projection',
      as: ['x', 'y', 'centroidX', 'centroidY']
    });

var dvGraticule = ds.createView('graticule').source({
      type: 'geo-graticule'
    }).transform({
      type: 'geo.projection',
      projection: '$state.projection',
      as: ['x', 'y', 'centroidX', 'centroidY']
    });

var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight - 32,
      padding: 0
    });
    chart.scale({
      x: {
        sync: true
      },
      y: {
        sync: true
      }
    });

var graticuleView = chart.view();
    graticuleView.source(dvGraticule);
    graticuleView.coord().reflect();
    graticuleView.tooltip(false);
    graticuleView.polygon().position('x*y')
      // .color('index')
      .style({
        fill: null,
        stroke: '#ddd',
        lineWidth: 1
      });

var mapView = chart.view();
    mapView.source(dv);
    mapView.coord().reflect();
    mapView.tooltip(false);
    mapView.polygon().position('x*y')
      // .color('red')
      .style({
        stroke: '#ddd',
        lineWidth: 1
      });

chart.render();

$projection.on('change', function() {
      ds.setState('projection', $projection.val());
      setTimeout(function() {
        // console.log(dv, dvGraticule);
      }, 50);
    });
  });
</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>
  $('#mountNode').append('\n<div class="toolbar" style="text-align: center;">\n    <label for="projection">Select GEO Projection: </label>\n    <select name="projection" id="projection">\n        <option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>\n        <option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>\n        <option value="geoGnomonic">geoGnomonic</option>\n        <option value="geoOrthographic">geoOrthographic</option>\n        <option value="geoStereographic">geoStereographic</option>\n        \n        <option value="geoAlbers">geoAlbers</option>\n        <option value="geoConicConformal">geoConicConformal</option>\n        <option value="geoConicEqualArea">geoConicEqualArea</option>\n        <option value="geoConicEquidistant">geoConicEquidistant</option>\n        <option value="geoEquirectangular">geoEquirectangular</option>\n        <option value="geoMercator">geoMercator</option>\n        <option value="geoTransverseMercator">geoTransverseMercator</option>\n        <option value="geoAiry">geoAiry</option>\n        <option value="geoAitoff">geoAitoff</option>\n        <option value="geoAlbers">geoAlbers</option>\n        <option value="geoArmadillo">geoArmadillo</option>\n        <option value="geoAugust">geoAugust</option>\n        <option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>\n        <option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>\n        <option value="geoBaker">geoBaker</option>\n        <option value="geoBerghaus">geoBerghaus</option>\n        <option value="geoBoggs">geoBoggs</option>\n        <option value="geoBonne">geoBonne</option>\n        <option value="geoBottomley">geoBottomley</option>\n        <option value="geoBromley">geoBromley</option>\n        <option value="geoChamberlin">geoChamberlin</option>\n        <option value="geoCollignon">geoCollignon</option>\n        <option value="geoConicConformal">geoConicConformal</option>\n        <option value="geoConicEqualArea">geoConicEqualArea</option>\n        <option value="geoConicEquidistant">geoConicEquidistant</option>\n        <option value="geoCraig">geoCraig</option>\n        <option value="geoCraster">geoCraster</option>\n        <option value="geoCylindricalEqualArea">geoCylindricalEqualArea</option>\n        <option value="geoCylindricalStereographic">geoCylindricalStereographic</option>\n        <option value="geoEckert1">geoEckert1</option>\n        <option value="geoEckert2">geoEckert2</option>\n        <option value="geoEckert3">geoEckert3</option>\n        <option value="geoEckert4">geoEckert4</option>\n        <option value="geoEckert5">geoEckert5</option>\n        <option value="geoEckert6">geoEckert6</option>\n        <option value="geoEisenlohr">geoEisenlohr</option>\n        <option value="geoEquirectangular">geoEquirectangular</option>\n        <option value="geoFahey">geoFahey</option>\n        <option value="geoFoucaut">geoFoucaut</option>\n        <option value="geoGilbert">geoGilbert</option>\n        <option value="geoGingery">geoGingery</option>\n        <option value="geoGinzburg4">geoGinzburg4</option>\n        <option value="geoGinzburg5">geoGinzburg5</option>\n        <option value="geoGinzburg6">geoGinzburg6</option>\n        <option value="geoGinzburg8">geoGinzburg8</option>\n        <option value="geoGinzburg9">geoGinzburg9</option>\n        <option value="geoGnomonic">geoGnomonic</option>\n        <option value="geoGringorten">geoGringorten</option>\n        <option value="geoGuyou">geoGuyou</option>\n        <option value="geoHammer">geoHammer</option>\n        <option value="geoHammerRetroazimuthal">geoHammerRetroazimuthal</option>\n        <option value="geoHealpix">geoHealpix</option>\n        <option value="geoHill">geoHill</option>\n        <option value="geoHomolosine">geoHomolosine</option>\n        <option value="geoKavrayskiy7">geoKavrayskiy7</option>\n        <option value="geoLagrange">geoLagrange</option>\n        <option value="geoLarrivee">geoLarrivee</option>\n        <option value="geoLaskowski">geoLaskowski</option>\n        <option value="geoLittrow">geoLittrow</option>\n        <option value="geoLoximuthal">geoLoximuthal</option>\n        <option value="geoMercator">geoMercator</option>\n        <option value="geoMiller">geoMiller</option>\n        <option value="geoModifiedStereographic">geoModifiedStereographic</option>\n        <option value="geoModifiedStereographicAlaska">geoModifiedStereographicAlaska</option>\n        <option value="geoModifiedStereographicGs48">geoModifiedStereographicGs48</option>\n        <option value="geoModifiedStereographicGs50">geoModifiedStereographicGs50</option>\n        <option value="geoModifiedStereographicMiller">geoModifiedStereographicMiller</option>\n        <option value="geoModifiedStereographicLee">geoModifiedStereographicLee</option>\n        <option value="geoMollweide">geoMollweide</option>\n        <option value="geoMtFlatPolarParabolic">geoMtFlatPolarParabolic</option>\n        <option value="geoMtFlatPolarQuartic">geoMtFlatPolarQuartic</option>\n        <option value="geoMtFlatPolarSinusoidal">geoMtFlatPolarSinusoidal</option>\n        <option value="geoNaturalEarth">geoNaturalEarth</option>\n        <option value="geoNaturalEarth2">geoNaturalEarth2</option>\n        <option value="geoNellHammer">geoNellHammer</option>\n        <option value="geoOrthographic">geoOrthographic</option>\n        <option value="geoPatterson">geoPatterson</option>\n        <option value="geoPolyconic">geoPolyconic</option>\n        <option value="geoRectangularPolyconic">geoRectangularPolyconic</option>\n        <option value="geoRobinson">geoRobinson</option>\n        <option value="geoSatellite">geoSatellite</option>\n        <option value="geoSinusoidal">geoSinusoidal</option>\n        <option value="geoSinuMollweide">geoSinuMollweide</option>\n        <option value="geoStereographic">geoStereographic</option>\n        <option value="geoTimes">geoTimes</option>\n        <option value="geoTransverseMercator">geoTransverseMercator</option>\n        <option value="geoTwoPointAzimuthal">geoTwoPointAzimuthal</option>\n        \n        <option value="geoTwoPointEquidistant">geoTwoPointEquidistant</option>\n        \n        <option value="geoVanDerGrinten">geoVanDerGrinten</option>\n        <option value="geoVanDerGrinten2">geoVanDerGrinten2</option>\n        <option value="geoVanDerGrinten3">geoVanDerGrinten3</option>\n        <option value="geoVanDerGrinten4">geoVanDerGrinten4</option>\n        <option value="geoWagner4">geoWagner4</option>\n        <option value="geoWagner6">geoWagner6</option>\n        <option value="geoWagner7">geoWagner7</option>\n        <option value="geoWiechel">geoWiechel</option>\n        <option value="geoWinkel3">geoWinkel3</option>\n        <option value="geoInterruptedHomolosine">geoInterruptedHomolosine</option>\n        <option value="geoInterruptedSinusoidal">geoInterruptedSinusoidal</option>\n        <option value="geoInterruptedBoggs">geoInterruptedBoggs</option>\n        <option value="geoInterruptedSinuMollweide">geoInterruptedSinuMollweide</option>\n        <option value="geoInterruptedMollweide">geoInterruptedMollweide</option>\n        <option value="geoInterruptedMollweideHemispheres">geoInterruptedMollweideHemispheres</option>\n        <option value="geoPolyhedral">geoPolyhedral</option>\n        <option value="geoPolyhedralButterfly">geoPolyhedralButterfly</option>\n        <option value="geoPolyhedralCollignon">geoPolyhedralCollignon</option>\n        <option value="geoPolyhedralWaterman">geoPolyhedralWaterman</option>\n        <option value="geoGringortenQuincuncial">geoGringortenQuincuncial</option>\n        <option value="geoPeirceQuincuncial" selected="selected">geoPeirceQuincuncial</option>\n    </select>\n</div>\n');

chart.render();

图表简介

地理映射

图表用法

应用不同的地理映射算法，得到适用于不同场景的地图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接