echarts geojson - 腾讯云开发者社区

文章/答案/技术大牛

发布

Echarts——Invalid geoJson format Cannot read property length of undefined

前言做一个地图下钻的echarts，发现点击某几个县市的时候，报错Invalid geoJson format Cannot read property 'length' of undefined，...对比数据发现出现报错原因是因为数据类型中有GeometryCollection存在，但是echarts源码中却没有对应的解析。...https://github.com/wangyang0210/echarts-4.4.0 内容修改方法编辑echarts-4.4.0\src\coord\geo\parseGeoJson.js...文件,直接复制下面的内容覆盖同名方法; /** * @alias module:echarts/coord/geo/parseGeoJson * @param {Object} geoJson *...@return {module:zrender/container/Group} */ export default function (geoJson) { decode(geoJson

5231 0

跟着表哥学开发 Echarts geojson 制作乡镇地图数据

echarts中不能直接用，我们需要处理成json格式。这里我用https://geojson.io/这个网站进行处理。将乡镇边界地图依次导入网站。这里我以陇南市武都区为例。依次导入，注意不要漏掉。.../shell.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('武都区', geoJson); shell.json.../shell.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('武都区', geoJson);.../shell.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('武都区', geoJson);.../shell.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('武都区', geoJson);

8911 0

您找到你想要的搜索结果了吗？

是的

没有找到

eCharts添加自定义geojson数据实现地图展示

概述：当初看到echarts的地图的时候感觉可以做点什么，但是一直米有实施，最近刚好用到了，就研究了研究，在echarts中添加了自定义的geojson数据，实现数据的地图展示。...geojson数据生成： geojson数据的生成有很多种方式，在此介绍两种：1、通过gdal直接转换；2、通过geoserver生成。...1、通过gdal 通过gdal生成可参考文章GDAL的java环境配置以及将shp转换为json 2、通过geojson 在图层预览里面选择geojson即可，如下图。 ?...-- 为ECharts准备一个具备大小（宽高）的Dom --> ECharts单文件引入 --> echarts/chart/map' ], function (ec) { // 基于准备好的dom，初始化echarts

20.6K4 0

从GeoJSON模板速记GeoJSON规范

GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。...这个数组中的每个元素都是一个GeoJSON几何对象。...除此之外，bbox的坐标参考系统假设匹配它所在GeoJSON对象的坐标参考系统。.../p/852d7ad081b3GeoJSON格式规范说明 https://www.oschina.net/translate/geojson-spec?...cmp转载本站文章《从GeoJSON模板速记GeoJSON规范》,请注明出处：https://www.zhoulujun.cn/html/GIS/GIS-Science/2476.html

1.3K1 0

shpfile转GeoJSON；控制shp转GeoJSON的精度；如何获取GeoJSON；GeoJSON是什么有什么用；GeoJSON结构详解（带数据示例）

一、GeoJSON是什么 GeoJSON是一种编码各种地理数据结构的格式。...二、GeoJSON的结构组成 GeoJSON是一种基于JSON格式的地理数据编码标准，其结构由一系列的键值对组成，用于描述地理空间数据。...下面是GeoJSON的主要组成结构：类型（type）：GeoJSON对象的类型，如"Point"、"LineString"、"Polygon"等。...坐标系，不需要坐标系可以省略该参数 geojson = gdf.to_crs(epsg=4326).to_json() # 可以选择将GeoJSON保存到文件 with open('output.geojson...格式 geojson = gdf_simplified.to_json() # 将GeoJSON保存到文件 with open('output_simplified.geojson', 'w') as

5.1K1 0

GeoJSON 和 TopoJSON

