用echarts绘制的地图，用天地图来作为底图

### 使用 ECharts 和 TianDiTu 结合 要在 ECharts 中使用 TianDiTu 作为底图，可以通过配置 `geo` 组件的地图背景图片或通过 `map` 方法加载在线地图服务。具体来说，在 ECharts 的 geo 或 bmap 组件中设置天地图的服务 URL 可以实现这一目标。 对于 TianDiTu 而言，通常会采用 WMTS（Web Map Tile Service）协议来获取瓦片图像[^2]。下面是一个基于 ECharts 配置天地图的例子： ```javascript option = { backgroundColor: '#404a59', title: { text: 'ECharts with TianDiTu as BaseMap', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, visualMap: { min: 0, max: 1000, left: 'left', top: 'bottom', text: ['High', 'Low'], calculable: true }, series: [{ name: 'Some Data', type: 'scatter', coordinateSystem: 'bmap', data: convertData(data), symbolSize: function (val) { return val[2] / 10; } }], bmap: { center: [104.114129, 37.550339], zoom: 5, roam: true, mapStyle: {}, layers: [ { urlTemplate: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=your_api_key', tileSize: 256, subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }, { urlTemplate: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=your_api_key', tileSize: 256, subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }] } }; ``` 此代码片段展示了如何利用 `layers` 属性指定两个不同的图层：一个是矢量地图 (`vec`) ，另一个是标注覆盖物(`cva`) 。注意替换 `your_api_key` 为实际申请到的 API 密钥。