[WebGIS example] (6) MapboxGL draws a simple bubble map

foreword

Now there is such a need for data visualization to draw bubbles with data on the map. Then use a relatively simple and fast method to achieve it. The implementation steps: ① Load the bubble picture ② Load the data ③ Create a Symbol layer.

accomplish

The sample data used this time is a point element in GeoJSON format, and propertiescontains the data that I intend to display.
const testJson =

{
    
    
  "type": "FeatureCollection",
  "features": [
    {
    
    
      "type": "Feature",
      "properties": {
    
    
        "num": 414
      },
      "geometry": {
    
    
        "coordinates": [
          112.68784006428433,
          23.85455050268874
        ],
        "type": "Point"
      }
    }
  ]
}

Step 1: Load the image of the bubbles into the map

The bubble of this bubble chart uses the simplest circle:circle.png

 // 加载图标
 map.loadImage(require('@/assets/circle.png'), function (error, image) {
    
    
   if (error) throw error
   map.addImage('bubbleIcon', image)
 })

Step 2: Load the bubble layer

map.addSource('bubbleSource', {
    
    
  type: 'geojson',
  data: testJson // GeoJSON格式的数据
})

map.addLayer({
    
    
  id: 'bubbleLayer',
  type: 'symbol',
  source: 'bubbleSource',
  layout: {
    
    
    'icon-image': 'bubbleIcon', // 图标ID
    'icon-allow-overlap': true, // 允许图标重叠
    'text-allow-overlap': true, // 允许文字重叠
    'icon-size': 0.2, // 图标的大小
    'icon-anchor': 'center', // 图标的位置
    'text-field': ['get', 'num'], // 获取num属性的值
    'text-font': ['Open Sans Bold'], // 字体
    'text-size': 13,
    'text-anchor': 'center'
  },
  paint: {
    
    
    'text-color': '#fff'
  }
})

In the above code, 'text-field': ['get', 'num'],it refers to the value propertiesobtained from the vector data num, another way of writing is: 'text-field': '{num}',.

full code

import {
    
     map } from '@/utils/createMapbox' // 地图对象
import testJson from '@/assets/data/point.json' // 引入测试数据

export default class DrawBubble {
    
    
  constructor () {
    
    
    // 加载图标
    map.loadImage(require('@/assets/circle.png'), function (error, image) {
    
    
      if (error) throw error
      map.addImage('bubbleIcon', image)
    })
  }

  // 绘制气泡
  drawBubble () {
    
    
    map.addSource('bubbleSource', {
    
    
      type: 'geojson',
      data: testJson // GeoJSON格式的数据
    })
    map.addLayer({
    
    
      id: 'bubbleLayer',
      type: 'symbol',
      source: 'bubbleSource',
      layout: {
    
    
        'icon-image': 'bubbleIcon', // 图标ID
        'icon-allow-overlap': true, // 允许图标重叠
        'text-allow-overlap': true, // 允许文字重叠
        'icon-size': 0.2, // 图标的大小
        'icon-anchor': 'center', // 图标的位置
        'text-field': ['get', 'num'],
        // 'text-field': '{num}',
        'text-font': ['Open Sans Bold'],
        'text-size': 13,
        'text-anchor': 'center'
      },
      paint: {
    
    
        'text-color': '#fff'
      }
    })
  }

  // 清除该功能绘制的符号等等等等
  clear () {
    
    
    // 删除图层与数据源
    if (map.hasImage('bubbleIcon')) map.removeImage('bubbleIcon')
    try {
    
    
      map.removeLayer('bubbleLayer')
      map.removeSource('bubbleSource')
    } catch (error) {
    
    
      console.log(error)
    }
  }
}

expand

Draw bubbles with the same graphics but different colors: [WebGIS example] (7) MapboxGL draws Symbol icons of different colors