echarts绘制地图所用的json文件如何修改geometry.coordinates

李虎军 2019-03-26 05:27:12
echarts绘制地图所用的json文件如何修改geometry.coordinates属性;

现阶段我正在学习echarts绘制地图;
我使用的是本地json、js文件通过echarts插件绘制的。但是在绘制内蒙古 - 呼伦浩特市的时候发现与百度地图上的地图区域不太对应,
但是百度地图api里获取到的地理坐标是116.401487, 40.039207;116.396889, 40.043107;116.397532, 40.047478;116.377657, 40.050901这种形式;
而js或json里的coordinates属性(地理坐标)是:"@@R@ZNJBbE\\FpGnARD\\TPDL@XEL@jRJH\\^JHJDLD`@^AfIxAH@JHDDNBXCV@ZJ~PL]LIvKRKTQHELCTADAJIreFEDGHANAHBXFL@LCNMnWDIAG@KKK@K@GJU@A_EIECEBKAKBCPMNE†UPMJG^"
这种的字符串形式。

弄了12个小时了,也没找到转换方法,用数字坐标形式,绘制的图形不太对。

有哪路大神能够指点一下,仅限于echarts实现。非常感谢
...全文
1970 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
WuLiMi19 2021-06-30
  • 打赏
  • 举报
回复

你的做好了没有 ,怎么做的呀

Dr立 2019-05-17
  • 打赏
  • 举报
回复
引用 楼主 高胜超 的回复:
echarts绘制地图所用的json文件如何修改geometry.coordinates属性; 现阶段我正在学习echarts绘制地图; 我使用的是本地json、js文件通过echarts插件绘制的。但是在绘制内蒙古 - 呼伦浩特市的时候发现与百度地图上的地图区域不太对应, 但是百度地图api里获取到的地理坐标是116.401487, 40.039207;116.396889, 40.043107;116.397532, 40.047478;116.377657, 40.050901这种形式; 而js或json里的coordinates属性(地理坐标)是:"@@R@ZNJBbE\\FpGnARD\\TPDL@XEL@jRJH\\^JHJDLD`@^AfIxAH@JHDDNBXCV@ZJ~PL]LIvKRKTQHELCTADAJIreFEDGHANAHBXFL@LCNMnWDIAG@KKK@K@GJU@A_EIECEBKAKBCPMNE†UPMJG^" 这种的字符串形式。 弄了12个小时了,也没找到转换方法,用数字坐标形式,绘制的图形不太对。 有哪路大神能够指点一下,仅限于echarts实现。非常感谢
你需要判断他们用的是什么坐标系。 参考下面这个坐标系转换 https://www.cnblogs.com/yesicoo/p/4668642.html
2019-04-28
  • 打赏
  • 举报
回复
直接用没加密的数据就行了

<script type="text/javascript">
	var mapdata = {"type": "FeatureCollection", "features": [{"type":"Feature","properties":{"name":"丰台区","id":"110106"},"geometry":{"type":"MultiPolygon","coordinates":[[[[116.317345,39.8938430000001],[116.321324492188,39.8769472480469],[116.35845828125,39.8653823066407],[116.377345,39.873843],[116.39634890625,39.8501113105469],[116.411793242188,39.8693959785156],[116.437345,39.873843],[116.454151640625,39.8484108710938],[116.427345,39.833843],[116.421881132813,39.8293056464844],[116.407515898438,39.8120082832032],[116.431300078125,39.7922487617188],[116.369420195313,39.7793056464844],[116.352808867188,39.7993056464844],[116.32748171875,39.8083803535157],[116.302413359375,39.7677419257813],[116.284703398438,39.7890627265625],[116.247345,39.793843],[116.2157825,39.8279079414063],[116.192530546875,39.778637921875],[116.162877226563,39.7798122382813],[116.152535429688,39.7686525703125],[116.1217590625,39.7590334296875],[116.122545195313,39.7788430000001],[116.122125273438,39.7894289375001],[116.085533476563,39.7879787421875],[116.072535429688,39.8290334296875],[116.047345,39.843843],[116.05388796875,39.8544655585938],[116.131158476563,39.8800307441406],[116.157345,39.883843],[116.210953398438,39.8771450019531],[116.231793242188,39.8893959785157],[116.247345,39.8938430000001],[116.292506132813,39.8882009101563],[116.317345,39.8938430000001]]]]}}]};
	echarts.registerMap('丰台区', mapdata);

	var chart = echarts.init(document.getElementById('chart'));
	var option = {
        title: {
            text: '丰台区',
        },
        series: [
            {
                type: 'map',
                map: '丰台区'
            }
        ]
    }
	chart.setOption(option);
