ionic5 使用echarts自定义百度地图样式

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：272

- 安装`echarts`包

```
npm install echarts --save
```

- 加载echarts和百度地图js库。在angular.json的构建脚本中增加相应scripts

```
  "projects": {
    "app": {
      ......
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ......
            "scripts": [
              "node_modules/echarts/dist/echarts.min.js",
              "node_modules/echarts/dist/extension/bmap.js"
            ]
          },
```

- 入口文件index.html中引入百度地图类库

```
&lt;script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=百度密钥"&gt;&lt;/script&gt;
```

- 模板中增加地图容器

```
&lt;div #mapWrap style="height: 500px;"  [ngStyle]="{'width': width + 'px'}"&gt;
```

- ts脚本中配置并加载地图

```
declare var echarts: any;
declare var BMap: any;

const data = [
  {name: '华东大学', value: 9},
  {name: '小昆山园', value: 12},
  {name: '新育绿地', value: 12},
  {name: '陆国时代大厦', value: 12},
  {name: '叶榭影剧院', value: 14},
  {name: '百联奥特莱斯', value: 15}
];

const geoCoordMap = {
 '华东大学': [121.221813, 31.06101],
 '小昆山园': [121.139887, 31.04418],
 '新育绿地': [121.336508, 31.075115],
 '陆国时代大厦': [121.449192, 31.08328],
 '叶榭影剧院': [121.285341, 30.933971],
 '百联奥特莱斯': [121.243659, 31.164397]
};

......

width: number = window.innerWidth;
@ViewChild('mapWrap', { static: true }) domLabelChild: ElementRef;

......

ionViewDidEnter() {
    this.options = {
      title: {
          text: '全国主要城市空气质量 - 百度地图',
          subtext: 'data from PM25.in',
          left: 'center', // title 组件离容器左侧的距离
      },
      tooltip : {
          trigger: 'item', // 提示框组件触发类型：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      },
      bmap: { // 百度地图配置
          center: [121.228999,31.056556],
          zoom: 14,
          roam: true, // 否可以拖放和缩放地图
          // 地图样式。具体配置地址：http://wiki.lbsyun.baidu.com/custom/
          mapStyle: {
              styleJson: [{
                  'featureType': 'water', // 水系
                  'elementType': 'all', // 应用全部样式
                  'stylers': {
                      'color': '#d1d1d1', // 颜色
                  }
              }]
          }
      },
      // 系列列表。每个系列通过 type 决定自己的图表类型
      series : [
          {
              name: 'pm2.5',
              type: 'scatter', // 散点（气泡）图。
              coordinateSystem: 'bmap', // 该系列使用的坐标系
              data: this.convertData(data),
              symbol: 'pin', // 标记的图形：气泡
              symbolSize: function (val) {
                  return val[2]; // 标记的大小
              },
              // 图形上的文本标签
              label: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
              },
              // 图形样式。
              itemStyle: {
                  color: 'purple',  // 图形的颜色
              },
              // 高亮的图形和标签样式
              emphasis: {
                  label: {
                      show: true, // 是否显示标签
                  }
              }
          }
      ]
    };
    var ecmap = echarts.init(this.domLabelChild.nativeElement); // 实例化echarts
    ecmap.setOption(this.options); // 设置echarts
	var bmap = ecmap.getModel().getComponent('bmap').getBMap(); // 获取百度地图实例
    bmap.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
    bmap.addControl(new BMap.NavigationControl()); // 添加缩放控件
    bmap.addControl(new BMap.ScaleControl()); // 添加比例尺控件
  }

// 数据转换成百度坐标
  convertData(data) {
    var res = [];
    for (var i = 0; i &lt; 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;
   };
```

&gt; 宽度自适应，必须要在ionic生命周期ionViewDidEnter中初始化echarts实例，而不能在ngOnInit中初始化，否则可能在页面没有加载完毕时就已经实例化echarts了，此时宽度为空，坐标点显示不出来

标签：百度地图 echarts ionic5

上一篇：如何使用mvn命令导入依赖下一篇：ionic5 使用 svg 绘制自适应地图

ionic5 使用echarts自定义百度地图样式

随便看看

留言