html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷

共22个文件

js：16个

png：2个

zip：1个

版权申诉

45 浏览量 2023-01-14 23:37:14 上传评论 1 收藏 7.88MB ZIP 举报

HTML5是一种强大的网页开发语言，它为创建交互式和动态网页提供了丰富的功能。ECharts是百度推出的一个开源的JavaScript图表库，它支持多种图表类型，包括柱状图、折线图、饼图以及地图等，而且能够实现丰富的交互效果。在本项目中，我们将讨论如何利用ECharts和HTML5来制作一个3D炫酷的世界地图地球，以及地图上的勾起动画效果。 ECharts中的地图组件使得我们可以轻松地展示全球地理数据。它内置了世界地图的SVG路径数据，通过这些数据，ECharts能够渲染出详细的地理轮廓。在HTML5中，我们可以创建一个`<div>`元素作为ECharts的容器，并通过JavaScript初始化ECharts实例。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 100%; height: 600px;"></div> <script> var myChart = echarts.init(document.getElementById('main')); // 初始化地图配置 var option = { // ... 配置项 }; myChart.setOption(option); </script> </body> </html> ``` 接下来，我们需要设置ECharts的地图配置项。其中，`series`部分用于定义地图，包括地图类型、数据源和动画效果。例如，我们可以设置地图为地球模式，使用内置的世界地图，并开启动画效果： ```javascript var option = { tooltip: { trigger: 'item' }, series: [{ type: 'map', mapType: 'world', roam: true, // 允许平移和缩放 animation: true, // 开启动画 itemStyle: { normal: {label: {show: false}}, emphasis: {label: {show: true}} }, data: [] // 地图数据，可以为空，ECharts会自动加载内置的世界地图 }] }; ``` 为了实现地图的勾起动画，ECharts提供了一些内置的动态效果。比如，我们可以设置`animationDurationUpdate`属性来控制地图元素变化时的动画时长，以及`animationEasing`来指定动画的缓动函数。同时，还可以自定义动画的触发条件，如鼠标悬停或点击事件。 ```javascript var option = { // ... series: [{ // ... animationDurationUpdate: 2000, // 动画持续时间 animationEasing: 'cubicInOut', // 缓动函数 events: { click: function(params) { // 当点击地图时，触发特定的动画效果 // ... } } }] }; ``` 在实际应用中，我们可能还需要添加更多的交互性和视觉效果，比如地图上的数据标注、颜色填充等。ECharts提供了丰富的API和配置项，可以方便地进行定制。 HTML5结合ECharts能够实现炫酷的3D世界地图地球效果，通过精细的配置和动画设置，可以创造出引人入胜的视觉体验。无论是用于数据可视化还是网页装饰，这种技术都能带来独特的魅力。只需掌握基本的HTML5和JavaScript知识，以及ECharts的使用方法，你就能创建出自己的互动式3D地图项目。

资源推荐

资源详情

资源评论

收起资源包目录

地球.zip （22个子文件）

地球

9daa6962ee5102bad8b0985ceedaba8c.zip 3.94MB

echarts-gl.js 598KB

data-1499132667476-ry7ZXuu4Z.js 535KB

china.js 79KB

echarts.min.js 648KB

jquery-1.11.0.js 276KB

world.js 987KB

world-gl-map

echarts-gl.js 598KB

mapboxgl-token.js 104B

d3_timer.js 4KB

data-1499132667476-ry7ZXuu4Z.js 535KB

baidu-com.js 238B

china.js 61KB

d3-contour.js 13KB

d3_geo.js 87KB

lake.hdr 442KB

unpkg.js 15KB

mapbox-gl.js 519KB

img

charity_top.png 383KB

bathymetry_bw_composite_4k-back.jpg 1.22MB

8.png 585KB

css

index.html 13KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3D世界地图</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; position: absolute; } #box{ width: 100%; height: 100%; } </style> </head> <body> <div id="box" class="box"> </div> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/echarts-gl.js" type="text/javascript" charset="utf-8"></script> <script src="js/china.js" type="text/javascript" charset="utf-8"></script> <script src="js/world.js" type="text/javascript" charset="utf-8"></script> <script src="js/data-1499132667476-ry7ZXuu4Z.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var config = { color: '#750be8', levels: 1, intensity: 4, threshold: 0.01 } var canvas = document.createElement('canvas'); canvas.width = 2048; canvas.height = 1024; context = canvas.getContext("2d"); context.lineWidth = 0.5; context.strokeStyle = config.color; context.fillStyle = config.color; context.shadowColor = config.color; $.when( $.getScript('./js/world-gl-map/d3-contour.js'), $.getScript('./js/world-gl-map/d3_geo.js'), $.getScript('./js/world-gl-map/d3_timer.js') ).done(function () { image('img/8.png').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.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 myChart = echarts.init(document.getElementsByClassName("box")[0]) let canvas2 = document.createElement('canvas'); let mapChart = echarts.init(canvas2, null, { width: 2048, height: 1024 }); var contourChart = echarts.init(document.createElement('canvas'), null, { width: 2048, height: 1024 }); 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(); }; mapChart.setOption({ series: [{ type: 'map', map: 'world', // 绘制完整尺寸的 echarts 实例 top: 0, left: 0, right: 0, bottom: 0, boundingCoords: [ [-180, 90], [180, -90] ] }] }); var canvas1 = document.createElement('canvas'); var mapChart1 = echarts.init(canvas1, null, { width: 2048, height: 1024 }); mapChart1.setOption({ backgroundColor: 'transparent', series: [{ type: 'map', map: 'china', left: 0, top: 0, right: 0, bottom: 0, // environment: '#000', boundingCoords: [ [-180, 90], [180, -90] ], label: { normal: { show: false, fontSize: 4, lineHeigh: 4, color: '#000', } }, itemStyle: { normal: { areaColor: 'transparent', borderWidth: 1, borderType: 'solid', borderColor: '#a85000' } }, }] }); var option = { title: { // text: '点击地球获取该区域地图', textStyle: { color: '#fff' } }, tooltip: { show: true }, // visualMap: [{ // // show: false, // type: 'continuous', // seriesIndex: 0, // text: ['scatter3D'], // textStyle: { // color: '#fff' // }, // calculable: true, // max: 3000, // inRange: { // color: ['#87aa66', '#eba438', '#d94d4c'] // } // }], globe: { // baseTexture: mapChart, // environment:'none',//背景 environment:'img/charity_top.png', heightTexture: 'img/bathymetry_bw_composite_4k-back.jpg', baseTexture: 'img/8.png', shading: 'lambert', light: { // 光照阴影 main: { color: 'blue', // 光照颜色 intensity: 14.2, // 光照强度 shadowQuality: 'ultra', //阴影亮度 shadow: true, // 是否显示阴影 alpha: 40, beta: -30 }, ambient: { intensity: 4.6 } }, viewControl: { alpha: 30, beta: 160, // targetCoord: [116.46, 39.92], autoRotate: true, autoRotateAfterStill: 10, distance: 240, autoRotateSpeed:4 }, postEffect: {//为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果 enable: true, //是否开启 SSAO: {//环境光遮蔽 radius: 1,//环境光遮蔽的采样半径。半径越大效果越自�

评论收藏

内容反馈

版权申诉