iChart--地圖顯示人口統(tǒng)計(jì)

mtunique 發(fā)布于2019-08-20 15:12 / 2033人閱讀

摘要：導(dǎo)語(yǔ)大數(shù)據(jù)呈現(xiàn)應(yīng)用越來(lái)越廣泛支持大數(shù)據(jù)呈現(xiàn)的，水平較高的有然而在地圖呈現(xiàn)的功能上，大都只能繪制矢量地圖，而不能呈現(xiàn)具有真實(shí)效果的地圖鑒于此，本文重點(diǎn)在于如何制作一張，即可以看到真實(shí)效果，又能進(jìn)行交互的矢量地圖先睹為快若有所思技術(shù)選擇想實(shí)現(xiàn)上

導(dǎo)語(yǔ)

大數(shù)據(jù)呈現(xiàn)應(yīng)用越來(lái)越廣泛,支持大數(shù)據(jù)呈現(xiàn)的SDK，水平較高的有echarts、highchart、D3；然而在地圖呈現(xiàn)的功能上，大都只能繪制矢量地圖，而不能呈現(xiàn)具有真實(shí)效果的地圖；鑒于此，本文重點(diǎn)在于如何制作一張，即可以看到真實(shí)效果，又能進(jìn)行交互的矢量地圖；

先睹為快

若有所思 技術(shù)選擇

想實(shí)現(xiàn)上述效果，最先想到的SDK是TWaver，思路也非常的簡(jiǎn)單；

使用Node呈現(xiàn)一張地圖背景圖片，像素越大越好，縮放效果好；

使用ShapeNode加載地圖數(shù)據(jù)，并設(shè)置好位置、縮放比例等因素，恰好與地圖重疊；
3.控制地圖的Layer為底層，不可選中；ShapeNode為上層，可交互；

iChart & ZRender

本文使用ichart + zrender技術(shù)，繪制上述的效果；

為什么使用zrender呢？實(shí)際上zrender的功能比較簡(jiǎn)單，用于繪制基本的形狀；其實(shí)細(xì)心的你會(huì)發(fā)現(xiàn)，echarts的底層就是使用了zrender；

有為什么使用ichart呢？ichart用于繪制常用的圖表，底層基于Canvas繪制，也比較容易改造；而echarts使用的是SVG，修改起來(lái)就沒(méi)那么容易啦！

實(shí)驗(yàn)天地 目標(biāo)一：實(shí)現(xiàn)柱單節(jié)狀圖效果

實(shí)現(xiàn)柱狀圖效果，還真沒(méi)那么容易！ichart不支持怎么辦？ 定制！
找到ichart的柱狀圖類(lèi)：Cylinder.js，好就從改造他開(kāi)始了！

找到繪制網(wǎng)元的方法buildPath

Cylinder.prototype = {
            type: "cylinder",
            /**
             * 創(chuàng)建圓形路徑
             * @param {CanvasRenderingContext2D} ctx
             * @param {module:zrender/shape/Cylinder~ICircleStyle} style
             */
             buildPath : function (ctx, style) {
                 //拿到你的畫(huà)筆，我就隨便畫(huà)啦
            }
}

如上所言，獲取了Canvas的畫(huà)筆，自由的繪制一個(gè)矩形，上下各一個(gè)橢圓，不就完事了？

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);

封裝完畢，打包，混淆，加上測(cè)試代碼，看效果；




    
    Cylinder

目標(biāo)二：實(shí)現(xiàn)柱多節(jié)柱狀圖效果

問(wèn)題來(lái)了，如果想實(shí)現(xiàn)多段的柱狀圖，如何是好呢？我想您自己都已經(jīng)有思路了；多畫(huà)幾段不就完事了嗎？

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

目標(biāo)三：繪制地圖
使用zrender的PolygonShape繪制矢量地圖；但是前提是，和底圖圖片完全吻合的數(shù)據(jù)哪里來(lái)呢？
聰明的我想到了使用TWaver自帶編輯器，完美扣除地圖數(shù)據(jù)；得到結(jié)果，形如如下數(shù)據(jù)格式：
< 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"/>
稍微加工處理下，得到如下數(shù)據(jù)：
{"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],
開(kāi)始加入數(shù)據(jù)，創(chuàng)建矢量地圖；
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);

最后附上完整代碼: