echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图

echarts + echarts-gl - 使用geo3D + map3D + scatter3D做3d地图

一、使用插件

echarts@5.2.2、echarts-gl@2.0.8、jquery;jquery 是使用ajax加载json文件的。

二、准备地图json文件

因为找了一圈，网上的地图js文件都需要花钱去购买，json文件可以在阿里云数据可视化平台下载，下载链接为：免费地图json文件下载

ECharts 提供了两种格式的地图数据，一种是可以直接通过 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

下面是两种类型的使用使用示例：
// javascript引入示例
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({series: [{type: 'map',map: 'china'}]
});
</script>
// json引入示例
$.get('map/json/china.json', function (chinaJson) {echarts.registerMap('china', chinaJson);var chart = echarts.init(document.getElementById('main'));chart.setOption({series: [{type: 'map',map: 'china'}]});
});

三、上代码（含详细注释）

文件目录

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3d地图</title><style>*{padding: 0;margin: 0;}.chart{width: 100vw;height: 100vh;background-color: #020202;}</style>
</head>
<body><div class="chart" id="chart"></div><!-- 引入jq --><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="./mapData/echarts.js"></script><script src="./mapData/echarts-gl.js"></script><script>let chart = null;// 图表配置let options = {};// 地图贴图图片let bg = '';// 视图容器const chartEle = document.getElementById('chart');// geo3d + map3d公用图表配置const setting = {top: '0%',right: '0%',bottom: '-20%',distance: 90,alpha: 50,beta: 5,regionHeight: 6,}// 地图上显示的数据const mapData = {geoCoordMap: {广东省: [113.429919, 23.334643, 50],云南省: [101.485106, 25.008643, 50],辽宁省: [122.604994, 41.299712, 50],},projectData: [{ name: '广东省', value: (Math.random() * 300).toFixed(2), projectName: 'OA系统' },{ name: '云南省', value: (Math.random() * 300).toFixed(2), projectName: '项目管理系统' },{ name: '辽宁省', value: (Math.random() * 300).toFixed(2), projectName: '人工智能园区' },],}// 适配不同尺寸浏览器，避免地图上的字号过小或过大function getSize(res) {const docEl = document.documentElement;const clientWidth = window.innerWidth || document.documentElement.clientWidth|| document.body.clientWidth;if (!clientWidth) return;const fontSize = 100 * (clientWidth / 1920);return res * fontSize;}// 转化已有数据到地图上显示的配置数据function convertData(data) {const res = [];// eslint-disable-next-line no-plusplusfor (let i = 0; i < data.length; i++) {const geoCoord = mapData.geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),projectName: data[i].projectName,label: {show: true,position: 'top',distance: -5,formatter(param) {return `{sty1|${param.data.projectName}}`;},rich: {sty1: {padding: getSize(0.07),backgroundColor: 'rgba(7, 28, 38, 0.7)',borderWidth: 1,borderColor: '#FF771A',borderRadius: 2,fontSize: getSize(0.14),},},textStyle: {color: '#ffffff',},},emphasis: {label: {show: true,position: 'top',distance: 0,formatter(param) {return `{sty1|${param.data.projectName}}`;},rich: {sty1: {padding: 7,backgroundColor: 'rgba(7, 28, 38, 0.7)',borderWidth: 1,borderColor: '#FF771A',borderRadius: 2,fontSize: getSize(0.14),},},textStyle: {color: '#ffffff',},},},});}}return res;}// 获取图表配置function getOptions() {const options = {tooltip: {show: false,trigger: 'item',},textStyle: {color: '#ffffff', // 高亮时标签颜色变为 白色fontSize: 6, // 高亮时标签字体 变大},// 地图主要配置geo3D: {show: true,map: 'map',boxHeight: 10,top: setting.top,right: setting.right,left: '0%',bottom: setting.bottom,regionHeight: setting.regionHeight, // 三维高度shading: 'realistic',realisticMaterial: {detailTexture: bg, // 纹理贴图textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数},label: { // 标签的相关设置show: true, // (地图上的城市名称)是否显示标签 [ default: false ]distance: 20,formatter(param) {const city = (param.name).substr(0, 2);return `{sty1|${city}}`;},rich: {sty1: {color: '#ffffff',fontSize: getSize(0.14),align: 'center',},},textStyle: { // 标签的字体样式color: '#ffffff', // 地图初始化区域字体颜色opacity: 1, // 字体透明度},},itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。color: '#FE9D0B', // 地图板块的颜色// color: '#00F6FF',opacity: 1, // 图形的不透明度 [ default: 1 ]borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]borderColor: '#A74A11', // 图形描边的颜色。[ default: #333 ]},emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)label: { // label高亮时的配置show: true,textStyle: {color: '#fff', // 高亮时标签颜色变为 白色fontSize: getSize(0.15), // 高亮时标签字体 变大},},},light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。// 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。main: { // 场景主光源的设置，在 globe 组件中就是太阳光。color: '#ffeeee', // 主光源的颜色。[ default: #fff ]intensity: 1.1, // 主光源的强度。[ default: 1 ]shadow: true, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]},ambient: { // 全局的环境光设置。color: '#fff', // 环境光的颜色。[ default: #fff ]intensity: 0.1, // 环境光的强度。[ default: 0.2 ]},},viewControl: {projection: 'perspective',distance: setting.distance,beta: setting.beta,alpha: setting.alpha,},},series: [// 叠加地图上需要显示的数据，插牌{type: 'scatter3D',name: 'scatter3D',coordinateSystem: 'geo3D',symbol: 'path://M262.775253 0m64 0l0 0q64 0 64 64l0 896q0 64-64 64l0 0q-64 0-64-64l0-896q0-64 64-64Z',symbolSize: [4, 28],itemStyle: {color: '#FF771A',opacity: 1,},data: convertData(mapData.projectData),},// 使用和geo3d的配置数据，叠加一层暗沉的厚度{name: 'map3D', // series名称type: 'map3D', // series图表类型map: 'map',top: setting.top,right: setting.right,left: '0%',bottom: setting.bottom,regionHeight: setting.regionHeight - 0.2, // 三维高度label: { // 标签的相关设置show: false, // (地图上的城市名称)是否显示标签 [ default: false ]},itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。color: '#95830A', // 地图板块的颜色opacity: 1, // 图形的不透明度 [ default: 1 ]borderWidth: 0, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以清晰的区分每个区域borderColor: '#A74A11', // 图形描边的颜色。[ default: #333 ]},emphasis: { // 鼠标hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)label: { // label高亮时的配置show: false,},},viewControl: {projection: 'perspective',distance: setting.distance,beta: setting.beta,alpha: setting.alpha,},},],};return options;}// 初始化图标function init() {const that = this;if (chart) {chart.clear();}// 加载贴图材质图片const img = document.createElement('img');img.src = 'mapData/ebg.jpg';bg = img;// 初始化chart = echarts.init(chartEle);chart.showLoading({maskColor: 'rgba(0, 0, 0, 0.2)',});// 获取地图数据$.getJSON('mapData/nation.json', (json) => {echarts.registerMap('map', json);chart.hideLoading();options = getOptions();chart.setOption(options);setTimeout(() => {window.addEventListener('resize', () => {that.chart.resize();that.init();});}, 200);});}// 执行init();</script>
</body>
</html>

效果

echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图相关推荐

从零开始做3D地图编辑器基于QT与OGRE
第一章基础知识注:文章里面有不少个人见解,欢迎大家一起互相讨论.希望高人能给予相应理解与意见建议. 在实际3D游戏开发中,编辑器是极其重要的一个部分,一个优秀健壮的编辑器,可以使项目事半功倍,而相 ...
QT与OGRE做3D地图编辑器
http://blog.163.com/modingfa_002/blog/static/1109254662010427114343461/ http://download.chinaprj.cn/ ...
从零开始做3D地图编辑器(基于QT与OGRE)
第一章基础知识注:文章里面有不少个人见解,欢迎大家一起互相讨论.希望高人能给予相应理解与意见建议. 在实际3D游戏开发中,编辑器是极其重要的一个部分,一个优秀健壮的编辑器,可以使项目事半功倍,而相 ...
从零开始做3D地图编辑器（六）(基于QT与OGRE)
五.OGRE基础知识友善提醒:如果你对OGRE比较了解,请自觉跳过此节. 本节并不打算提供详细的入门教程,只是对OGRE的简单介绍,如果需要OGRE的详细资料,请自行使用网络功能. 1.OGRE是什 ...
echarts实现中国地图记录篇之2D，3D地图
目录 1.实现基础工具和echarts版本的踩坑工具: 版本 -- echarts5.0+和5.0以下版本的差异: 2.实现平面2D地图 -- 有标记点和没有标记点,地图实现的方式不同没有标记点的 ...
使用echarts的3D地图中的map3D与scatter3D混合使用时出现坐标位移的情况
前段时间同事用echarts的geo3D去做个3D地图,大约是这个效果: 然后设置了地图的的viewControl:(默认是100) viewControl: { distance: 125 //地图 ...
Echarts GL 3d地图初体验，浙江天地图作为底图mapbox
网上看到一张图效果非常好,斜45度角模式的3d地图,用在大屏模式上非常有科技感,高端大气上档次. 于是,研究了下怎么做,发现Echarts GL能做出相似的描边3D效果,地图可以加载浙江天地图(如下图 ...
【3d地图】vue中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 2.1 制作自己的json 3.引入到vue组件 ...
【3d地图】vue3.0中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 3.引入到vue组件中总结前言之前我们已经 ...

echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图

echarts + echarts-gl - 使用geo3D + map3D + scatter3D做3d地图

一、使用插件

二、准备地图json文件

三、上代码（含详细注释）

文件目录

代码

效果

echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图相关推荐

最新文章

热门文章