一 目標(biāo)
1.1 測(cè)試數(shù)據(jù)描述
示例數(shù)據(jù)
waterquality:水質(zhì)各谚。
geom:采樣點(diǎn)圖形。
示例數(shù)據(jù)來(lái)源：https://pan.baidu.com/s/1tiZqaERqrGj-YUskYlTVIQ
獲取密碼: eckw
1.2 可視化目標(biāo)
開(kāi)局一草圖
亮瞎你的眼
其實(shí)總共就以下幾個(gè)小步驟：
- 1 弄個(gè)背景底圖冰木，黑夜主題的鸯檬，關(guān)鍵因素。
- 2 可視化的點(diǎn)超升，應(yīng)該根據(jù)水質(zhì)參數(shù)嗓违，水質(zhì)好的點(diǎn)畫的大點(diǎn)九巡，水質(zhì)差的點(diǎn)畫的小點(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é)和分析葬凳。绰垂。。
