A brief discussion on using angular9+echarts to draw 3D maps

This article will share with you the usage of echarts in angular and introduce the method of drawing 3D maps. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Create a new angular9 project

1. Install @angular-cli scaffolding

2. <strong>ng -v</strong>View version

3、ng new my-project(project name)

Download echarts

npm i echarts

Related recommendations: "angular tutorial"

Create container

src/app/app. componnet.html

<div id="main" style="width:800px;height:500px"></div>

Create map instance

src/app/app.componnet.ts

import { Component } from '@angular/core';
import * as echarts from "echarts";
import  'echarts/map/js/china.js'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  option = {
    title: {
        top: 10,
        text: '3D中国地图',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    backgroundColor: 'rgba(0, 10, 52, 1)',
    geo: {
        map: 'china',
        aspectScale: 0.75,
        layoutCenter: ["50%", "51.5%"], //地图位置
        layoutSize: '118%',
        roam: true,
        itemStyle: {
            normal: {
                borderColor: 'rgba(147, 235, 248, 1)',
                borderWidth: 0.5,
                color: {
                    type: 'linear-gradient',
                    x: 0,
                    y: 1500,
                    x2: 2500,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: '#009DA1' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#005B9E' // 50% 处的颜色
                    }],
                    global: true // 缺省为 false
                },
                opacity: 0.5,
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        regions: [{
            name: '南海诸岛',
            itemStyle: {
                areaColor: 'rgba(0, 10, 52, 1)',
                borderColor: 'rgba(0, 10, 52, 1)'
            },
            emphasis: {
                areaColor: 'rgba(0, 10, 52, 1)',
                borderColor: 'rgba(0, 10, 52, 1)'
            }
        }],
        z: 2
    },
    series: [{
        type: 'map',
        map: 'china',
        tooltip: {
            show: false
        },
        label: {
            show: true,
            color: '#FFFFFF',
            fontSize: 16
        },
        aspectScale: 0.75,
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: '118%',
        roam: true,
        itemStyle: {
            normal: {
                borderColor: 'rgba(147, 235, 248, 0.6)',
                borderWidth: 0.8,
                areaColor: {
                    type: 'linear-gradient',
                    x: 0,
                    y: 1200,
                    x2: 1000,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: '#009DA1' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#005B9E' // 50% 处的颜色
                    }],
                    global: true // 缺省为 false
                },
            },
            emphasis: {
                areaColor: 'rgba(147, 235, 248, 0)'
            }
        },
        zlevel: 1
    }]
};

  ngOnInit(){
    let dom = document.getElementById('main')
    let myChart = echarts.init(dom)
    myChart.on('georoam', function(params) {
      var option = myChart.getOption(); //获得option对象
      if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
          option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
          option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
      } else { //捕捉到拖曳时
          option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
      }
      myChart.setOption(option); //设置option
  });
    myChart.setOption(this.option)
  }
}

Effect picture

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on using angular9+echarts to draw 3D maps. For more information, please follow other related articles on the PHP Chinese website!