mapboxgl | feature-state样式交互示例

示例一

需求说明

1. 图层要素默认填充颜色为蓝；
   
2. 当我鼠标悬浮在某一个要素上时，这个要素的填充颜色是红，同时显示标签且颜色也为红；
   
3. 当我鼠标点击某一个要素时，这个要素的填充颜色是黄，同时当鼠标悬浮时标签颜色显示黄。
   
   有一个geojson面图层数据，加载到地图上。

代码实现

const addGeoJson = (geojson) => {
  let source = map.getSource('testlayer')
  if (source) {
    source.setData(geojson)
  } else {
    map.addSource('testlayer', {
      type: 'geojson',
      data: geojson,
      generateId: true
    })

    map.addLayer({
      id: 'state-fills',
      type: 'fill',
      source: 'testlayer',
      layout: {},
      paint: {
        'fill-color': [
          'case',
          ['boolean', ['feature-state', 'click'], false],
          'yellow',
          ['boolean', ['feature-state', 'hover'], false],
          'red',
          'blue'
        ],
        'fill-opacity': 0.2,
        'fill-outline-color': 'red'
      }
    })
    map.addLayer({
      id: 'charts_symbol',
      type: 'symbol',
      source: 'testlayer',
      paint: {
        'text-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0],
        'text-color': [
          'case',
          ['boolean', ['feature-state', 'click'], false],
          'yellow',
          ['boolean', ['feature-state', 'hover'], false],
          'red',
          'blue'
        ]
      },
      layout: {
        'text-field': '{scale}',
        'text-font': ['Open Sans Semibold'],
        'text-anchor': 'center',
        'text-offset': [0, 0.6],
        'text-size': 12,
        'text-padding': 75,
        'text-letter-spacing': 0.4,
        // "icon-image": "monument-15",
        // "icon-anchor": "center",
        'text-ignore-placement': true,
        'symbol-placement': 'point'
      }
    })

    map.on('click', 'state-fills', (e) => {
      if (e.features.length > 0) {
        let polygon = e.features[0]
        let clickPolygonId = polygon.id
        let state = map.getFeatureState({
          source: 'testlayer',
          id: clickPolygonId
        })
        if (state?.click === true) {
          map.setFeatureState({ source: 'testlayer', id: clickPolygonId }, { click: false })
        } else {
          map.setFeatureState({ source: 'testlayer', id: clickPolygonId }, { click: true })
        }
      }
    })
    let hoveredPolygonId = null
    map.on('mousemove', 'state-fills', (e) => {
      if (e.features.length > 0) {
        if (hoveredPolygonId !== null) {
          map.setFeatureState({ source: 'testlayer', id: hoveredPolygonId }, { hover: false })
        }
        hoveredPolygonId = e.features[0].id
        map.setFeatureState({ source: 'testlayer', id: hoveredPolygonId }, { hover: true })
      }
    })
    map.on('mouseleave', 'state-fills', () => {
      if (hoveredPolygonId !== null) {
        map.setFeatureState({ source: 'testlayer', id: hoveredPolygonId }, { hover: false })
      }
      hoveredPolygonId = null
    })
  }
}

示例二

mapboxgl的面图层，根据字段val设置填充颜色，如1为红，2为蓝，3为黄，并且根据feature-state状态hover则为绿色

需求说明

1. 面图层要素默认填充颜色为灰；
2. 获取要素字段val设置填充颜色，如1为绿，2为红；
3. 根据feature-state状态hover则为橙。
   

有一个geojson面图层数据，加载到地图上。

代码实现

const addGeoJson = (geojson) => {
  let source = map.getSource('geojson')
  if (source) {
    source.setData(geojson)
  } else {
    map.addSource('chartsbox', {
      type: 'geojson',
      data: geojson,
      generateId: true
    })

    map.addLayer({
      id: 'geojson_fill',
      type: 'fill',
      source: 'geojson',
      layout: {},
      paint: {
        'fill-color': [
          'case',
          ['boolean', ['feature-state', 'hover'], false],
          'orange',
          ['match', ['get', 'hoding_status'], '1', 'green', '2', 'red', 'gray']
        ],
        'fill-opacity': 0.5,
        'fill-outline-color': 'red'
      }
    })

    let hoveredPolygonId = null
    map.on('mousemove', 'geojson_fill', (e) => {
      if (e.features.length > 0) {
        if (hoveredPolygonId !== null) {
          map.setFeatureState({ source: 'geojson', id: hoveredPolygonId }, { hover: false })
        }
        hoveredPolygonId = e.features[0].id
        map.setFeatureState({ source: 'geojson', id: hoveredPolygonId }, { hover: true })
      }
    })
    map.on('mouseleave', 'charts_fill', () => {
      if (hoveredPolygonId !== null) {
        map.setFeatureState({ source: 'geojson', id: hoveredPolygonId }, { hover: false })
      }
      hoveredPolygonId = null
    })
  }
}