@bizcharts/g2-geo-projection
Version:
Bizhcarts basic charts
201 lines (200 loc) • 11.6 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<script src="//g.alicdn.com/bizcharts/io-asserts/3.1.2/react16.0.0.production.min.js"></script>
<script src="//g.alicdn.com/bizcharts/io-asserts/3.1.2/react-dom16.0.0.production.min.js"></script>
<script src="//unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bizcharts@3.2.2/umd/BizCharts.min.js"> </script>
<script type="text/javascript" src="//gw.alipayobjects.com/os/antv/assets/data-set/0.8.6/data-set.min.js"></script>
<script type="text/javascript" src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.1/jquery-3.2.1.min.js"></script>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;}</style>
</head>
<body>
<div class="toolbar" style="text-align: center;">
<label for="projection">Select GEO Projection: </label>
<select name="projection" id="projection">
<option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>
<option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>
<option value="geoGnomonic">geoGnomonic</option>
<option value="geoOrthographic">geoOrthographic</option>
<option value="geoStereographic">geoStereographic</option>
<!-- <option value="geoAlbersUsa">geoAlbersUsa</option> -->
<option value="geoAlbers">geoAlbers</option>
<option value="geoConicConformal">geoConicConformal</option>
<option value="geoConicEqualArea">geoConicEqualArea</option>
<option value="geoConicEquidistant">geoConicEquidistant</option>
<option value="geoEquirectangular">geoEquirectangular</option>
<option value="geoMercator">geoMercator</option>
<option value="geoTransverseMercator">geoTransverseMercator</option>
<option value="geoAiry">geoAiry</option>
<option value="geoAitoff">geoAitoff</option>
<option value="geoAlbers">geoAlbers</option>
<option value="geoArmadillo">geoArmadillo</option>
<option value="geoAugust">geoAugust</option>
<option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>
<option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>
<option value="geoBaker">geoBaker</option>
<option value="geoBerghaus">geoBerghaus</option>
<option value="geoBoggs">geoBoggs</option>
<option value="geoBonne">geoBonne</option>
<option value="geoBottomley">geoBottomley</option>
<option value="geoBromley">geoBromley</option>
<option value="geoChamberlin">geoChamberlin</option>
<option value="geoCollignon">geoCollignon</option>
<option value="geoConicConformal">geoConicConformal</option>
<option value="geoConicEqualArea">geoConicEqualArea</option>
<option value="geoConicEquidistant">geoConicEquidistant</option>
<option value="geoCraig">geoCraig</option>
<option value="geoCraster">geoCraster</option>
<option value="geoCylindricalEqualArea">geoCylindricalEqualArea</option>
<option value="geoCylindricalStereographic">geoCylindricalStereographic</option>
<option value="geoEckert1">geoEckert1</option>
<option value="geoEckert2">geoEckert2</option>
<option value="geoEckert3">geoEckert3</option>
<option value="geoEckert4">geoEckert4</option>
<option value="geoEckert5">geoEckert5</option>
<option value="geoEckert6">geoEckert6</option>
<option value="geoEisenlohr">geoEisenlohr</option>
<option value="geoEquirectangular">geoEquirectangular</option>
<option value="geoFahey">geoFahey</option>
<option value="geoFoucaut">geoFoucaut</option>
<option value="geoGilbert">geoGilbert</option>
<option value="geoGingery">geoGingery</option>
<option value="geoGinzburg4">geoGinzburg4</option>
<option value="geoGinzburg5">geoGinzburg5</option>
<option value="geoGinzburg6">geoGinzburg6</option>
<option value="geoGinzburg8">geoGinzburg8</option>
<option value="geoGinzburg9">geoGinzburg9</option>
<option value="geoGnomonic">geoGnomonic</option>
<option value="geoGringorten">geoGringorten</option>
<option value="geoGuyou">geoGuyou</option>
<option value="geoHammer">geoHammer</option>
<option value="geoHammerRetroazimuthal">geoHammerRetroazimuthal</option>
<option value="geoHealpix">geoHealpix</option>
<option value="geoHill">geoHill</option>
<option value="geoHomolosine">geoHomolosine</option>
<option value="geoKavrayskiy7">geoKavrayskiy7</option>
<option value="geoLagrange">geoLagrange</option>
<option value="geoLarrivee">geoLarrivee</option>
<option value="geoLaskowski">geoLaskowski</option>
<option value="geoLittrow">geoLittrow</option>
<option value="geoLoximuthal">geoLoximuthal</option>
<option value="geoMercator">geoMercator</option>
<option value="geoMiller">geoMiller</option>
<option value="geoModifiedStereographic">geoModifiedStereographic</option>
<option value="geoModifiedStereographicAlaska">geoModifiedStereographicAlaska</option>
<option value="geoModifiedStereographicGs48">geoModifiedStereographicGs48</option>
<option value="geoModifiedStereographicGs50">geoModifiedStereographicGs50</option>
<option value="geoModifiedStereographicMiller">geoModifiedStereographicMiller</option>
<option value="geoModifiedStereographicLee">geoModifiedStereographicLee</option>
<option value="geoMollweide">geoMollweide</option>
<option value="geoMtFlatPolarParabolic">geoMtFlatPolarParabolic</option>
<option value="geoMtFlatPolarQuartic">geoMtFlatPolarQuartic</option>
<option value="geoMtFlatPolarSinusoidal">geoMtFlatPolarSinusoidal</option>
<option value="geoNaturalEarth">geoNaturalEarth</option>
<option value="geoNaturalEarth2">geoNaturalEarth2</option>
<option value="geoNellHammer">geoNellHammer</option>
<option value="geoOrthographic">geoOrthographic</option>
<option value="geoPatterson">geoPatterson</option>
<option value="geoPolyconic">geoPolyconic</option>
<option value="geoRectangularPolyconic">geoRectangularPolyconic</option>
<option value="geoRobinson">geoRobinson</option>
<option value="geoSatellite">geoSatellite</option>
<option value="geoSinusoidal">geoSinusoidal</option>
<option value="geoSinuMollweide">geoSinuMollweide</option>
<option value="geoStereographic">geoStereographic</option>
<option value="geoTimes">geoTimes</option>
<option value="geoTransverseMercator">geoTransverseMercator</option>
<option value="geoTwoPointAzimuthal">geoTwoPointAzimuthal</option>
<!-- <option value="geoTwoPointAzimuthalUsa">geoTwoPointAzimuthalUsa</option> -->
<option value="geoTwoPointEquidistant">geoTwoPointEquidistant</option>
<!-- <option value="geoTwoPointEquidistantUsa">geoTwoPointEquidistantUsa</option> -->
<option value="geoVanDerGrinten">geoVanDerGrinten</option>
<option value="geoVanDerGrinten2">geoVanDerGrinten2</option>
<option value="geoVanDerGrinten3">geoVanDerGrinten3</option>
<option value="geoVanDerGrinten4">geoVanDerGrinten4</option>
<option value="geoWagner4">geoWagner4</option>
<option value="geoWagner6">geoWagner6</option>
<option value="geoWagner7">geoWagner7</option>
<option value="geoWiechel">geoWiechel</option>
<option value="geoWinkel3">geoWinkel3</option>
<option value="geoInterruptedHomolosine">geoInterruptedHomolosine</option>
<option value="geoInterruptedSinusoidal">geoInterruptedSinusoidal</option>
<option value="geoInterruptedBoggs">geoInterruptedBoggs</option>
<option value="geoInterruptedSinuMollweide">geoInterruptedSinuMollweide</option>
<option value="geoInterruptedMollweide">geoInterruptedMollweide</option>
<option value="geoInterruptedMollweideHemispheres">geoInterruptedMollweideHemispheres</option>
<option value="geoPolyhedral">geoPolyhedral</option>
<option value="geoPolyhedralButterfly">geoPolyhedralButterfly</option>
<option value="geoPolyhedralCollignon">geoPolyhedralCollignon</option>
<option value="geoPolyhedralWaterman">geoPolyhedralWaterman</option>
<option value="geoGringortenQuincuncial">geoGringortenQuincuncial</option>
<option value="geoPeirceQuincuncial" selected="selected">geoPeirceQuincuncial</option>
</select>
</div>
<div id="mountNode" ></div>
<script type="text/babel">
const { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Shape, Facet, G2 } = window.BizCharts;
$.getJSON('./mock.json', data => {
const $projection = $('#projection');
const ds = new DataSet({
state: {
projection: $projection.val()
}
});
const dv = ds.createView('back')
.source(data, {
type: 'GeoJSON'
})
.transform({
type: 'geo.projection',
projection: '$state.projection',
as: ['x', 'y', 'centroidX', 'centroidY']
});
const dvGraticule = ds.createView('graticule')
.source({
type: 'geo-graticule'
})
.transform({
type: 'geo.projection',
projection: '$state.projection',
as: ['x', 'y', 'centroidX', 'centroidY']
});
const scale = {x: {sync: true}, y: {sync: true}}
$projection.on('change', () => {
ds.setState('projection', $projection.val());
setTimeout(() => {
// console.log(dv, dvGraticule);
}, 50);
});
ReactDOM.render((
<Chart height={window.innerHeight - 32} padding={0} scale={scale} forceFit data={data}>
<View data={dvGraticule} >
<Coord reflect />
<Geom
type="polygon"
position="x*y"
style={{
fill: null,
stroke: '#ddd',
lineWidth: 1
}}
/>
</View>
<View data={dv}>
<Coord reflect />
<Geom
type="polygon"
position="x*y"
style={{
stroke: '#ddd',
lineWidth: 1
}}
/>
</View>
</Chart>
), document.getElementById("mountNode"));
});
</script>
</body>
</html>