mapbox-热力图实现

前端技术选型 mapbox gl.js+react+dva

1.构建mapview

并在mapbox onload 事件里面进行热力图初始化

import React from 'react';
import styles from './MapView.css';
import mapboxgl from 'mapbox-gl';

import HeatLayer from '../components/MapLayer/HeatLayer';
import earthquakes from '../assets/data/earthquakes.geojson';



export default class MapView extends React.Component{
    constructor(props) {
        super(props);
      }

    componentDidMount() {
        mapboxgl.accessToken = '申请自己的token';
        let map = new mapboxgl.Map({
          container: 'mapContainer',
          style: 'mapbox://styles/mapbox/streets-v9',
          maxZoom: 18,
          minZoom: 0,
          zoom:3,
          center:[116,39]
        });
        map.on('load', () => {
          //构造方法,传值map对象、数据对象、图层名称
          const heatlayer = new HeatLayer(map, earthquakes, 'earthquakes');
          heatlayer.addLayer();
        });

      }

    render(){
        return (<div id="mapContainer" className={styles.map}>
        </div>);
    }

};

2.封装HeatLayer类

由于data默认就是geojson格式的,所以这里没有进行数据的解析

class HeatLayer {

  constructor(map, data, layername) {
    this.map = map;
    this.data = data;
    this.layername = layername;
  }

  addData = () => {
    return {
      "id": this.layername,
      "type": "heatmap",
      "source": {
        "type": "geojson",
        "data": this.data,
      },
      "maxzoom": 9,
      "paint": {
        // Increase the heatmap weight based on frequency and property magnitude
        "heatmap-weight": [
          "interpolate", ["linear"],
          ["get", "mag"],
          0, 0,
          6, 1,
        ],
        // Increase the heatmap color weight weight by zoom level
        // heatmap-intensity is a multiplier on top of heatmap-weight
        "heatmap-intensity": [
          "interpolate", ["linear"],
          ["zoom"],
          0, 1,
          9, 3,
        ],
        // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
        // Begin color ramp at 0-stop with a 0-transparancy color
        // to create a blur-like effect.
        "heatmap-color": [
          "interpolate", ["linear"],
          ["heatmap-density"],
          0, "rgba(33,102,172,0)",
          0.2, "rgb(103,169,207)",
          0.4, "rgb(209,229,240)",
          0.6, "rgb(253,219,199)",
          0.8, "rgb(239,138,98)",
          1, "rgb(178,24,43)",
        ],
        // Adjust the heatmap radius by zoom level
        "heatmap-radius": [
          "interpolate", ["linear"],
          ["zoom"],
          0, 2,
          9, 20,
        ],
        // Transition from heatmap to circle layer by zoom level
        "heatmap-opacity": [
          "interpolate", ["linear"],
          ["zoom"],
          7, 1,
          9, 0,
        ],
      },
    };

  };

  addLayer = () => {
    const option = this.addData();
    this.map.addLayer(option);
  }
}

export default HeatLayer;

3.实现效果
这里写图片描述

### 使用 Mapbox 实现 3D 热力 为了创建一个基于 Mapbox 的 3D 热力,可以利用 `mapbox-gl` 库中的功能。下面是一个详细的指南和代码片段用于展示如何构建这样的表。 #### 初始化地并加载样式 首先,在 HTML 文件内引入必要的库文件,并设置容器来容纳地: ```html <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.0/mapbox-gl.css' rel='stylesheet'/> <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.0/mapbox-gl.js'></script> <div id="map" style="width: 100%; height: 500px;"></div> ``` 接着初始化地对象,并指定所需的访问令牌、中心坐标以及其他属性: ```javascript mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v10', // 地风格 center: [-74.5, 40], // 初始视位置 zoom: 9 // 缩放级别 }); ``` #### 添加热力层 当地完成加载之后,通过调用 `addLayer()` 方法向其添加一个新的热力层。此操作应在 `load` 事件触发时执行,以确保底层地理数据已经准备好被覆盖。 ```javascript map.on('load', function () { map.addSource('heatmap-source', { type: 'geojson', data: 'https://www.example.com/data.geojson' }); map.addLayer({ id: "heat-layer", type: "heatmap", // 层类型设为 heatmap source: "heatmap-source", // 关联之前定义的数据源 paint: { // 设置视觉效果选项 'heatmap-weight': ['get', 'weight'], // 数据权重字段名称 'heatmap-intensity': 1, 'heatmap-color': [ 'interpolate', ['linear'], ['heatmap-density'], 0, '#ffeda0', 0.2, '#feb24c', 0.4, '#f03b20' ], 'heatmap-radius': 25, 'heatmap-opacity': 0.8 } }); }); ``` #### 转换至三维视角 为了让热力呈现出立体感,可以通过调整相机角度使地倾斜显示。这一步同样是在地完全载入后进行处理。 ```javascript map.once('styledata', function() { map.setPitch(60); // 设置俯仰角为60度 map.rotate([-Math.PI / 6]); // 向左旋转一定角度 }); ``` 以上就是使用 Mapbox 创建简单 3D 效果的热力的方法[^1]。需要注意的是实际应用中可能还需要考虑更多细节优化用户体验,比如响应式设计适应不同设备屏幕大小变化等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值