Baidumap Panel Plugin for Grafana

Grafana的百度地圖插件，基于WorldMap修改。主要的可視化功能有：更換AK.添加/刪除控件.更換主題.更改地圖級(jí)別，測(cè)距工具、實(shí)時(shí)交通流量圖等。

支持十多種形式的數(shù)據(jù)圖形標(biāo)注。

Run

Development

git clone https://github.com/huizhong/grafana-baidumap-panel.git

npm install

Production(Build)

grunt

添加數(shù)據(jù)示例代碼

數(shù)據(jù)源mysql，數(shù)據(jù)格式：Table

示例

簡(jiǎn)單的，顯示一個(gè)點(diǎn)

select

now() as time,

116.483749 as longitude,

39.991654 as latitude

可以配置一些參數(shù)

select

now() as time,

116.483749 as longitude,

39.991654 as latitude,

"

我是點(diǎn)擊顯示內(nèi)容，支持文本和HTML。數(shù)據(jù)字段內(nèi)優(yōu)化

" as content,

'{"content":"配置字段里也OK，但被外面的content覆蓋了","size":5}' as config

支持還有多類(lèi)型混合配置

select

now() as time,

'Marker' as type,

'116.487777|39.992133' as pos,

'{"content":"

hh

"}' as config

union

select

now() as time,

'Marker' as type,

'116.484538|39.991283' as pos,

'{"content":"設(shè)備編號(hào)xxx","title":"設(shè)備類(lèi)型xxx", "markerIcon":3,"markerLabel":"自定義圖標(biāo)0~9"}' as config

union

select

now() as time,

'RidingRoute' as type,

'116.46929557951906, 39.98472588655271;116.4840996543235, 39.984504750311906;116.49308270942328, 39.99533957763744' as pos,

'{"option":{"strokeColor":"red"}}' as config

union

select

now() as time,

'Heat' as type,

'116.487777|39.992133;116.492202|39.990220' as pos,

'{"heatCount":50}' as config

自定義的方塊，支持海量顯示

select

now() as time,

'square' as type,

'116.487777|39.992133;116.484538|39.991283' as pos,

'{"option":{"fillColor":30},"length":160}' as config

自定義圖標(biāo)和動(dòng)畫(huà)

select

now() as time,

'Marker' as type,

'116.490502,39.988408' as pos,

'{"content":"設(shè)備編號(hào)xxx","markerIcon":"public/plugins/grafana-baidumap-panel/images/bike.png","markerAnimation":true}' as config

支持海量的多邊形，兼容填充和邊框顏色配置

select

now() as time,

'polygon' as type,

'我是點(diǎn)擊內(nèi)容' as content,

'116.485023|39.995332;116.484538|39.991283;116.483927|39.985900;116.490502|39.988408;116.490646|39.991946;116.485400|39.995442' as pos,

'{"option":{"strokeColor":"red", "fillColor":"blue", "strokeWeight":8,"strokeOpacity":0.5,"fillOpacity":0.1}}' as config

支持文本顯示,content字段(優(yōu)先)或者config內(nèi)部字段都支持。

select

now() as time,

'label' as type,

'116.49194186142773|39.98928445031799' as pos,

'哈哈哈' as content,

'{"content":"哈哈哈哈哈哈哈哈哈哈哈哈", "option":{"font":"24px STheiti, SimHei"}}' as config

還可以增加中心點(diǎn)，方便自動(dòng)定位。針對(duì)需要切換城市的場(chǎng)景，可以在設(shè)置頁(yè)面配置自動(dòng)定位的范圍。

select now() as time,

'center' as type,

'116.45571320020859|39.992292022563696;116.46519930639396|39.9452342890919' as pos

點(diǎn)集pos格式可以是經(jīng)度+緯度，geohash或者"lng1|lat1;lng2|lat2;lng3|lat3"(|可以換成,)這種點(diǎn)集。

不同類(lèi)型有不同的配置如示例，可以在配置頁(yè)面自定義默認(rèn)值如下：

{

"Marker":{

"markerLabel":"默認(rèn)說(shuō)明",

"markerEnableDragging": true

},

"square":{

"length":100

},

"circle": {

"fillOpacity": 0.3

},

"Heat": {

"heatCount": 3,

"heatMax": 120,

"option":{

"radius": 150

}

},

"polygon": {

"option":{

"strokeWeight":8,

"strokeColor":"blue"

}

}

}

數(shù)據(jù)字段名稱(chēng)和各類(lèi)型名稱(chēng)可以在配置頁(yè)面修改。

總結(jié)

以上是生活随笔為你收集整理的mysql 百度地图插件_GitHub - huizhong/grafana-baidumap-panel: Grafana 百度地图插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。