地图组件

简介 #

SmartChart 支持多种地图可视化组件，包括区域热力图（省市区颜色映射）、点位散点图（地理坐标标记）、飞线地图（城市流向关系）和百度地图底图叠加，以及 Three.js 驱动的 3D 地球效果。地图数据通过 ECharts map 系列渲染。

地图类型 说明
区域热力图 type:'map'，加载 GeoJSON 注册地图
散点地图 type:'effectScatter'，配合 geoCoordMap 坐标
飞线地图 type:'lines'，展示城市间流向
百度底图 ds_loadBmap()，需配置 AK
3D 效果 ds_load3d()，Three.js 驱动

应用场景 #

SmartChart 支持多种地图组件，适用于：

  • 区域分布热力地图（省市区颜色映射）
  • 点位散点地图（标记地理坐标位置）
  • 飞线地图（展示起止点之间的流向关系）
  • 百度地图底图叠加（卫星图、街道图等真实地图底图）
  • 3D 地球/地形图

具体使用方法请参考视频教程： 地图组件与 3D

ECharts 地图基础用法 #

加载地图 JSON 数据 #

使用 ds_loadjson 加载地图的 GeoJSON 数据并注册到 ECharts：

// 加载全国地图
ds_loadjson('/static/echart/map/china.json', 'china')

// 加载省级地图（以广东为例）
ds_loadjson('/static/echart/map/province/guangdong.json', '广东')

option__name__ = {
    series: [{
        type: 'map',
        map: 'china',    // 与注册名保持一致
        data: ds_createMap_all(__dataset__)
    }]
}

水波纹散点地图 #

在地图上标记各地坐标点，展示数值大小：

let dataset = __dataset__  // [['city','value'], ['长沙', 100], ['广州', 200]]
let geoCoordMap = {
    '长沙': [112.93, 28.23],
    '广州': [113.27, 23.13]
}

let scatterList = get_geoscatterList(dataset, geoCoordMap)
// 生成格式：[{name:'长沙', value:[112.93, 28.23, 100]}, ...]

option__name__ = {
    geo: { map: 'china', roam: true },
    series: [{
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: scatterList,
        symbolSize: val => val[2] / 10
    }]
}

飞线地图 #

展示城市之间的流向关系：

let dataset = __dataset__  // [['source','target','value'], ['北京','上海',100], ...]
let geoCoordMap = {
    '北京': [116.46, 39.92],
    '上海': [121.48, 31.22]
}

let flyList = get_geoflyList(dataset, geoCoordMap)
// 生成格式：[[{coord:[116.46,39.92], value:100}, {coord:[121.48,31.22]}], ...]

option__name__ = {
    geo: { map: 'china', roam: true },
    series: [{
        type: 'lines',
        coordinateSystem: 'geo',
        data: flyList,
        effect: { show: true, symbol: 'arrow', symbolSize: 6 },
        lineStyle: { color: '#1890ff', width: 1, curveness: 0.2 }
    }]
}

百度地图底图配置 #

使用百度地图真实底图需要申请 AK（API Key）。

配置 AK #

在 SmartChart 首页 → 服务配置 中添加以下配置项：

{
  "_CONFIG": {
    "bmap_ak": "你的百度地图AK"
  }
}

申请百度地图 AK #

  1. 前往 百度地图开放平台 注册账号
  2. 创建应用，选择"浏览器端"类型
  3. 复制生成的 AK 填入上方配置

百度地图 + ECharts 叠加示例 # 

// 加载百度地图（会自动读取服务配置中的 ak）
ds_loadBmap()

let dataset = __dataset__
let geoCoordMap = { /* 城市坐标字典 */ }
let scatterList = get_geoscatterList(dataset, geoCoordMap)

option__name__ = {
    bmap: {
        center: [116.46, 39.92],
        zoom: 5,
        roam: true,
        mapStyle: {
            styleJson: [{ featureType: 'all', elementType: 'geometry', stylers: { color: '#0e2050' } }]
        }
    },
    series: [{
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: scatterList
    }]
}

3D 图形 #

加载 SmartChart 内置的 Three.js 相关库，实现 3D 地球、3D 柱图等效果：

// 加载 3D 依赖库
ds_load3d()

// 之后可使用 threeDict 中的方法进行 3D 开发
// 具体参数参考图形商店中的 3D 图形模板
Edit Edit this page