echarts绘制3D地图

使用echarts和echarts-gl绘制3D地图，下面是一个demo演示，echarts版本4.6.0，echarts-gl版本1.1.2，demo启动前先自行安装，至于背景嘛，大家就自行放个背景图啦.

index.html代码

<!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>Map Demo</title><link rel="stylesheet" href="./style/index.css"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="./lib/echarts.min.js"></script><script src="./lib/echarts-gl.min.js"></script>
</head><body><div id="map"></div><script src="./js/opt.js"></script><script src="./js/drawMap.js"></script><script>window.addEventListener("resize", () => {myChart.resize()})</script>
</body></html>

css代码

html,body,#map{width: 100%;height: 100%;margin: 0;padding: 0;
}

drawMap.js

let myChart = echarts.init(document.getElementById('map'));
const mapUrl = "你的geoJSON数据地址"  // geoJSON文件：https://download.csdn.net/download/m0_56377024/20566859
$.getJSON(mapUrl, function (mapData) {let mapColor = []if (mapData) {mapData.features.forEach(item => {mapColor.push({name: item.properties.name,itemStyle: {color: getColor(),opacity: 1,borderWidth: 0.4,borderColor: '#5F9EA0'}})})echarts.registerMap('hangzhou', mapData)// 重置各区域颜色option.series[0].data = mapColormyChart.setOption(option)}
})// 地图区域的点击事件
myChart.on('click', (params) => {const { name } = paramsalert(name)
})

opt.js

const option = {title: { // 标题top: '5%',text: '杭州市3D地图',subtext: '',x: 'center',textStyle: {color: '#000'}},tooltip: { // 提示框trigger: 'item',formatter: function (params) {return params.name;}},series: [{type: 'map3D', // 系列类型name: 'map3D', // 系列名称map: 'hangzhou', // 地图类型。label: { // 标签的相关设置show: true, // (地图上的城市名称)是否显示标签textStyle: { // 标签的字体样式color: '#000', // 地图初始化区域字体颜色fontSize: 14, // 字体大小opacity: 1,backgroundColor: 'rgba(100,203,101,0)' // 字体背景色},},itemStyle: {// 三维地理坐标系组件中三维图形的视觉属性(颜色，透明度，描边等)。color: 'rgba(95,158,160,0.5)', // 地图板块的颜色opacity: 1, // 图形的不透明度 borderWidth: 0.5, //图形描边的宽度borderColor: '#000' // 图形描边的颜色},emphasis: {// 鼠标 hover 高亮时图形和标签的样式label: {show: true,textStyle: {color: '#fff', // 高亮时标签颜色变为 白色fontSize: 20, // 高亮时标签字体 变大}},itemStyle: {areaColor: '#66ffff', // 高亮时地图板块颜色改变}},groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。show: false, // 是否显示地面。[ default: false ]color: '#aaa' // 地面颜色。[ default: '#aaa' ]},light: {// 光照相关的设置。在 shading 为 'color' 的时候无效main: {// 场景主光源的设置color: '#fff', //主光源的颜色。intensity: 1.2, //主光源的强度。shadow: true, //主光源是否投射阴影,默认关闭shadowQuality: 'high', // 阴影的质量('low', 'medium', 'high', 'ultra') alpha: 55, // 主光源绕 x 轴旋转的角度beta: 10 // 主光源绕 y 轴旋转的角度},ambient: {// 全局的环境光设置。color: '#fff', // 环境光的颜色intensity: 0.5 // 环境光的强度}},viewControl: {// 用于鼠标的旋转，缩放等视角控制。projection: 'perspective', // 投影方式(透视投影'perspective'，正交投影'orthographic')damping: 0, // 鼠标进行旋转的延时率rotateSensitivity: 1, // 旋转操作的灵敏度zoomSensitivity: 1, // 缩放操作的灵敏度panSensitivity: 1, // 平移操作的灵敏度panMouseButton: 'left', // 平移操作使用的鼠标按键('left' ,'middle' ,'right')rotateMouseButton: 'left', // 旋转操作使用的鼠标按键distance: 130, // 默认视角距离主体的距离minDistance: 20, // 最小距离maxDistance: 400, // 最大距离alpha: 40, // 视角绕 x 轴，即上下旋转的角度beta: 15, // 视角绕 y 轴，即左右旋转的角度minAlpha: -360, // 上下旋转的最小 alpha 值maxAlpha: 360, // 上下旋转的最大 alpha 值minBeta: -360, // 左右旋转的最小 beta 值maxBeta: 360, // 左右旋转的最大 beta 值center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转animation: true, // 是否开启动画animationDurationUpdate: 1000, // 过渡动画的时长。animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果},// 可对单个地图区域进行设置data: []}]
};// 生成随机色
function getColor() {let color = []for (let i = 0; i < 3; i++) {color.push(Math.floor(Math.random() * 256))}return `rgb(${color.join(',')})`
}

echarts绘制3D地图相关推荐

vue+echarts绘制3D地图
1.安装依赖 npm install echarts@^4.9.0 npm install echarts-gl@1.1.0 --save 2.引入echarts,echarts-gl,添加全局变量 ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
echarts 渲染3d地图
与渲染2d地图类似 echarts 渲染3d地图要先安装依赖 echarts-gl npm install echarts-gl 但是常常依赖安装失败,这往往是因为安装的这个依赖的版本太高造成的可 ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
使用echarts实现3D地图和需要注意的点
echarts实现3d地图有两种方法一种是map3D 一种是geo3D + series中的内容(比如bar3D.scatter3D) 具体配置Documentation - Apache ECha ...
echarts——实现3D地图+3D柱状图效果——粗糙代码记录——技能提升
最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 收费模板:￥29.9元购买,且必须是高级版+尊享版才能够购买这个... 死贵!!! 所以,最后的决定是通过echarts中的 ...
Echarts实现3d 地图实现飞线效果
Echarts实现3d 地图实现飞线效果注意:重点关注data中的数据格式在lines3D中symbol不能设置指定样式,echarts官网也没有这个参数,所以对于lines3D飞线如何实现飞机航 ...
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果二. 代码一.图片效果由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹二. 代码 ...
Echarts绘制各省地图
Echarts 绘制全国地图近期工作需要用到echarts制作省内地图,研究了一番,好多人写的很模糊不好理解,我这里写个菜鸟教程记录一下. 在页面引入 jquery.js h和echarts.js ...

echarts绘制3D地图

echarts绘制3D地图相关推荐

最新文章

热门文章