02【ArcGISJSAPI+eCharts系列】实现二、三维迁徙图的绘制_echarts实现3D迁徙图 - CSDN文库

493 浏览量更新于2023-05-30 评论 1 收藏 631KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

02 【【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制系列】实现二、三维迁徙图的绘制

概述概述

上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制，因为这些图表绘制其实是跟地理坐标无关的，只需要设置图表的位置即可，所以仅仅用了纯前端的方式去实现。这篇

文章通过参考【dGIS】大佬的文章，重构了EchartsLayer.js文件(因为网上所有关于EchartsLayer.js文件的代码全部是编译过的，阅读起来很不友好，并且有些EchartsLayer.js扩展文件仅仅支持到ArcGIS

JS API 4.6版本，对于ArcGIS JS API 4.14这样的高版本切换还是有一些问题)，使其支持最新版的ArcGIS API for JavaScript 4.14和eCharts 4版本，实现了在ArcGIS的底图上使其能够绘制二维和三维的

迁徙图，我们先来看一下效果：

实现思路实现思路

迁徙图、散点图这种图表跟地理坐标关系紧密，所以仅仅通过二维普通图表绘制的方式是无法实现这类图表绘制的，所以就需要我们来扩展eCharts的相关功能，使其能够够结合最新版的ArcGIS JS API

来完成地图上这类图表的绘制，eCharts官网也提供了相应的扩展插件，但这种插件并不能很好地支持我们ArcGIS JS API的高版本，所以我们在这篇文章里直接扩展了一个图层类，下面是具体的实现思

路：

实现ArcGIS JS API和eCharts的结合，最最关键的是要实现两个插件库里的坐标系转换，这是重点，只要搞清楚了这一点，我们完全可以脱离地图API库的束缚，理论上可以实现eCharts跟任意地图库的

结合。在此处转换坐标时我们使用了eCharts提供的registerCoordinateSystem方法，通过这个方法我们注册了一个名为”arcgis”的坐标系，里面对eCharts中的dataToPoint、pointToData等方法进行了重

写，然后将这些所有内容封装为了一个EchartsLayer图层类。至于这个文件的源码，文章结尾会提供，接下来我们看一下具体的实现步骤。

实现步骤实现步骤

1、本文所用的demo是基于React框架搭建的，所以我们首先基于React框架搭建一个初始化项目，然后改写src目录下的App.js这个主文件，实例化出一张二维地图，这中间用到了esri-loader插件，具体

的实现过程可查看我的这篇文章【【番外】 React中使用ArcGIS JS API 4.14开发】，里面有具体的实现步骤。

2、通过上述操作实例化完一张二维地图后，我们接下来就要进行迁徙图的绘制操作了，在开始之前我们需要一些数据，首先是迁徙途中所要用到的各个行政区划的省会城市坐标，是一份JSON文件，源

文件如下：

let GeoCodingData = {

'海门': [121.15, 31.89],

'鄂尔多斯': [109.781327, 39.608266],

'招远': [120.38, 37.35],

'舟山': [122.207216, 29.985295],

'齐齐哈尔': [123.97, 47.33],

'盐城': [120.13, 33.38],

'赤峰': [118.87, 42.28],

'青岛': [120.33, 36.07],

'乳山': [121.52, 36.89],

'金昌': [102.188043, 38.520089],

'泉州': [118.58, 24.93],

'莱西': [120.53, 36.86],

'日照': [119.46, 35.42],

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余6页未读，立即下载

评论0

weixin_38656064

粉丝: 8
资源: 933

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