iChart--地圖顯示人口統計

mtunique 發布于2019-08-20 15:12 / 2020人閱讀

摘要：導語大數據呈現應用越來越廣泛支持大數據呈現的，水平較高的有然而在地圖呈現的功能上，大都只能繪制矢量地圖，而不能呈現具有真實效果的地圖鑒于此，本文重點在于如何制作一張，即可以看到真實效果，又能進行交互的矢量地圖先睹為快若有所思技術選擇想實現上

導語

大數據呈現應用越來越廣泛,支持大數據呈現的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 統計數據顯示

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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