echarts地图随意绘制点

最新推荐文章于 2024-07-30 17:42:10 发布
最新推荐文章于 2024-07-30 17:42:10 发布
阅读量2k 收藏 2
点赞数 1
文章标签： echarts map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ying_ying7/article/details/111588506
版权
这篇博客介绍了如何利用Echarts获取各国各省JSON数据，并展示如何在地图上绘制点。作者分享了核心代码，虽然初次尝试，部分功能依赖于API文档，期待与读者交流优化建议。
摘要由CSDN通过智能技术生成

获取echarts各国各省JSON数据：
http://datav.aliyun.com/tools/atlas/#&lat=30.343372698262712&lng=106.720060693723&zoom=3.5

部分核心代码：
import hzjson from './hangzhou.json'

// 1.获取绘制地图的div容器
 let myChart = echarts.init(document.getElementById('hangzhou'))
 //这个是关键，拿到的杭州市各街道数据
 echarts.registerMap("杭州市", hzjson, {}); 
// 2.配置地图相关信息
let option2 = ({
	…… ……
	series : [
        {
          name: '测试',
          mapType:'杭州市',
          type: 'scatter',
          coordinateSystem: 'geo',
          roam: false,
          mapLocation:{x:'center',y:'2%'},
          data: convertData(serviceDataNoFlowhz),
          symbolSize: 10,
          showEffectOn: 'render',
          rippleEffec
最低0.47元/天 解锁文章
ying_ying7
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
echarts 根据经纬度坐标在地图上描点
weixin_30559481的博客
08-16 8605
var mapData = [ {'latitude':30.67, 'longitude':104.07}, {'latitude':34.76, 'longitude':113.65}, {'latitude':29.65, 'longitude':91.13}, {'latitude':43.82, 'longitude':87.62} ] series: [...
ECharts如何制作省份地图并在地图上显示自定义图标/散点图
东东东东东辉
10-10 6438
之前一直被客户提的一个需求烦恼着，他要只显示某个省份的地图，并且呢要在地图上显示小车的图标，还有其它一些点的信息。我以前只用过echarts做过图表，没做过地图，所以自己也是网上看了很多并且看了很多api文档，最后总算是搞出来了，在这里留个笔记方便自己也方便别人。 步入正题之前需要下几个文件 echats的js文件，自己可以去官网上下 地图省份的数据 （可能有的省份不对），这是我的 网盘地址： 密...
echarts加载区域地图，并标注点
最新发布
super--man的博客
07-30 823
如果要把多个省放在一起展示，则把多个JSON文件里的features数据合并即可。第二步不打勾，只显示省的名字，如果打勾的话，会显示省下所有市的名字，看个人需求。加载了南海区域的地图，并标注几个气象站点；2、使用Echarts展示地图。
echarts地图随机点生成
wscwj8的博客
06-05 2554
例： 其他代码我就不放了，一是在市上随机点，二是镇的随机点， 这注意先setOption生成地图后，再去改data再setOption 市散点： var data = []; var randomCount = 100; var geo = myChart.getModel().getComponent('geo').coordinateSystem; var region = geo.getRe...
echarts 地图 （在地图上添加标点（散点图）等）
weixin_49511142的博客
01-31 3034
要做这个需要在地图上弄散点图，这是我一开始的思路，但是经过长时间的百度和搜索，网上大部分的方案都是 geo + series里面加type: 'scatter', 这个散点图，并且最重要的是这个对象 ==》, 这个的意思是采用坐标系为地理坐标系，但是经过验证，要用这个的话必须要跟。，不然echarts识别不到，你就获取不到你添加的数据。通过这个series 渲染的地图，我们只需要在data里面丢数据即可。需求2：我每次下钻的时候，我需要将接口返回来的坐标信息显示到地图上。注： 这个要注意，必要要用。
绘制echarts地图（小圆点，发射线）
weixin_58183905的博客
02-14 1685
第一步：寻找你需要的地图.json文件，下载后放到目录下 留着备用（注：地点区分可以理解为是身份证号区分）；第二步：开始写代码（需要查询标点及中心点的经纬坐标）我用的是 jquery还有echarts。
Vue Echarts 显示地图且根据坐标设置标注点
大家好，我是+V
08-19 9780
Vue Echarts 显示地图且根据坐标设置标注点 哎哟我去 我就想用Echarts在页面上画一张地图，这张地图显示全国，然后我有几个坐标点的经纬度信息，需要在这个地图上根据经纬度标注在Echarts图表上，再有一个就是当我点击省份的时候，地图可以切换到省份的子区域里面，接这么简单。 实现 之前从来没接触过，现在懵逼的一比，靠了！ 好在借助网上的资源或者说博客把我想实现的功能都是实现了。哎哟，顺便吐槽一下，现在真的是一家原创万家抄袭的博客世界，也不验证能不能成功就是一顿狂粘狂发表，真棒！ 下载 geo
使用Echarts根据经纬度给地图画点画线
热门推荐
共勉
04-09 1万+
在使用Echar进行绘制地图对象，首先我们需要地图的json文件，Echarts依赖默认会引入这个相关的json文件，所以后续使用这个地图可以之间引用这里的json文件进行绘制Echarts地图。但是在后续重新构建项目的时候发现了一个问题，Echarts的依赖包下没有这个map文件了，我心想这不人麻了，这json文件我要去哪找。后面再对比版本之后发现，在5.0版本之前Echarts会默认将这些Map的json文件进行打包,但是在5.0之后就不会对这个进行打包加入到依赖之中了
vue中使用echarts全国地图绘制加入散点图及自定义图片
weixin_45654184的博客
08-27 4542
移动端效果图如下 散点为统计数量，根据不同数量显示不同颜色散点及不同大小，而自定义图片则为用户头像。 参考官方文档为https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 首先引入加入echarts标签 <div:style="{height:'8rem',width:'100vw'}"ref="myEchart"></div> 引入echarts importechartsfrom...
echarts地图文字重叠解决方案_ECharts 和百度地图的叠加示例（下）
weixin_36182226的博客
12-24 1958
前言汇总了几个 ECharts 地图和百度地图在可视化展示时的综合示例。主要是在 ECharts 地图和百度地图上叠加展示一些数字、图片、其它图表和轨迹动画。另外因为每个示例的代码配置项比较繁琐，这里只贴核心代码。BaiduMap 叠加带数字的气泡核心配置定义一个函数 addMarker(函数名称随意)，传入参数百度地图 Point 类的实例，及 Label 类的实例循环遍历各省份数据，根据 ge...
echarts的省和市相关的地图的描点json数据
01-02
echarts的省和市相关的地图的描点json数据echarts的省和市相关的地图的描点json数据echarts的省和市相关的地图的描点json数据
百度地图经纬度描点 geojson（Echarts地图边界线）
02-19
地图上描点获取 省、市、区 的边界经纬度， 支持：搜索模式与手动描点模式。注意 台湾地区不支持搜索，需手动描点。 工具网站：http://geojson.io/
echarts地图生成工具
02-22
ECharts 3地图生成工具,官网不让用了,可以在这里下载,双击index.html运行
百度echarts地图数据（js）
08-03
总的来说，这个压缩包可能包含了一个使用ECharts绘制地图的完整JavaScript实现，涵盖了数据加载、地图样式设置、交互逻辑等多个方面，是学习和实践ECharts地图功能的好材料。在使用时需注意合规性，避免在未经授权的...
echarts中国地图二级联动且多条数据展示
Spring_lmu的博客
12-16 1697
canvas的map类型使用 最近笔者的公司提出了新的需求，要求将对应的数据呈现在地图上，将对应省份的数据渲染出来（之前是表格的来）。 既然是要画图，那自然是得用到canvas，至少我用的来的就只有这个，其他的也未曾深入研究。而我打开它的文档，随意一翻就发现居然有map的类型，这不正是我想要的嘛。 首先第一个问题就是：省级地图不能动态引入，因为笔者用的是 vue 的项目，所以目前还没...
Echarts绘制散点地图要点
技术篮子
10-20 838
文章目录要点分析1.地图2.散点图完整代码参考文档 要点分析 1.地图 需要显式定义一个地理坐标系geo geo:{ map:'china' }, 因为此处应用了china.js文件，所以需要声明map属性为china 2.散点图 需要与地图进行绑定 在series系列配置中，需要加上如下配置 coordinateSystem:'geo', //series坐标系类型 数据集需以以下形式，方可正常显示，其中数组中的value-x最少需要定义两个 {name: '', value
Echarts 地图设置鼠标hover区块颜色,地图描点,描点选中
weixin_43060106的博客
06-21 3287
【代码】Echarts 地图设置鼠标hover区块颜色,地图描点,描点选中。
geoJson随机点生成（echarts）
xmind果果
05-24 5376
先放效果图 代码 https://gitee.com/hugo110/echarts_520/tree/master/fanfan_map 下载后打开 randomGeoJson.html 就可以看到 根据配置项输入就可以，有默认的地图和配置 主要利用了一个判断点是否在多边形内的算法 下边是代码贴图 &lt;!DOCTYPE html&gt; &lt;html...
echarts绘制地图怎么撒点
07-04
在ECharts中，绘制地图并添加标记（撒点）通常涉及到地理坐标系和数据绑定。以下是一般的步骤： 1. **引入地图组件**： 首先，你需要在ECharts库中引入`echarts-gl`模块，因为ECharts本身不直接支持地图，但`echarts-gl`提供了地图相关的功能。 ```javascript import * as echarts from 'echarts'; import 'echarts-gl'; ``` 2. **加载地图数据**： 获取地图的基础数据，这可能来自于ECharts的数据集或者第三方地图API。例如，你可以从ECharts内置的地图数据或者`world`地理编码数据中选择中国地图。 ```javascript const worldGeoCoordMap = echarts.mapData('world'); ``` 3. **创建图表实例**： 创建一个新的ECharts实例，并设置渲染区域。 ```javascript const chart = echarts.init(document.getElementById('main')); ``` 4. **配置地图系列**： 在`chart`上配置一个GL类型的地理图，并指定地图数据和视觉样式（如颜色、大小等）。在这里添加`points`属性用于标记位置。 ```javascript chart.setOption({ series: [{ type: 'scatter', coordinateSystem: 'geo', data: [ // 这里是一个包含经纬度和标记信息的对象数组 { name: '北京', coord: [116.404, 39.9] }, { name: '上海', coord: [121.4737, 31.2304] } ], symbol: 'circle', // 地图标记类型 size: 10, // 标记大小 itemStyle: { color: '#FF0000' // 标记颜色 } }], visualMap: { pieces: [{ max: 150, show: true, label: { normal: { show: false } }, piecewise: [{ value: 100, color: 'blue' }, { value: 150, color: 'red' }] }] }, geo: { roam: true, // 是否自动平滑缩放 selectedMode: 'multiple', // 多选模式 // 更具体的地图配置，如projection: 'mercator' 或者分块数据 } }); ``` 5. **显示和更新图表**： 最后，调用`setOption`方法将配置应用到图表上，然后调用`chart.show()`显示图表。 相关问题--: 1. 如何根据用户输入动态添加地图标记？ 2. ECharts如何处理地图标记的点击事件？ 3. 如何调整地图标记的样式或动画效果？
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值