</script>
A17732810425 2019-04-27
  • 打赏
  • 举报
回复
同求次方法啊~~求大神指点
 OpenGL-自主高性能三维GIS平台架构与实现/第二季:实现三维GIS球体+ 高程数据章节名称DEM基础1DEM基础知识1.介绍基本的DEM知识2.什么是DEM,作用是什么2DEM数据1.如何获取/ 传统测量/激光扫描/无人机测量/ 点云数据/ 倾斜摄影2.如何使用/局部小规模(栅格数据,图片/tif),3. 组织方式4. 根据使用目的不同,介绍多种优化方法3DEM图层的实现原理14DEM数据结构定义struct  V3U3N4顶点数据的生成和计算WGS84投影计算5wgs84 投影球体被切成一个个小圆弧,一共60个投影带,分别为01,02.........60WGS的最新版本为WGS 84(也称作WGS 1984、EPSG:4326),1984年定义、最后修订于2004年。接口定义坐标转换Wgs84 数据加载6瓦片编号计算生成算法1. 经纬度到大地坐标的转换2.大地坐标到经纬度坐标转换3. 根据经纬度获取瓦片编号框架重构7智能指针重构框架1. 基类定义(所有的类继承自基类),基类派生自 std::enbale_shared_from_this2. 实现智能指针的动态转换接口3. 实现向下转换4. 已有的类实现全部使用智能指针重构5. 任务系统(多线程加载任务)8引入图层(Layer)1. 介绍图层的概念以及重要性2. 图层类实现3. 修改框架(使用图层的方式重构框架)9Layer-bug排查(绘制过程中出现错位,偶发)1. 框架重构后遇到问题(绘制结果错误)2. 瓦片索引方式发生变化,多线程中引起内存问题3. 修改索引方式,解决绘制偶发错误问题10引入数据源(TileSource)1. 数据源的作用与设计目的2. 当前存在的问题,数据调度中存在问题3. 数据源(TileSource)类实现11数据格式管理(FormatMgr)1. 数据格式管理(FormatMgr) 提出的目的,需要解决的问题2. CELLFormat基类接口抽象3. 实现几个标准格式类4. 修改框架流程,使用FormatMgr重构流程5. 扩展支持,后续支持任务格式数据加入系统12Task(任务)优化1. 任务中低耦合数据结构,目的是让Task更加的通用2. 修改任务读取代码与任务处理代码,完善处理流程DEM高程13DEM-数字高程定义1. 什么是数字化高程数据2. 当下GIS系统中有哪些常见的高程格式3. 课程体体系中使用的哪种格式4. 高程类定义以及实现,并加入到FormatMgr 管理系统中14高程瓦片数据读取1. 介绍GIS系统相关的工具(在数据转换)数据生成方面可以解决大量时间2. 自定义高程瓦片格式说明3. 自定义高程格式文件解析,并以智能对象的方式引入到系统中4. 完善框架代码,适配高程数据15高程瓦片文件的读取1. 实现基本的读取算法2. 增加格式化组件,并加入到系统中3. 配置高程图层以及高程数据源,并加载数据,验证数据正确性16瓦片数据结构重构1.顶点生成2.UV坐标计算3.面数据生成17DEM重构绘制流程1. 修改绘制数据结构,去除无用字段2. 增加Mesh类,实现光栅数据转换成三角面数据,计算UV数据,提炼接口3. 修改系统调度,实现顶点数据,UV数据,以及面数据的生成与更新4. 按需更新数据,而不是每一帧更新18DEM-数据精度问题(CPU)1. 因为瓦片数据使用大地坐标作为系统输入,造成瓦片坐标很大,单浮点数据精度不够2. 使用局部坐标的方式解决单浮点精度问题3. 调整相机参数,解决投影矩阵数据计算深度精度问题4. 修改绘制shader 实现对瓦片数据的绘制19DEM-数据精度问题(LogDepth)1. 使用对数深度(log depth )算法在GPU中 计算解决单浮点经纬计算问题2. 修改shader ,增加对(logDepth)算法支持3. 修改C++端代码,实现对shader数据的输入20DEM-数据结构优化1.当下使用CPU端数据通过接口的方式传递给GPU,速度慢2. 使用Instance 方式降低Vertex Buffer 的大小,优化渲染系统21DEM-GPU缓冲区优化1. 使用Vertex Buffer Object / Index Buffer Object  / Instance  方式优化渲染系统2. 修改绘制接口,使用DrawElementsInstanceBaseInstance方式提升系统性能内存池与对象池22瓦片生成优化/对象池1. 相机移动过程中会频繁的建立与释放瓦片,对CPU有较大的消耗2. 引入内存池,避免频繁的内存申请与释放,降低CPU时间3. 改造智能指针对象,对象释放通知到内存管理,回收对象内存23改造任务系统支持对象池1. 任务系统是一个公用模块,被多个模块使用,避免频繁的内存操作,引起的内存碎片2. 实现对象池,并应用到任务模块法线计算24法线计算1. 修改现有顶点结构,增加法线支持2. 修改shader,增加法线顶点输入,使用平行光光照模型3. 修改绘制流程,支持光照计算,使用探照灯作为光源输入25顶点法线计算/共享法线计算1. 增加数据结构保存顶点数据被多个面共享的次数2. 计算面法线,并累加到顶点法线中3. 根据顶点被面共享的次数做平均法线计算4. 修改流程,按需更新法线数据26法线数据压缩1. 法线数据使用3 * float 数据存储,大大的增加了系统的数据2. 实现算法,将3 * float 数据压缩成4字节数据3. 改造绘制代码,支持压缩数据输入27GPU中计算产生法线数据(去掉CPU中计算)1. 引擎支持 Geometry Shader 阶段2. 编写 Geometry Shader,实现法线计算系统功能优化28重构CPU拾取流程1. 当下的拾取流程,只支撑二维数据拾取,无法准群的拾取三维数据2. Terrain中增加拾取接口,输入射线,输出拾取到顶点数据29绘制拾取结果1. 增加一个绘制点的方法,实现绘制代码2. 修改shader,增加logdepth3. 调试代码,花费了很多时间排查错误,最总排查到是因为uniform参数笔误写错造成。30任务系统完善,避免任务队列无线膨胀1. 任务系统中,没有限制队列的大小,生产者的能力远大于消费者的能力,造成任务队列膨胀2. 处理办法,限制生产者的生产能力,而不是限制任务队列大小(这种方式会造成业务逻辑异常复杂)3. 使用sleep休眠方式(这种方式是严重错误的)31如何避免瓦片数据抖动1. 产生瓦片抖动的原因 ? 分裂算法与回退算法中间没有过度2. 引入过度流程,避免内存抖动,参数因子是一个重要的数据,需要谨慎使用3. 有必要结合瓦片自身数据动态计算参数因子32瓦片数据管理-fepk文件格式支持-全球数据加载1. 支持fepk文件格式,增加fepk读取组件,适配fepk文件2. fepk管理数据方式:一般情况选择全球前10级别作为基础级别,因数据量不大(1G)左右,后续以8级作为基础级别,全球19级别数据被划分为 2^8 * 2^7(512 * 256)个块。每个块中包含了256 * 256 张小瓦片33fepk高程数据读取 34高程分裂处理当瓦片没有高程数据,那么子节点以及其他后代节点该如何共享父节点的数据35lesson-734-高程瓦片分裂处理(2)-算法实现高程数据分裂算法实现实现对高程数据的切分,并对特殊数据进行处理36高程瓦片分裂处理(3)-问题排查 37高程瓦片分裂处理(4)-(后代节点更新问题)当一个瓦片高程数据更新后,他的儿子节点,孙子节点...该如何处理?38瓦片视锥裁剪错误高程数据更新后,没有技术计算瓦片包围盒信息,造成包围盒错误,进而引视锥计算错误39http支持1.引入三方库 Libcurl2.http类封装,支持http读取数据40fepk.server使用 生成三维地球41改造四叉树-统一使用经纬度输入42地形网络生成算法重构 43引入球体坐标系 44使用球体坐标改造瓦片 45多图层(加载标签数据) 课时截图:镜头拉近后,显示细节数据加载矢量SHP国界线数据:加载矢量三维白膜数据截图高程数据加载点云数据 加载倾斜摄影数据 

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