iChart--地图显示人口统计

mtunique 发布于2019-08-20 15:12 / 1982人阅读

摘要：导语大数据呈现应用越来越广泛支持大数据呈现的，水平较高的有然而在地图呈现的功能上，大都只能绘制矢量地图，而不能呈现具有真实效果的地图鉴于此，本文重点在于如何制作一张，即可以看到真实效果，又能进行交互的矢量地图先睹为快若有所思技术选择想实现上

导语

大数据呈现应用越来越广泛,支持大数据呈现的SDK，水平较高的有echarts、highchart、D3；然而在地图呈现的功能上，大都只能绘制矢量地图，而不能呈现具有真实效果的地图；鉴于此，本文重点在于如何制作一张，即可以看到真实效果，又能进行交互的矢量地图；

先睹为快

若有所思 技术选择

想实现上述效果，最先想到的SDK是TWaver，思路也非常的简单；

使用Node呈现一张地图背景图片，像素越大越好，缩放效果好；

使用ShapeNode加载地图数据，并设置好位置、缩放比例等因素，恰好与地图重叠；
3.控制地图的Layer为底层，不可选中；ShapeNode为上层，可交互；

iChart & ZRender

本文使用ichart + zrender技术，绘制上述的效果；

为什么使用zrender呢？实际上zrender的功能比较简单，用于绘制基本的形状；其实细心的你会发现，echarts的底层就是使用了zrender；

有为什么使用ichart呢？ichart用于绘制常用的图表，底层基于Canvas绘制，也比较容易改造；而echarts使用的是SVG，修改起来就没那么容易啦！

实验天地 目标一：实现柱单节状图效果

实现柱状图效果，还真没那么容易！ichart不支持怎么办？定制！
找到ichart的柱状图类：Cylinder.js，好就从改造他开始了！

找到绘制网元的方法buildPath

Cylinder.prototype = {
            type: "cylinder",
            /**
             * 创建圆形路径
             * @param {CanvasRenderingContext2D} ctx
             * @param {module:zrender/shape/Cylinder~ICircleStyle} style
             */
             buildPath : function (ctx, style) {
                 //拿到你的画笔，我就随便画啦
            }
}

如上所言，获取了Canvas的画笔，自由的绘制一个矩形，上下各一个椭圆，不就完事了？

this.ellipse(ctx, style.x, style.y, style.a, style.b);
ctx.fillRect(style.x - style.a, style.y - a, style.a * 2 , d);
this.ellipse(ctx, style.x, style.y - a, style.a, style.b);

封装完毕，打包，混淆，加上测试代码，看效果；




    
    Cylinder

目标二：实现柱多节柱状图效果

问题来了，如果想实现多段的柱状图，如何是好呢？我想您自己都已经有思路了；多画几段不就完事了吗？

buildPath : function (ctx, style) {
                var rect = this.getRect(style);
                // ctx.strokeRect(rect.x,rect.y,rect.width,rect.height);
                // Better stroking in ShapeBundle
                // ctx.moveTo(style.x + style.a, style.y - style.height/2);
                // ctx.arc(style.x, style.y, style.r, 0, Math.PI * 2, true);
                // ctx.arc(style.x, style.y, style.a, 0, Math.PI * 2, true);
                // this.endDraw(style,ctx);
                var data = style.data, color = style.color, isPercent = style.isPercent || false, maxHeight = style.maxHeight || 100;
                if(isPercent) {
                    if(data instanceof Array) {
                        var data2 = [];
                        var all = 0;
                        for(var i = 0;i

目标三：绘制地图
使用zrender的PolygonShape绘制矢量地图；但是前提是，和底图图片完全吻合的数据哪里来呢？
聪明的我想到了使用TWaver自带编辑器，完美扣除地图数据；得到结果，形如如下数据格式：
< px="1209.5549397107488" y="1242.081312831646"/>
< px="1209.5549397107488" y="1233.5993604641965"/>
< px="1179.8681064246748" y="1212.3944795455723"/>
< px="1184.1090826083996" y="1199.6715509943976"/>
< px="1171.3861540572252" y="1161.502765340874"/>
< px="1162.9042016897754" y="1157.2617891571492"/>
稍微加工处理下，得到如下数据：
{"type": "Feature","properties":{"id":"65","size":"550","name":"新疆","cp":[471.08525328117855,-97.6746544555845],"childNum":18},"geometry":{"type":"Polygon","coordinates":[[[1143.6222085570992,-80.96566177792188],
            [1131.0904640488523,-76.78841360850622],
            [1131.0904640488523,-93.49740628616884],
            [1126.9132158794366,-135.26988798032542],
开始加入数据，创建矢量地图；
var smoothLine = new PolylineShape({
            style : {
              pointList : points,
              smooth : "spline",
              brushType : "stroke",
              color : "white",
              strokeColor : "white",
              lineWidth : 2,
              lineType : "dotted"
            },
            zlevel:1,
            draggable : true,
          });
          zr.addShape(smoothLine);

最后附上完整代码:

云服务器 GPU云服务器地图显示名字地图数据统计js iChart 统计数据显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82076.html

网络安全态势可视化

摘要：安全态势可视化系统的目的是生成网络安全综合态势图，以多视图多角度多尺度的方式与用户进行交互。可以看到，黑客攻击是无处不在，无时不有的，世界互联网的安全态势并不如我们印象中那么隐蔽和少见。导语网络态势可视化技术作为一项新技术，是网络安全态势感知与可视化技术的结合，将网络中蕴涵的态势状况通过可视化图形方式展示给用户，并借助于人在图形图像方面强大的处理能力，实现对网络异常行为的分析和检测...

testHs 2019-08-20 15:18 评论0 收藏0
常用的数据可视化工具

摘要：俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。是一个地图库，主要面向数据可视化用户。俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 评论0 收藏0
python大数据可视化制作全球人口地形图

　　本文主要是给大家介绍了python大数据可视化制作全球人口地形图的实例详细说明，感兴趣的小伙伴可以参考借鉴一下，希望可以有一定的帮助，祝愿大家尽可能发展，尽早涨薪　　序言　　信息来源：population_data.json,　　先看看数据信息长什么样　　[ 　　{ 　　"CountryName":"ArabWorld", 　　"Country...

89542767 2023-01-10 14:50 评论0 收藏0
iChart--组件定制

摘要：使用纯语言利用的标签绘制各式图形。致力于为您的应用提供简单直观可交互的体验级图表组件。目前支持饼图环形图折线图面积图柱形图条形图。是基于协议的开源项目。阴影图形效果图其他形状的图标类似，不再陈述。导语 ichartjs是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的...

vvpale 2019-08-20 15:08 评论0 收藏0
vue地图可视化 ArcGIS篇（3）

摘要：不建议底图选择中存在两种不同坐标体系，如下图坐标存在明显的偏差，火星坐标在采用坐标系的地图上位置偏上彩色中国天地图全球卫星地图例如我们使用的类进行查找，返回的数据都是国际坐标，因此必须进行偏差纠正。 ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本，由于版本3与4在API等存在较大区别，就不一一列举，详细区别看官方...

oogh 2019-08-23 12:38 评论0 收藏0