一 目標(biāo)

1.1 測(cè)試數(shù)據(jù)描述

示例數(shù)據(jù)

1.2 可視化目標(biāo)

開(kāi)局一草圖

亮瞎你的眼

其實(shí)總共就以下幾個(gè)小步驟：

• 1 弄個(gè)背景底圖，黑夜主題的，關(guān)鍵因素。
• 2 可視化的點(diǎn)，應(yīng)該根據(jù)水質(zhì)參數(shù)，水質(zhì)好的點(diǎn)畫(huà)的大點(diǎn)，水質(zhì)差的點(diǎn)畫(huà)的小點(diǎn)。
• 3 點(diǎn)雖然分大小，把點(diǎn)換成圖標(biāo)，點(diǎn)睛之筆。。。

??本文參考ESRI的一篇配圖教程來(lái)的，雖然esri主要宣傳它的軟件如何牛逼，如何一步步的操作軟件得到結(jié)果（不講原理是其一貫的作風(fēng)），但是分析了下步驟，很容易得到怎么實(shí)現(xiàn)的。。。

二 螢火圖實(shí)現(xiàn)

2.1 背景底圖

??人靠衣裝馬靠鞍，一個(gè)好的地圖可視化效果，底圖是非常重要的，而不是說(shuō)很隨意的，選擇esri的暗夜藍(lán)背景圖（因?yàn)楦叩掳俣鹊臇|西，都是自己api加載，其他api解析不了他的矢量和樣式，故不做選擇）。

    var layers = [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
        }),
        
    ];
    var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([114.36,38.08]),
            zoom: 8
        })
    });

底圖+默認(rèn)點(diǎn)樣式

2.2 水質(zhì)參數(shù)區(qū)分點(diǎn)大小

調(diào)整樣式函數(shù)，根據(jù)水質(zhì)參數(shù)，區(qū)分點(diǎn)的大小。

 var layers = [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
        }),
        new ol.layer.Vector({
            source:new ol.source.Vector({
                format:new ol.format.GeoJSON(),
                url:'./data/data.json'
            }),
            //新增的樣式函數(shù)
            style:function(feature,res){
                var attributes=feature.getProperties();
                var level=attributes.waterquality;
                var r;//點(diǎn)（本質(zhì)就是圓）的半徑
                if(level>=60&&level<66)
                    r=4;
                else if(level>=66&&level<73)
                    r=5;
                else if(level>=73&&level<82)
                    r=6;
                else if(level>=82&&level<91)
                    r=7;
                else if(level>=91&&level<100)
                    r=8;
            
                var style=new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: r,
                        fill: new ol.style.Fill({
                            color:  [0, 153, 255, 1]
                        }),
                        stroke: new ol.style.Stroke({
                            color: [255, 255, 255, 1],
                            width: 3 / 2
                        })
                    })
                }) ;
                return [style];
            }
        })
    ];

雛形，還是很難看

到此為止，其實(shí)這個(gè)效果圖，就是根據(jù)圖形位置+水質(zhì)參數(shù)（根據(jù)參數(shù)分級(jí)渲染不同樣式而已）配置的，地圖中很常見(jiàn)的分等級(jí)渲染原理。

2.3 點(diǎn)睛之筆

圖標(biāo)

從esri的教程里，附帶了圖標(biāo)和數(shù)據(jù)，我們選擇這種藍(lán)色圖標(biāo)，修改下之前的地圖樣式：

 var layers = [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
        }),
        new ol.layer.Vector({
            source:new ol.source.Vector({
                format:new ol.format.GeoJSON(),
                url:'./data/data.json'
            }),
            //修改的樣式，改成了圖標(biāo)了
            style:function(feature,res){
                var attributes=feature.getProperties();
                var level=attributes.waterquality;
                var scale;
                if(level>=60&&level<66)
                    scale=10.0/50;
                else if(level>=66&&level<73)
                    scale=14.5/50;
                else if(level>=73&&level<82)
                    scale=19.0/50;
                else if(level>=82&&level<91)
                    scale=23.5/50;
                else if(level>=91&&level<100)
                    scale=28/50;
                var style=new ol.style.Style({
                    image: new ol.style.Icon({
                        crossOrigin: 'anonymous',
                        scale:scale,
                        src: 'image/blue.png'
                    })
                });
                return [style];
            }
        })
    ];

最終圖片

三 總結(jié)

• 1 好的效果，底圖非常非常重要?。?！
• 2 很多好的效果，其實(shí)原理很簡(jiǎn)單，主要這個(gè)螢火圖標(biāo)，美工很重要?。?！
• 3 地圖可視化，不是一個(gè)搞技術(shù)的人能做好的，很多時(shí)候，要專業(yè)的人員，專業(yè)的工具，gis可視化只是工具之一，還有好多其他制圖軟件各種美化。。。
• 4 多看看技術(shù)文章，分析原理，而不是被esir這種商業(yè)公司洗腦。。。它的效果也許很好，其實(shí)大家都能做，善于總結(jié)和分析。。。