GeoJSON 和 TopoJSON 是符合 JSON 语法规则的两种数据格式，用于表示地理信息。 1. GeoJSON 　　GeoJSON 是用于描述地理空间信息的数据格式。...GeoJSON 不是一种新的格式，其语法规范是符合 JSON 格式的，只不过对其名称进行了规范，专门用于表示地理信息。　　GeoJSON 的最外层是一个单独的对象（object）。...最外层的 GeoJSON 里可能包含有很多子对象，每一个 GeoJSON 对象都有一个 type 属性，表示对象的类型，type 的值必须是下面之一： Point：点。 MultiPoint：多点。...TopoJSON 　　TopoJSON 是 GeoJSON 按拓扑学编码后的扩展形式，是由 D3 的作者 Mike Bostock 制定的。...3.在线工具　　JSON在线解析及格式化：https://www.json.cn/ 　　在线生成 GeoJSON：http://geojson.io/ 　　简化、转换 GeoJSON 和 TopoJSON

2.9K8 0

GeoJson数据合并

本文主要是基于geojson-merge，实现多个geojson文件合并为一个geojson文件，以便实现基于该文件进行数据分析展示 geojson合并概述当前在 datav的geoatlas中，可以下载单个地市或区县的数据...，例如福建省下面每个地市都可以单独下载一个geojson文件，现在需要将所有地市的geojson合并为一个福建省区县层级的geojson geojson-merge 现在 npm安装 geojson-merge...库： npm i @mapbox/geojson-merge 支持两种方式进行合并方式1-文件方式合并该方式是每个geojson文件作为数组，传入到merge方法中进行合并，具体如下： var geojsonUtil...= require("@mapbox/geojson-merge"); var fs = require("fs"); var fileDir = "....得到的结果会出现一部分数据丢失方式2-内存数据合并更推荐的一种方式是，将所有json文件读取到内存中，然后进行合并，具体如下： var geojsonUtil = require("@mapbox/geojson-merge

4.5K0 0

echarts画中国地图及省份切换

Geojson 首先了解一下 GeoJSON ，看下维基百科的定义： ★**GeoJSON **是一种基于 JSON 的地理空间数据交换格式，它定义了几种类型 JSON 对象以及它们组合在一起的方法...中国地图和省份的 geoJson 可以在 echarts-map 或者阿里的数据可视化中心进行下载。...image-20220510101045037 echarts 4.x 的版本自带了一些 Geojson 的数据，在 node_modules/echarts/map/json 目录，但可能考虑到一些省区数据不能及时更新...知道了上边的东西，思路其实很简单了，我们只需要把所有省份的 Geojson 数据全部下载下来，然后监听 echarts 的点击事件去显示省份即可。...文章涉及到的一些外链： echarts-map: https://github.com/echarts-maps 阿里云 Geojson: https://datav.aliyun.com/portal

7.1K4 1

制作乡镇地图数据

面临的问题在开发乡镇地图过程中，最麻烦的问题时解决乡镇地图的geojson数据问题。很多平台如阿里云仅仅支持县级平台。乡镇的地图数据是没有的。...echarts中不能直接用，我们需要处理成json格式。这里我用https://geojson.io/这个网站进行处理。将乡镇边界地图依次导入网站。这里我以陇南市武都区为例。...依次导入后，save为geojson数据或者json格式。到这里我们的地图数据就处理完成了。.../shell.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('武都区', geoJson); shell.json.../shell.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('武都区', geoJson);

2.6K4 0

基于JavaScript的开源可视化图标库

