前言 做一个地图下钻的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
效果如下: 所用的插件 echarts.js 官方地址:Examples – Apache ECharts 使用方法: 1、头部引入(官网下载地址:点这里下载文件) Jetbrains全家桶1年46,售后保障稳定 2、基础应用(参考官网) // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById(...scriptId; document.getElementsByTagName("head")[0].appendChild(script); }; 完整代码包:点这里下载 geojson...生成工具:geojson.io 注:本文纯属资源整合,如有问题请联系博主 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。
概述: 当初看到echarts的地图的时候感觉可以做点什么,但是一直米有实施,最近刚好用到了,就研究了研究,在echarts中添加了自定义的geojson数据,实现数据的地图展示。...geojson数据生成: geojson数据的生成有很多种方式,在此介绍两种:1、通过gdal直接转换;2、通过geoserver生成。...1、通过gdal 通过gdal生成可参考文章GDAL的java环境配置以及将shp转换为json 2、通过geojson 在图层预览里面选择geojson即可,如下图。 ?...-- 为ECharts准备一个具备大小(宽高)的Dom --> <script src="../.....'<em>echarts</em>/chart/map' ], function (ec) { // 基于准备好的dom,初始化<em>echarts</em>
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
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
面临的问题 在开发乡镇地图过程中,最麻烦的问题时解决乡镇地图的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);
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
本文主要是基于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
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,二者引用的是相同的内容
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数据即可。
这就涉及到自制「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:
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 (!
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.
ECharts 创建旭日图很简单,只需要在 series 配置项中声明类型为 sunburst 即可,data 数据结构以树形结构声明,看下一个简单的实例: var option ={ series
也可以先来回顾下上一篇的疫情大屏:超全的疫情大屏展示 下钻功能思路 我这里还是使用 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
引入相关文件 旭日图是 ECharts 4.0 新增的图表类型,需要引入完整版的 echarts.min.js 最简单的旭日图 创建旭日图需要在 series 配置项中声明类型为 ‘sunburst’.../js/echarts.min.js"> ... var myChart = echarts.init(document.getElementById('main')); var option.../js/echarts.min.js"> .../js/echarts.min.js">
概述 本位通过FileReader实现csv或geojson文件的前端解析并在地图上展示。 效果 实现 1.文件选择 文件选择用element-ui的el-upload组件实现。...= new Geojson(features) if(geomType.indexOf('point') !...}-polygon`).setData(geojson) } const [xmin, ymin, xmax, ymax] = turf.bbox(geojson);.../geojson' import { wktToGeoJSON } from "@terraformer/wkt" export function csv2geojson(csvContent) {...文件解析 // geojson文件 if(uploadFile && this.dataFormat === 'geojson') { const reader = new FileReader()
关于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
采集到手的json文件,并非最终可用的geojson的地图数据包格式,需转换,先转Excel表格,直观配置所需信息。 ? 再转成geojson格式的地图数据包,可以完美用于地图可视化。 ?...后续功能探索 从上述所提到的效果,已经顺利将POI的轮廓线采集到手,并转换为geojson地图数据包,在EasyShu里用可视化的方式呈现了。 还有其他工作,可让其效果更完美和实用。...各地图数据文件格式转换 LSV是采用谷歌地球的kml文件格式,而我们ECharts可视化时使用geojson格式,同时最佳的数据处理、整理是在Excel环境中,所以需要将此几类格式进行互转,最终实现的效果是中...LSV上交互方式绘制好轮廓线,转换回Excel环境 ,再处理一些属性信息,再转换为geojson供ECharts使用。...格式供供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
领取专属 10元无门槛券
手把手带您无忧上云