前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >地图的常见配置

地图的常见配置

作者头像
Qwe7
发布于 2022-06-16 03:44:23
发布于 2022-06-16 03:44:23
45800
代码可运行
举报
文章被收录于专栏:网络收集网络收集
运行总次数:0
代码可运行

3.地图的常见配置

缩放拖动: roam

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var option = {
  geo: {
    type: 'map', // map是一个固定的值 
    map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致, 
    roam: true, // 运行使用鼠标进行拖动和缩放
  }
}

名称显示: label

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var option = {
  geo: {
    type: 'map', // map是一个固定的值
    map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致,
    roam: true,
    label: {
      show: true
    }
  }
}

(地图不给放,大家自行尝试)

初始缩放比例: zoom

地图中心点: cente

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var option = {
  geo: {
    type: 'map', // map是一个固定的值 
    map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致, 
    roam: true,
    label: {
      show: true
    },
    zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小 
    center: [87.617733, 43.792818] // 当前视角的中心点,用经纬度表示 
  }
}

(地图不给放,大家自行尝试)

4.地图的常见效果

显示某个区域

准备安徽省的矢量地图数据

加载安徽省地图的矢量数据

$.get('json/map/anhui.json', function (anhuiJson) { })

1

在Ajax的回调函数中注册地图矢量数据

echarts.registerMap(‘anhui’, anhuiJson)

配置 geo 的 type:‘map’ , map:‘anhui’

通过 zoom 调整缩放比例

通过 center 调整中心点

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
  var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/anhui.json', function (anhuiJson) {
    console.log(anhuiJson) echarts.registerMap('anhui', anhuiJson) var option = {
      geo: {
        type: 'map',
        map: 'anhui',
        label: {
          show: true
        },
        zoom: 1.2,
        center: [116.507676, 31.752889]
      }
    };
    mCharts.setOption(option)
  })