ECharts 一文 echarts. registerMap Function ( mapName: string, opt: { geoJSON: Object |...opt geoJSON 可选。GeoJson 格式的数据，具体格式见 GeoJSON。可以是 JSON 字符串，也可以是解析得到的对象。这个参数也可以写为 geoJson，效果相同。 svg 可选。...只在 geoJSON 中生效，svg 中不生效。...echarts. getMap Function (mapName: string) => Object 获取已注册的地图，返回的对象类型如下 { // 地图的 geoJSON 数据 geoJSON...: Object, // 地图的特殊区域，见 registerMap specialAreas: Object } 注： geoJSON 也可写为 geoJson，二者引用的是相同的内容

2.7K1 0

大文件geojson渲染，geojson转pbf矢量切片工具下载！

geobuilding于近日完成重要更新，支持对大数据量，大文件geojson的加载和动态编辑。...现在流行的软件方案有对大数据量的geojson加载，业界普遍共识是转换成矢量切VectorTiles文件。...现在流行的软件方案有1、geoserver可将geojson发布成mvt格式 (java环境)2、mapbox的tippecanoe，将geojson转换成mbtiles再转pbf格式 (c++环境)3...在对国内建筑要素最多的城市上海（67w+建筑物要素 geojson文件400mb+）测试后，也能顺利打开，并进行切片和编辑。...67w+建筑物要素 geojson文件400mb+67w+建筑物要素 geojson文件400mb+pbf矢量切片本地化存储集成转换工具，导入geojson数据即可。

3.2K3 0

开发一个地图图表，摸鱼三小时编码十分钟，还被夸效率太高了

地图图表最近一直在用ECharts，JS实现的一个图表库。功能强大，使用简单。文档和用户也多。...把区域明确之后，需要找到对应区域的GeoJSON数据。把GeoJSON数据通过网络或者离线方式加载到ECharts里面，大功告成。多说无益，来个例子。...先给出实现效果：区域确定之后，就可以去找GeoJSON了。 GeoJSON GeoJSON 是一种用于编码各种地理数据结构的格式，基于 JSON 标准。它主要用于表示简单特征对象及其非空间属性。...获取成都市GeoJSON数据 DataV有一个工具可以直接提取指定区域的GeoJSON数据。地址是（1）操作步骤比较简单，在地图上先选择省，然后选择市。选择到市之后就停下。...比如成都市的区域JSON地址是（以实际为准，可能会有变动）（2）开发图表例子里面用了jQuery来加载GeoJSON数据（也可以下载下来离线加载），使用CDN方式加载ECharts。

8761 0

傻瓜式自制「GeoJSON」

这就涉及到自制「GeoJSON」（一种用于编码各种地理数据结构的格式）,今天就给大家介绍一个可以自制「GeoJSON」的网站：http://geojson.io/ 如图，这个网站可以创建、编辑、保存...「GeoJSON」文件，可以在地图上画点、线、多边形等，左边操作的同时，右侧的 JSON 会同步变化。...此外，右侧的「Table」选项卡，点进去还可以为区域添加属性（地名）编辑好之后，点击 Save>>GeoJSON 就可以保存（下载）这时，就可以参照官方的「JSON 引入示例」，将自制的「GeoJSON...」引入： $.get('map/json/china.json', function (chinaJson) { echarts.registerMap('china', chinaJson);...var chart = echarts.init(document.getElementById('main')); chart.setOption({ series:

3.2K3 0

Echarts中地图引用问题

The GeoJSON of the map must be provided....原因是新版本的Echarts已经移除了地图的JSON 解决方法使用旧版本（不推荐）引入注册地图的JSON 使用旧版本下载低版本的echarts@4.1 npm ls echarts // 查看自己的...echarts版本 npm install echarts@4.1.0 --save //下载低版本echats包含china.js 然后在组件内直接引入china.js即可 import "echarts...方法，在option的geo属性设置对应值 import chinaMap from "@/assets/echarts/china.json"; mounted() { echarts.registerMap...("china", { geoJSON: chinaMap }); if (!

2.8K2 0

疫情大屏优化-ECharts 地图下钻功能实现

也可以先来回顾下上一篇的疫情大屏：超全的疫情大屏展示下钻功能思路我这里还是使用 ECharts 来处理，有一个 API 是 registerMap，可以用来生成地图。...它有两个比较重要的参数，mapName 和 geoJson。 mapName 顾名思义，就是该注册地图的名称。...而对于 geoJson 呢，需要是 GeoJson 格式的数据，具体格式可以参见 http://geojson.org/。...data.jianshukeji.com/geochina/' + provinces[params.name] + '.json', function (jsondata) { echarts.registerMap...初始化绘制省市地图配置 var cityMapContainer = document.getElementById('map_1'); var myMapChart = echarts.init

2.2K4 0

【翻译】GeoJSON格式规范-RFC7946

GeoJSON规范本文档取代了原始的GeoJSON格式规范 GJ2008。 1.4....GeoJSON 文本一个 GeoJSON文本是一个JSON文本，且由一个单个的GeoJSON对象组成。 3....GeoJSON 对象一个GeoJSON对象表示一个Geometry（几何），Feature（特性），或Feature集合。一个GeoJSON对象是一个JSON对象。...一个GeoJSON对象有一个“type”成员，它的值必须是“GeoJSON types” 中的一个。一个GeoJSON对象可能会有一个“bbox”成员，它的值必须是一个边界框数组（参考第5节）。...一个改变GeoJSON成员的语义或者修改了格式的规范不会创建成GeoJSON的新版本; 相反，它定义了一个全新的格式，不能被标识为GeoJSON。 9.

8K8 0

Arcgis for js，Openlayers中加载GeoJSON

中加载展示GeoJSON。...实现： 1、Openlayers2中加载GeoJSON 在OL2中，可以直接调用OL2的借口实现GeoJSON的加载，代码示例： GeoJSON(); vector_layer.addFeatures(geojson_format.read(...GeoJSON 在OL3中也可直接调用OL3的接口展示GeoJSON数据，示例代码如下： ...在Arcgis中没法直接利用接口加载GeoJSON，不过可以通过GraphicsLayer和Graphic实现GeoJSON的加载。

5.2K2 0

关于echarts使用的常见问题总结

关于echarts使用的问题总结 1.legend图例不显示的问题: 在legend中的data为一个数组项,数组项通常为一个字符串，每一项需要对应一个系列的 name,如果数组项的值与name不相符则图例不会显示...,不在内置地图数据可以在地图下载页面http://echarts.baidu.com/download-map.html 下载对应文件,按需求引用; 地图的geojson文件只包含了两层数据(国>省...,省>市,市>区),如需全国所有省市地区的json文件请联系我; eCharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。...AJAX 异步加载后手动注册,我一般使用后者; 方法如下: function mapCharts(name,id){ $.get('json路径/'+name+'.json', function (geoJson...) { echarts.registerMap(name, geoJson); var chart = echarts.init(document.getElementById(id)); chart.setOption

3.7K4 0

小程序Echarts 构建中国地图并锚定区域点击事件

小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 ?...使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1.Github上下载echarts-for-weixin 项目 ?...show.js import * as echarts from '../../...../ec-canvas/echarts.js'; import geoJson from 'data.js'; let chart = null; let dataList = [{ name: 'china...('china', geoJson); //地图数据注册 var option = { tooltip: { triggerOn: "click", formatter

3.4K2 0

升级 | Fastjson 1.2.68 发布，支持 GEOJSON

在1.2.68版本中，引入了GeoJSON的支持。...https://github.com/alibaba/fastjson/wiki/geojson_cn Issues 内置支持geojson https://github.com/alibaba/fastjson.../wiki/geojson_cn 修复1.2.67版本引入JSONObject.toJavaObject某些场景结果不对的问题。

1.6K2 0

点击加载更多

Echarts——Invalid geoJson format Cannot read property length of undefined

跟着表哥学开发 Echarts geojson 制作乡镇地图数据

eCharts添加自定义geojson数据实现地图展示

从GeoJSON模板速记GeoJSON规范

shpfile转GeoJSON；控制shp转GeoJSON的精度；如何获取GeoJSON；GeoJSON是什么有什么用；GeoJSON结构详解（带数据示例）

GeoJSON 和 TopoJSON

GeoJson数据合并

echarts画中国地图及省份切换

制作乡镇地图数据

基于JavaScript的开源可视化图标库

大文件geojson渲染，geojson转pbf矢量切片工具下载！

开发一个地图图表，摸鱼三小时编码十分钟，还被夸效率太高了

傻瓜式自制「GeoJSON」

Echarts中地图引用问题

疫情大屏优化-ECharts 地图下钻功能实现

【翻译】GeoJSON格式规范-RFC7946

Arcgis for js，Openlayers中加载GeoJSON

关于echarts使用的常见问题总结

小程序Echarts 构建中国地图并锚定区域点击事件

升级 | Fastjson 1.2.68 发布，支持 GEOJSON

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