amcharts实现太阳照射地球日夜更替三维地球动画效果代码-html代码-BFW代码库

amcharts实现太阳照射地球日夜更替三维地球动画效果代码

代码语言：html

所属分类：动画

代码描述：amcharts实现太阳照射地球日夜更替三维地球动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(34,42,63,1) 50%, rgba(14,75,131,1) 100%)
}

#chartdiv {
  width: 100%;
  height: 98vh
}
</style>



</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.index.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.map.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.continentsLow.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.Animated.js"></script>
<div id="chartdiv"></div>

  
      <script >
/**
 * ---------------------------------------
 * This demo was created using amCharts 5.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v5/
 * ---------------------------------------
 */

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)]);


// Create the map chart
// https://www.amcharts.com/docs/v5/charts/map-chart/
var chart = root.container.children.push(am5map.MapChart.new(root, {
  panX: "rotateX",
  panY: "rotateY",
  projection: am5map.geoOrthographic() }));


// Create series for background fill
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
var backgroundSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
backgroundSeries.mapPolygons.template.setAll({
  fill: am5.color(0x0975da),
  fillOpacity: 1,
  strokeOpacity: 0 });


// Add background polygon
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
backgroundSeries.data.push({
  geometry: am5map.getGeoRectangle(90, 180, -90, -180) });


// graticule series
var graticuleSeries = chart.series.push(am5map.GraticuleSeries.new(root, {}));
graticuleSeries.mapLines.template.setAll({
  stroke: am5.color(0xffffff),
  strokeOpacity: 0.08 });



// Create main polygon series for countries
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
  geoJSON: am5geodata_continentsLow }));


polygonSeries.mapPolygons.template.setAll({ stroke: am5.color(0x222a3f), fill: am5.color(0x303950), fillOpacity: 0.6 });

// Create point series for Sun icon
// https://www.amcharts.com/docs/v5/charts/map-chart/map-point-series/
var sunSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));

sunSeries.bullets.push(function () {
  var circle = am5.Circle.new(root, {
    radius: 18,
    fil.........完整代码请登录后点击上方下载按钮下载查看