<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>echarts_3D_earth</title>
? <script src="./lib/jquery-1.11.3.min.js"></script>
? <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
?? ?
?? ?<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
? <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
? <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
? <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
? <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
? <script type="text/javascript"
? ? src="https://api.map.baidu.com/api?v=2.0&ak=m8wa7CqexhUGYTGmdv9xzjB5iKT6WQdl&__ec_v__=20190126"></script>
?? ?<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
</head>
<body>
? <div id="container" style="width: 600px;height:400px;"></div>
? <script type="text/javascript">
? ? let ROOT_PATH = 'https://echarts.apache.org/examples';
?? ?
?? ?var dom = document.getElementById("container");
?? ?var myChart = echarts.init(dom);
?? ?var app = {};
?? ?
?? ?var option;
?? ?
?? ?
?? ?
?? ?var config = {
?? ? ? ?color: '#c0101a',
?? ? ? ?levels: 1,
?? ? ? ?intensity: 4,
?? ? ? ?threshold: 0.01
?? ?}
?? ?
?? ?var canvas = document.createElement('canvas');
?? ?canvas.width = 4096;
?? ?canvas.height = 2048;
?? ?context = canvas.getContext("2d");
?? ?
?? ?context.lineWidth = 0.5;
?? ?context.strokeStyle = config.color;
?? ?context.fillStyle = config.color;
?? ?context.shadowColor = config.color;
?? ?
?? ?$.when(
?? ? ? ?$.getScript('https://cdn.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'),
?? ? ? ?$.getScript('https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'),
?? ? ? ?$.getScript('https://cdn.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
?? ? ? ?$.getScript('https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
?? ?).done(function () {
?? ?
?? ? ? ?image(ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg').then(function(image) {
?? ? ? ? ? ?var m = image.height,
?? ? ? ? ? ? ? ?n = image.width,
?? ? ? ? ? ? ? ?values = new Array(n * m),
?? ? ? ? ? ? ? ?contours = d3.contours().size([n, m]).smooth(true),
?? ? ? ? ? ? ? ?projection = d3.geoIdentity().scale(canvas.width / n),
?? ? ? ? ? ? ? ?path = d3.geoPath(projection, context);
?? ?
?? ? ? ? ? ?// ? StackBlur.R(image, 5);
?? ?
?? ? ? ? ? ?for (var j = 0, k = 0; j < m; ++j) {
?? ? ? ? ? ? ? ?for (var i = 0; i < n; ++i, ++k) {
?? ? ? ? ? ? ? ? ? ?values[k] = image.data[(k << 2)] / 255;
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ?
?? ? ? ? ? ?var opt = {
?? ? ? ? ? ? ? ?image: canvas
?? ? ? ? ? ?};
?? ?
?? ? ? ? ? ?var results = [];
?? ? ? ? ? ?function update(threshold, levels) {
?? ? ? ? ? ? ? ?context.clearRect(0, 0, canvas.width, canvas.height);
?? ? ? ? ? ? ? ?var thresholds = [];
?? ? ? ? ? ? ? ?for (var i = 0; i < levels; i++) {
?? ? ? ? ? ? ? ? ? ?thresholds.push((threshold + 1 / levels * i) % 1);
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?results = contours.thresholds(thresholds)(values);
?? ? ? ? ? ? ? ?redraw();
?? ? ? ? ? ?}
?? ?
?? ? ? ? ? ?function redraw() {
?? ? ? ? ? ? ? ?results.forEach(function (d, idx) {
?? ? ? ? ? ? ? ? ? ?context.beginPath();
?? ? ? ? ? ? ? ? ? ?path(d);
?? ? ? ? ? ? ? ? ? ?context.globalAlpha = 1;
?? ? ? ? ? ? ? ? ? ?context.stroke();
?? ? ? ? ? ? ? ? ? ?if (idx > config.levels / 5 * 3) {
?? ? ? ? ? ? ? ? ? ? ? ?context.globalAlpha = 0.01;
?? ? ? ? ? ? ? ? ? ? ? ?context.fill();
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?});
?? ? ? ? ? ? ? ?opt.onupdate();
?? ? ? ? ? ?}
?? ? ? ? ? ?d3.timer(function(t) {
?? ? ? ? ? ? ? ?var threshold = (t % 10000) / 10000;
?? ? ? ? ? ? ? ?update(threshold, 1);
?? ? ? ? ? ?});
?? ?
?? ? ? ? ? ?initCharts(opt);
?? ?
?? ? ? ? ? ?update(config.threshold, config.levels);
?? ?
?? ? ? ?});
?? ?
?? ? ? ?function image(url) {
?? ? ? ? ? ?return new Promise(function(resolve) {
?? ? ? ? ? ? ? ?var image = new Image();
?? ? ? ? ? ? ? ?image.src = url;
?? ? ? ? ? ? ? ?image.crossOrigin = 'Anonymous';
?? ? ? ? ? ? ? ?image.onload = function() {
?? ? ? ? ? ? ? ? ? ?var canvas = document.createElement('canvas');
?? ? ? ? ? ? ? ? ? ?canvas.width = image.width / 8;
?? ? ? ? ? ? ? ? ? ?canvas.height = image.height / 8;
?? ? ? ? ? ? ? ? ? ?var context = canvas.getContext('2d');
?? ? ? ? ? ? ? ? ? ?context.drawImage(image, 0, 0, canvas.width, canvas.height);
?? ? ? ? ? ? ? ? ? ?resolve(context.getImageData(0, 0, canvas.width, canvas.height));
?? ? ? ? ? ? ? ?};
?? ? ? ? ? ?});
?? ? ? ?}
?? ?
?? ? ? ?function initCharts(opt) {
?? ? ? ? ? ?var contourChart = echarts.init(document.createElement('canvas'), null, {
?? ? ? ? ? ? ? ?width: 4096,
?? ? ? ? ? ? ? ?height: 2048
?? ? ? ? ? ?});
?? ?
?? ? ? ? ? ?var img = new echarts.graphic.Image({
?? ? ? ? ? ? ? ?style: {
?? ? ? ? ? ? ? ? ? ?image: opt.image,
?? ? ? ? ? ? ? ? ? ?x: -1,
?? ? ? ? ? ? ? ? ? ?y: -1,
?? ? ? ? ? ? ? ? ? ?width: opt.image.width + 2,
?? ? ? ? ? ? ? ? ? ?height: opt.image.height + 2
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?});
?? ? ? ? ? ?contourChart.getZr().add(img);
?? ?
?? ? ? ? ? ?opt.onupdate = function () {
?? ? ? ? ? ? ? ?img.dirty();
?? ? ? ? ? ?};
?? ?
?? ? ? ? ? ?myChart.setOption({
?? ? ? ? ? ? ? ?backgroundColor: '#000',
?? ? ? ? ? ? ? ?globe: {
?? ?
?? ? ? ? ? ? ? ? ? ?environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
?? ?
?? ? ? ? ? ? ? ? ? ?heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
?? ?
?? ? ? ? ? ? ? ? ? ?displacementScale: 0.05,
?? ? ? ? ? ? ? ? ? ?displacementQuality: 'high',
?? ?
?? ? ? ? ? ? ? ? ? ?baseColor: '#000',
?? ?
?? ? ? ? ? ? ? ? ? ?shading: 'realistic',
?? ? ? ? ? ? ? ? ? ?realisticMaterial: {
?? ? ? ? ? ? ? ? ? ? ? ?roughness: 0.2,
?? ? ? ? ? ? ? ? ? ? ? ?metalness: 0
?? ? ? ? ? ? ? ? ? ?},
?? ?
?? ? ? ? ? ? ? ? ? ?postEffect: {
?? ? ? ? ? ? ? ? ? ? ? ?enable: true,
?? ? ? ? ? ? ? ? ? ? ? ?depthOfField: {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?// enable: true
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ? ? ?light: {
?? ? ? ? ? ? ? ? ? ? ? ?ambient: {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?intensity: 0
?? ? ? ? ? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ? ? ? ? ?main: {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?intensity: 0.1,
?? ? ? ? ? ? ? ? ? ? ? ? ? ?shadow: false
?? ? ? ? ? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ? ? ? ? ?ambientCubemap: {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?texture: ROOT_PATH + '/data-gl/asset/lake.hdr',
?? ? ? ? ? ? ? ? ? ? ? ? ? ?exposure: 1,
?? ? ? ? ? ? ? ? ? ? ? ? ? ?diffuseIntensity: 0.5,
?? ? ? ? ? ? ? ? ? ? ? ? ? ?specularIntensity: 2
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ? ? ?viewControl: {
?? ? ? ? ? ? ? ? ? ? ? ?autoRotate: false
?? ? ? ? ? ? ? ? ? ?},
?? ?
?? ? ? ? ? ? ? ? ? ?layers: [{
?? ? ? ? ? ? ? ? ? ? ? ?type: 'blend',
?? ? ? ? ? ? ? ? ? ? ? ?blendTo: 'emission',
?? ? ? ? ? ? ? ? ? ? ? ?texture: contourChart,
?? ? ? ? ? ? ? ? ? ? ? ?intensity: config.intensity
?? ? ? ? ? ? ? ? ? ?}]
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?});
?? ? ? ?}
?? ?});
?? ?
?? ?if (option && typeof option === 'object') {
?? ? ? ?myChart.setOption(option);
?? ?}
? </script>
</body>
</html>
?