可视化
关注
分享
扫一扫
爱睡懒觉的老舅
GISer一枚，好好学习技术
展开
-
可视化例子(16)——Echarts4 与 arcgis api 4.x for js 结合实现模拟迁徙图效果
一、效果图（3D地球）二、代码Echarts 和 arcgis api 4.x for js 结合实现迁徙图效果的关键问题在于两者的坐标系不统一，因此需要进行 Echarts 坐标系和 arcgis 坐标系的转换。这里借鉴业余敲代码的思路，采用的方法是注册一个坐标系统：命名为arcgis(名称可自由拟定)的坐标系。在此基础上，采用dojo的define定义了一个名为EchartsLayer的模板。echarts.registerCoordinateSystem('arcgis', this原创 2020-11-22 00:43:35 · 1676 阅读 · 4 评论 -
Web绘图标准—SVG和Canvas
之前看极客时间四火老师有一节课讲到了数据可视化（参见https://time.geekbang.org/column/article/152557），讲得很好，正好跟我最近做的事情相符，这里面也总结下。Web 绘图标准在前端绘图中，我们常见的有位图和矢量图这两种，其实有点类似我们 GIS 中的栅格图和矢量图位图：通常我们谈论的图片(如 png、jpg 等格式)绝大多数都是位图。位图又叫...原创 2020-03-21 15:51:58 · 1206 阅读 · 0 评论 -
可视化例子(12)——ECharts堆叠直方图
堆叠直方图主要是要 series.stack 属性一样。全部代码如下<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"></head><body style="height: 100%; margin: 0"><...原创 2020-03-18 18:13:13 · 949 阅读 · 0 评论 -
可视化例子(14)——ECharts波浪图(或者称为河流图)
主要是在 series.itemStyle 里面设置 areaStyle 属性areaStyle:{ //有这个属性代表是波浪图 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, ...原创 2020-03-18 17:22:29 · 4158 阅读 · 4 评论 -
可视化例子(13)——ECharts堆叠直方图(根据时间动态变化)
这是之前做的堆叠柱状图，根据时间进行变化，在这里记录下，等以后需要的时候可以直接在这里面拿代码。柱状图是线性渐变，主要是这个属性：itemStyle: { color: new echarts.graphic.LinearGradient( //柱子渐变效果 0, 0, 0, 1, ...原创 2020-03-18 17:06:03 · 2024 阅读 · 0 评论 -
数据可视化学习总结
由于工作也要负责可视化这块，因此会做很多可视化的例子，这里将所有可视化的例子总结出来：（1）Mapbox-bar3D(3D地图柱状图)（2）Maptalks-bar3D(3D地图柱状图)（3）geo3D-bar3D(3D地图柱状图)（4）人口迁移轨迹(样式更好看lines3D)（5）人口迁移流动图(百度地图)（6）geo3D-北京公交线路图(2.5D地图流动)（7）mapbox-北京...原创 2020-03-17 16:23:37 · 12037 阅读 · 1 评论 -
可视化例子(11)——ECharts line3D制作三维折线图
因工作需要，制作了三维折线图，可以看到三个变量的变化。其效果如下图所示：其中遇到了一个很大的问题，line3D 无法出现标签（查看了所有配置项，均没有该配置，这应该是 ECharts 的一个 bug），即如图所示中数值无法出现。后来想到的解决办法是再画个散点图（scatter3D），因 3D 散点图可以出现标签。3D 折线图套上散点图，就如同折线图上面可以出现标签了。<!doc...原创 2020-02-25 10:37:40 · 10155 阅读 · 8 评论 -
可视化例子(10)——HighCharts三维堆叠柱状图
由于工作的需要接触 HighCharts 的使用。做出了个三维堆叠柱状图，得出的效果图如下图所示：其主要代码如下：<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta ...原创 2020-02-25 10:29:54 · 1603 阅读 · 0 评论 -
基于leftlet的旅游地图相册
之前在一个专栏课里面看到一个旅游地图相册的 Demo，一直想把它总结下，放到博客里面。一、底图切换和版权信息，此处调用了七种地图服务，其中前五个使用了插件调用地图底图，最后两个调用Mapbox 地图底图。//自定义版权信息var mapAttr = 'Map data © <a href="https://xiaozhuanlan.com/webgis...原创 2020-01-12 14:28:05 · 1405 阅读 · 0 评论 -
可视化例子(7)——mapbox-北京公交线路图(2.5D地图流动)
一、数据格式数据格式及参照方法：参照https://blog.csdn.net/Ocean111best/article/details/103294067二、全部代码<!doctype html><html> <head> <meta charset="utf-8"> <title&g...原创 2019-11-30 12:45:01 · 3704 阅读 · 2 评论 -
可视化例子(8)——Maptalks-scatter3D-微博亮点数据
一、数据格式数据中第一二个数是第一个点的经纬度的 1000 倍，后面数是后面点与第一个点的插值，如第一个点经纬度的 1000 倍为 73960、39707，第三四个数 132、102 分别是第二个点经纬度与第一个点经纬度的差值，后面类比；通过以下代码处理成正常的经纬度坐标： $.getJSON('data/weibo.json', function (weiboData) { ...原创 2019-11-28 16:00:36 · 1005 阅读 · 0 评论 -
可视化例子(6)——geo3D-北京公交线路图(2.5D地图流动)
一、数据格式说明：数据中第一二个数是第一个点的经纬度的10000倍，后面数是后面点与第一个点的插值，如第一个点经纬度的10000倍为1164383、401471，第三四个数-11、-13分别是第二个点经纬度与第一个点经纬度的差值，后面类比；若想用此代码，则可用python 脚本将数据处理成上面类似样式。通过下面代码处理成正常的经纬度坐标 $.getJSON('data/li...原创 2019-11-28 15:30:29 · 2920 阅读 · 5 评论 -
可视化例子(3)——geo3D-bar3D(3D地图柱状图)
一、效果图二、数据格式数据以“[[精度，维度，柱子高度],[精度，维度，柱子高度],[精度，维度，柱子高度]...]”这样的形式存储在Json文件中，通过Filter函数存储到 data 里面：$.getJSON('./data/population.json', function (data) { data = data.filter(fun...原创 2019-11-28 00:50:30 · 4678 阅读 · 3 评论 -
可视化例子(2)——Maptalks-bar3D(3D地图柱状图)
一，效果图二、底图底图使用的是 maptalks3D，数据使用的和 mapbox3D 那个例子使用的一样三、完整代码<!doctype html><html> <head> <meta charset="utf-8"> <title>3D地图柱状图-maptalks<...原创 2019-11-23 17:21:50 · 2555 阅读 · 6 评论 -
可视化例子(5)——人口迁移流动图(百度地图)
一、效果图二、注意说明需要自己申请一个百度地图的ak，在前面引用即可 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>三、完整代码<!DOCTYPE html><html lang="en"...原创 2019-11-23 17:22:05 · 5388 阅读 · 0 评论 -
可视化例子(4)——人口迁移轨迹(样式更好看lines3D)
一、效果图PS：CSDN插入的 GIF 怎么变形了二、完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>人口迁移轨迹(2.5维)--样式更好看lines3D</title> <scr...原创 2019-11-23 17:22:00 · 2021 阅读 · 0 评论