Dazdata BI加载百度在线地图并标注

Dazdata BI除了内置了全国瓦片地图，支持自定义园区瓦片地图等功能外，还支持加载百度在线地图，并方便的进行标注。

下面以全国空气污染前十城市标注为例，看如何实现：

首先要去百度地图开放平台，注册获取ak，形式如1CEC****cKs3的一个32位字符串。

在Dazdata BI创建ECharts自定义代码视图，输入如下代码：

var myChart = echarts.init(chartDom);

var option;

function main() {

const data = [

{ name: '湘潭', value: 154 },

{ name: '金华', value: 157 },

{ name: '岳阳', value: 169 },

{ name: '长沙', value: 175 },

{ name: '衢州', value: 177 },

{ name: '廊坊', value: 193 },

{ name: '菏泽', value: 194 },

{ name: '合肥', value: 229 },

{ name: '武汉', value: 273 },

{ name: '大庆', value: 279 }

];

const geoCoordMap = {

湘潭: [112.91, 27.87],

金华: [119.64, 29.12],

岳阳: [113.09, 29.37],

长沙: [113, 28.21],

衢州: [118.88, 28.97],

廊坊: [116.7, 39.53],

菏泽: [115.480656, 35.23375],

合肥: [117.27, 31.86],

武汉: [114.31, 30.52],

大庆: [125.03, 46.58]

};

const convertData = function (data) {

var res = [];

for (var i = 0; i < data.length; i++) {

var geoCoord = geoCoordMap[data[i].name];

if (geoCoord) {

res.push({

name: data[i].name,

value: geoCoord.concat(data[i].value)

});

}

return res;

};

option = {

title: {

text: '全国空气污染前十城市 - 百度地图',

subtext: 'data from PM25.in',

sublink: 'http://www.pm25.in',

left: 'center'

tooltip: {

trigger: 'item'

bmap: {

center: [104.114129, 37.550339],

zoom: 5,

roam: true,

series: [

{

name: 'pm2.5',

type: 'scatter',

coordinateSystem: 'bmap',

data: convertData(data),

symbolSize: function (val) {

return val[2] / 10;

encode: {

value: 2

label: {

formatter: '{b}',

position: 'right',

show: false

emphasis: {

label: {

show: true

}

]

};

myChart.setOption(option);

}

var map='https://api.map.baidu.com/getscript?v=2.0&ak=32位ak字符串&services=&t=20220113143013'

$.getScript(map, function() {

main();

});

由于Dazdata BI自定义代码沙盒环境内置了ECharts引入，jQuery引入等，代码非常简洁。

通过内置的jQuery选择符$.getScript加载百度地图，完成时通过回调函数执行EChart标注前十城市地理位置和空气污染值，没有任何富余代码。

Dazdata BI加载百度在线地图并标注相关推荐

[QT] QT加载百度在线地图（一）
一般步骤在百度地图开发者网站中获取密钥在QT中创建示例工程创建网页index.html 运行参考一.在百度地图开发者网站中获取密钥选择Javascript API 完成以下三步在控制台- ...
leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
Qt之加载百度离线地图（WebKit和WebEngine）
最近翻看进年前写了一篇关于百度离线地图的博客:Qt加载百度离线地图,发现存在很多问题,比如不能加载折线等图形覆盖物:只支持QtWebKit,不支持QtWebEngine. 之前做项目需要在百度离线地图 ...
星图地球数据云，便捷加载各类在线地图服务的又一神器
星图地球目前发布了一系列的产品,对我来说比较感兴趣的是星图地球数据云(GEOVIS Earth Datacloud)这款地球大数据产品.今天,我就带大家以来深入在线体验一下这款产品. 01 在线体验 ...
ArcGIS Javascript API 加载高德在线地图扩展
利用ArcGIS JavaScript API加载高德在线地图的扩展 /*** Created by WanderGIS on 2015/7/15.*/ define(["dojo/_bas ...
Vue+OpenLayers入门（加载高德在线地图）
开发环境的搭建在上一篇教程中已有描述,如果不知道怎么搭建,请移步Vue+OpenLayers入门(加载OSM在线地图) 此代码为加载高德在线地图以及清除地图上的默认控件: <template&g ...
Qt加载百度离线地图
1.下载百度地图离线API 1.3 下载链接:http://download.csdn.net/detail/caoshangpa/9476608,网上虽然出现了2.0版本离线API,但是经试用,存在 ...
QT实现加载百度离线地图
在Qt中加载百度地图需要用到网络浏览器,在此采用webEngine模块,然后用webchannel进行qt与HTML/JavaScript的交互. 需求描述:软件加载百度地图,用鼠标在地图上选点,并进 ...
qml加载高德在线地图
Qml加载在线高德地图 1:上高德地图开发平台注册开发者账号,并申请key: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 2:准 ...

Dazdata BI加载百度在线地图并标注

Dazdata BI加载百度在线地图并标注相关推荐

最新文章

热门文章