</script>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
echart实现地图的逐级钻取
本文讲述在echart下基于行政区划的地图逐级钻取功能。主要实现: 1、点击地图展示下一级地图; 2、通过区域导航可返回上一级地图;
牛老师讲GIS
2018/10/23
1.1K0
echart实现地图的逐级钻取
echarts的学习(四)饼图,地图相关的学习
图形 饼图的基本实现 地图 饼图的基本实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src
一写代码就开心
2021/01/05
5320
echarts的学习(四)饼图,地图相关的学习
图表5 地图
百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak
Qwe7
2022/06/16
5010
echarts中地图和统计图的简单使用
各个省份地图json下载地址: https://github.com/apache/incubator-echarts/tree/master/map 或者点击这里 链接:https://pan.baidu.com/s/11d-vKVEip7InOOlu8si8RA 提取码:b397
不愿意做鱼的小鲸鱼
2022/09/26
1.3K0
echarts中地图和统计图的简单使用
vue实现世界疫情地图(点击进入子地图)
用axios请求这些数据如果出现跨域问题,就设置本地代理,在根目录下创建vue.config.js文件
代码哈士奇
2021/01/26
1.1K0
vue实现世界疫情地图(点击进入子地图)
ECharts中Map(地图)样式配置、渐变色生成
ECharts是我们常用的图表控件,功能特别强大,每次使用都要查API比较繁琐,这里就记录开发中常用的配置。
码客说
2024/03/29
10.6K0
ECharts中Map(地图)样式配置、渐变色生成
echarts实现航班选座案例分析
最近在echarts官方看到了一个航班选座的示例,感觉很好,可以扩大,缩小,鼠标放置到座位上可以显示座位号,允许默认选中座位。于是在5.1假期抽了一点点时间,来写一篇文章,深入研究分析一下这个示例,解析一下这个示例的完整代码。首先让我们来看下示例的效果图。
拿我格子衫来
2022/01/24
2.3K0
echarts实现航班选座案例分析
Echarts地图省市县穿透及区域居中显示
centroid(质心)是一个几何学上的概念,它指的是一个形状中所有点的平均位置。对于多边形等复杂形状,质心通常位于形状内部,且是该形状的一个平衡点。
我只会写Bug啊
2024/07/05
2470
制作乡镇地图数据
最近在开发关于乡镇地图相关的业务。通过本文记录开发的过程和遇到的问题。希望通过本文对有同样需求的小伙伴有所帮助。
逍遥子大表哥
2022/12/21
1.9K0
制作乡镇地图数据
Echarts地图各配置项详解及全国省市数据
我只会写Bug啊
2024/05/27
1.7K0
Echarts地图各配置项详解及全国省市数据
ECharts 引入中国地图和区域地图
一,引入中国地图 import china from 'echarts/map/js/china.js' export default { data() { return { myChart: {}, echarts:echarts, }; }, mounted(){ this.initmyChart(); // 初始化地图 }, methods:{ initmyChart(){ var mapCha
用户1197315
2022/06/01
4.8K0
使用echarts绘制地图
最近我参与了几个数据大屏可视化项目,项目中要求在大屏上以地图的形式直观的展示某一地区的某个业务数据,在绘制地图时踩的坑还是挺多的,特此用一篇博客记录一下绘制地图的过程,下面会以展示江西省下面各城市手机品牌数为例介绍地图的绘制方法。
用户3880999
2023/04/13
1.2K0
使用echarts绘制地图
echarts画中国地图及省份切换
最近用 ehcarts 写了一个有关中国地图的需求,这篇文章来总结下基本的原理和用法。
windliang
2022/09/23
4.7K0
echarts画中国地图及省份切换
你知道你的微信好友可视化后是什么样子吗?
数据分析和可视化是一个比较有意思的方向,可做的点有很多。最近看到一篇文章是玩了玩把自己的微信好友信息进行了可视化,结合了 pyecharts 和 wxpy 这两个库实现的,推荐给大家看看~
崔庆才
2019/06/21
1.1K0
你知道你的微信好友可视化后是什么样子吗?
Echarts地图实现散点配置
关于Echarts地图添加散点,以及地图label的显示,记录如下: 需求: 关于这个地图的需求: 地图label上体现对比效果,差值大于0 红色,小于0 绿色 散点图要求涟漪效果,并默认只展示TOP10 不同区域颜色不同 代码: /* * @Author: Tricia * @Date: 2022-12-14 15:28:39 * @Description: 地图绘制 */ // 地图数据 let seriesData = [ { nam
且陶陶
2023/04/12
1K0
Echarts地图实现散点配置
echarts中国地图如何标记散点图[通俗易懂]
工作中会遇到echarts在地图上面标记点位,后端数据传给城市名和坐标轴给你以后,如何添加到echarts上面渲染呢 echarts需要的数据 例子
全栈程序员站长
2022/11/10
3K0
echarts中国地图如何标记散点图[通俗易懂]
疫情大屏优化-ECharts 地图下钻功能实现
最近在网络上看到了很多地图下钻的文章,感觉都很不错,正好自己也在研究这部分知识,就想着把下钻这个功能结合到疫情大屏中来,这样就能够更好的展示不同省份的疫情信息了。废话不多说,直接来干货!
周萝卜
2020/05/22
1.7K0
开发一个地图图表,摸鱼三小时编码十分钟,还被夸效率太高了
早年是百度开发的,后期捐赠给Apache了(就是Tomcat、Maven、Kafka那个Apache)。
大风写全栈
2025/01/07
880
开发一个地图图表,摸鱼三小时编码十分钟,还被夸效率太高了
Echarts中地图引用问题
2、引用并使用 在初始化echarts实例前,调用echarts.registerMap方法, 在option的geo属性设置对应值
码客说
2023/10/19
1.7K0
echarts geo根据缩放动态加载effectScatter以及居中问题解决方案
框架: UMI/React Hooks echarts版本:4.9.0 react-for-echarts
星宇大前端
2021/12/16
2.1K0
echarts geo根据缩放动态加载effectScatter以及居中问题解决方案
相关推荐
echart实现地图的逐级钻取
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验