Echarts地图 绘制自定义区域 - geojson.io使用方法

最新推荐文章于 2024-08-05 05:00:00 发布
最新推荐文章于 2024-08-05 05:00:00 发布
阅读量5.3k 收藏 16
点赞数 6
分类专栏： Echarts 文章标签： echarts 前端 街景地图 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zaqenenen/article/details/111051942
版权
本文介绍了如何使用Echarts绘制自定义区域，如高新区的河源市地图，通过geojson.io工具进行地图编辑。针对区域点击无效的问题，提供了编辑已绘制地图和解决本地json文件跨域问题的方法，包括转换为js文件引入。
摘要由CSDN通过智能技术生成

Echarts地图 绘制自定义区域 & 解决区域点击无效

1. 绘制地图自定义区域

需求：绘制带高新区的河源市地图，目前百度地图json还没有此新区。需手动绘制。
STEP1：获取市区json文件—输入市区后选择下面JSON API(包含子区域)的下载

STEP2：geojson中左上角打开step1下载的文件，点下图按钮绘制新区区域，右侧富文本框便会同步生成新生地图的json文件，绘制完成保存即可在echarts中引入。

在这里插入图片描述
STEP3： 在echart中使用

var heyuanMap= echarts.init(document.getElementById('map_box'))
//第一个参数为自定义地图名，最好是绘制市区的拼音
//第二个参数是外部引入的json文件，放在变量data中
 echarts.registerMap('heyuan', data); 
  heyuanMap.setOption({
  	//.
最低0.47元/天 解锁文章
zaqenenen
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts地图 自定义区域
weixin_50885665的博客
12-28 479
关于echarts地图坐标自定义区域说明_带刺的茄子的博客-CSDN博客_echarts 地图 自定义区域echarts-map最新实时geoJson文件下载_hxkj.vip_HashTang使用ECharts map，实现省、市、区县、乡镇自定义地图_佳了个欣。的博客-CSDN博客_echarts乡镇地图数据 echarts 地图 自定义区域_一天28小时的博客-CSDN博客_echarts 地图 自定义区域Echarts地图 绘制自定义区域 - geojson.io使用方法_zaqenenen的博客
Echarts自定义地图显示区域，可以显示公园，小区，学校等区域
speedwalkman的专栏
06-12 3251
具体工作中，使用Echarts时要显示自定义区域，但是往往这些区域不是默认的区域，需要我们手动建立这个区域的地理信息。 本章就是教会大家如何自己动手生产自定义区域的地理信息。
Echarts 绘制地图（中国、省市、区县），保姆级教程！
共同学习，共同成长
06-11 1万+
这篇讲述 Vue+Echarts 绘制地图（中国、省市、区县），保姆级教程！
Echarts 绘制地图（中国、省市、区县）
最新发布
富朝阳的博客
08-05 4688
Echarts 绘制地图（中国、省市、区县）
Echarts 地图添加自定义区域
weixin_30654583的博客
04-25 4797
使用 Echarts 生成地图时，如果需要添加一些自定义区域，该怎么做呢？请看下面示例。 生成原始地图 index.hmtl 引入 Jquery 和 Echarts <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Echarts 地...
echarts 地图 自定义区域
郑州彭于晏
04-23 635
1 DATAV.GeoAtlas 2 bigemap 3合并文件 http://geojson.io/#map=11/34.8856/114.9733 <!-- * @Author: zhang gen yuan * @Date: 2021-04-13 14:43:28 * @Descripttion: --> <template> <div ref="line" style="width: 100%; height: 600px"></div&
关于echarts地图坐标自定义区域说明
带刺的茄子
05-14 3446
一、通过其他平台提供的Geojson，对echarts引入配置 推荐： 1、 地址 2、TangSY 地址 地址2 二、提供的Geojson与实际可能会有误差，比如区域重新划分等，这就需要对Geojson重新完善 推荐使用geojson.io进行自定义编辑，平台提供对原json文件修改或自己完全自定义制作（太麻烦，需要耐心，自己一点一点勾画） 地址 1、导入json文件 导入后效果： 2、编辑 点击对应区域块编辑json具体内容 3、对错误的区块删除重新绘制 重新勾画新区域 添加其他配置项，如
echarts自定义区域地图
qq_41612176的博客
08-27 3988
echarts自定义区域地图地图代码逻辑梳理文件梳理myChina.jsonmapData.jsonmock.json（权限json---等同于后台返回的权限json）chinaMapData.json(全国地图展示数据信息 --- 等同于后台请求的数据json)绘制逻辑规则判断划分逻辑 地图代码逻辑梳理 文件梳理 myChina.json 主要参数 properties.name (地区名称) properties.regionId (地区id) geometry.coordinates (单独区域
Echarts自定义地图显示区域，可以显示街道，小区，学校等区域
共同学习，共同成长
06-12 1539
Echarts自定义地图显示区域，可以显示街道，小区，学校等区域
自定义绘制地图（Echarts）
u013845168的博客
10-21 1411
需求说明： 今天本来在认认真真摸鱼的时候，突然接到一个客户需求，说是做一个首页，首页里面有一个本市的地图，通过点击不同的区域的地图块，然后跳转到对应区域的办公系统。 实践： 虽然作为一个后端程序员，但是这个小前端还是有信心的，然后就去Echarts官网找，后来发现一个问题，因为客户需求中有明确要求7个区县，但是地图中只有6个，有一个新区是才划分出来的。那么问题来了，新区怎么划分坐标，只能根据客户提供的图片来画，关键就是怎么定义坐标。 但是这并不能难道机智的我，因为精确度要求不高，所以就画一个大概，首
echarts自定义地图绘制方法
03-05
文档介绍了绘制echarts地图的方法，需要自定义地图的同学可以参考
自定义百度地图绘制echarts，地图可精确到县区，乡镇。自定义图形echarts。
10-11
百度地图绘制echarts，地图可精确到县区，乡镇自定义demo。通过百度地图坐标点，调用echarts中map方法，可参见echarts文档，最终自定义县区或乡镇图表，拥有echarts所有功能及效果。
echarts地图自定义区域(并添加标记)
前端阿皓
09-10 8089
一、安装echarts???? npm i echarts --save 二、引入注册???? // main.js import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts 三、绘制自定义区域并下载geojson???? 1、打开网站 http://geojson.io/ 2、项目中新建map.json，将geojson的内容复制到map.json里面 四、使用???? 1、将map.json引入到当前页面 import
Vue 使用 Apache Echarts 绘制地图（省市、地区、自定义）
热门推荐
~朴：shu的博客
07-04 2万+
使用Apache Echarts绘制中国、省市级、自定义地图的方法
echarts地图自定义任意区域
bangman4009的博客
04-11 1317
这里可以直接在地图上框选区域，右侧会自动生成geojson 转载于:https://www.cnblogs.com/Brose/p/echarts_map_diy.html
echarts生成地图(自定义区域色块,自定义图标样式,自定义移入效果)
m0_61476911的博客
12-26 1981
给每个区域加上需要的颜色就可以，此处数据是写死的，如果是后端提供就需要拼接一下成这个样式，关键代码块：tooltip: {},},},//针对于多个不同图标使用// })// }, // svg图标z: 999,zoom: 1,//自定义鼠标移到图标上显示的东西tooltip: {params.name == "成都市" ||params.name == "绵阳市"?"红色预警": "哈哈哈";},},},
echarts自定义，绘制区县地图
wulincoo
01-30 2101
echsrts自定义区县地图
vue+echarts 区域地图绘制（街道）
qq_42221321的博客
12-21 6688
vue+echarts 区域地图绘制（街道）1、以下是本人参考别的博主的链接2、需要用到的资源3、获取地图JSON（1）[阿里云](http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5)获取--只精准到市区（--这里以深圳市为例）（2）[北斗卫星软件](http://www.bigemap.com/)获取--精准
echarts导入自定义地图的geojson文件代码
06-08
在Charts 中导入自定义地图，需要用到 ECharts 的地图组件和 GeoJSON 数据格式。以下是导入自定义地图的代码示例： 1. 首先，需要引入 ECharts 库和地图组件： ```html <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts-gl.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/extension/dataTool.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/extension/bmap.min.js"></script> ``` 2. 然后，需要定义一个容器用于渲染地图： ```html <div id="map" style="width: 100%; height: 600px;"></div> ``` 3. 接着，定义一个 JavaScript 对象，用于存储自定义地图的配置信息： ```js var geoCoordMap = { '上海': [121.4648, 31.2891], '东莞': [113.8953, 22.901], '东营': [118.7073, 37.5513], // 自定义地图的坐标信息 }; var mapName = 'customMap'; // 地图名称 var geoJson = { type: 'FeatureCollection', features: [ { type: 'Feature', properties: { name: '上海' }, geometry: { type: 'Polygon', coordinates: [ [ [121.4648, 31.2891], [121.4648, 31.1791], [121.6548, 31.1791], [121.6548, 31.2891], [121.4648, 31.2891] ] ] } }, // 自定义地图的 GeoJSON 数据 ] }; ``` 4. 然后，使用 ECharts 的 `registerMap` 方法注册自定义地图： ```js echarts.registerMap(mapName, geoJson, { // 自定义地图的配置项 geoJson: { // GeoJSON 数据是否显示在 tooltip 中，默认为 true showGeoJson: false }, // 自定义地图的坐标信息 specialAreas: geoCoordMap }); ``` 5. 最后，在 ECharts 中使用注册好的自定义地图： ```js var option = { // 其他配置项 series: [ { type: 'map', map: mapName, // 使用自定义地图 // 其他配置项 } ] }; // 渲染地图 var chart = echarts.init(document.getElementById('map')); chart.setOption(option); ``` 以上就是使用 ECharts 导入自定义地图的代码示例。可以根据实际情况修改自定义地图的配置信息和渲染方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值