使用函数式编程,这也是现在大数据处理的方式和思想。注意shapefile的线数据可以有LineString和MultiLineString两种类型,我们在代码中...
上文介绍了将GIS中常用的线类型shapefile导出为geojson,然后再使用js将geojson转换为echart需要的数据格式,使用EchartsLayer来将GIS中管网,河流等用动画流动效果在地图上呈现出来
好在已经有大牛基于echarts和Arcgis Javascript API自己编写了名为EchartsLayer的图层,让我们很容易的在自己的Arcgis JS API开发的GIS平台中实现这种效果。...image.png image.png image.png image.png image.png 通过上面EchartsLayer需要的数据格式,我们可以看出这种数据表示的是一系列只有两个端点的直线...但是对于我们GIS中常用的shapefile格式,我们如何使用EchartsLayer来实现线的流动动画效果呢?
由wanderGIS这个大牛的兼容Arcgis JS API编写的EchartsLayer做的百度迁徙可视化启发,我们可以在地图上实现一个小区今日实时累积用水的可视化效果。...初始化echartsLayer代码,这里需要根据小区面得到小区中心点的坐标。...point.getLatitude()]] })); geoCoords[-1] = [114.31240081786972, 34.83846342495124]; regionOverlay = new EchartsLayer...window.onresize = regionChart.onresize; } window.initRegionEchartsOnce = _.once(initRegionEcharts); 刷新echartsLayer
这篇文章通过参考dGIS大佬的文章,重构了EchartsLayer.js文件(因为网上所有关于EchartsLayer.js文件的代码全部是编译过的,阅读起来很不友好,并且有些EchartsLayer.js...registerCoordinateSystem方法,通过这个方法我们注册了一个名为”arcgis”的坐标系,里面对eCharts中的dataToPoint、pointToData等方法进行了重写,然后将这些所有内容封装为了一个EchartsLayer...' ], options).then(([ echartsLayer ]) => { console.log(_self.state.mapview...API高版本和eCharts 4版本的结合使用,在这篇文章里最重要的是我们实现了两个图表库中的坐标系转换工作,只要完成了这个步骤,那接下来的绘制其实跟eCharts的普通绘制是相差不大的,后期我会继续更新EchartsLayer...' ], options).then(([ echartsLayer ]) => { console.log(_self.state.mapview
概述 前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图。...registerCoordinateSystem方法,通过这个方法我们注册了一个名为”arcgis”的坐标系,里面对eCharts中的dataToPoint、pointToData等方法进行了重写,然后将这些所有内容封装为了一个EchartsLayer...' ], options).then(([ echartsLayer ]) => { console.log(_self.state.mapview...) //_self.state.mapview.when(function(){ let chart = new echartsLayer(_self.state.mapview...' ], options).then(([ echartsLayer ]) => { console.log(_self.state.mapview
registerCoordinateSystem方法,通过这个方法我们注册了一个名为”arcgis”的坐标系,里面对eCharts中的dataToPoint、pointToData等方法进行了重写,然后将这些所有内容封装为了一个EchartsLayer...' ], options).then(([ echartsLayer ]) => { console.log(_self.state.mapview...) //_self.state.mapview.when(function(){ let chart = new echartsLayer(_self.state.mapview...' ], options).then(([ echartsLayer ]) => { console.log(_self.state.mapview...) //_self.state.mapview.when(function(){ let chart = new echartsLayer(_self.state.mapview
领取专属 10元无门槛券
手把手带您无忧上云