初探mapbox地图可视化实例，带你看看家附近有多少咖啡馆

椰卤工程师

已于 2022-05-23 10:47:51 修改

阅读量1k

点赞数

分类专栏： React 数据可视化 mapbox 文章标签： react.js typescript mapbox

于 2022-05-23 10:47:25 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42224055/article/details/124685312

版权

在这里插入图片描述
本实例使用的是Mapbox GL JS，开发文档地址：请点击

Mapbox GL JS 是一个用于 Web 上矢量地图的 JavaScript 库。它的性能、实时样式和交互功能为在网络上构建快速、沉浸式地图的任何人设定了标准。

官网给大家准备了很多实例，可供参考学习。
在这里插入图片描述

咖啡馆地图可视化

实现效果

核心代码（React + Typescript）

import React, {
    useEffect, useState } from "react";
import {
    history } from "umi";
import mapboxgl from "mapbox-gl";
import MapboxLanguage from "@mapbox/mapbox-gl-language";
import AllAddr from "@/utils/allAddr";
import Style from "./index.less";
import icon from "../../../public/images/coffee.png";

export default () => {
   
  const handleInitial = () => {
   
    mapboxgl.accessToken = "官方注册后提供的token";
    var map = new mapboxgl.Map({
   
      style: "mapbox://styles/stevage/ciz68fsec00112rpal5hjru07?refresh=1",
      center: [121.42, 31.22], //上海市长宁区
      zoom: 11.5, //缩放级别
      minZoom: 9,
      maxZoom: 19,
      container: "map",
    });
    //设置语言：中文
    var language = new MapboxLanguage({
    defaultLanguage: "zh-Hans" });
    map.addControl(language);

    map.on("load", function () {
   
      map.addSource("places", {
   
        type: "geojson",
        data: {
   
          type: "FeatureCollection",
          features: AllAddr.coffeAddr,
        },
      });
      map.addLayer({
   
        id: "places",
        type: "symbol",
        source: "places",
        layout: {
   
          "icon-image": "{icon}",
          "text-field": "{title}",
          "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
          "text-size": 20,
          "text-offset": [0, 0.6],
          "text-anchor": "top",
        },
        paint: {
   
          'text-color': '#50B4DB', 

        },
      });

      const popup = new mapboxgl.Popup({
   
        closeButton: false,
        closeOnClick: false,
      });

      map.on("mouseenter", "places", (e: any) => {
   
        map.getCanvas().style.cursor = "pointer";
        const coordinates = e.features[0].geometry.coordinates.slice();
        const description = e.features[0].properties.description;
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
   
          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }
        popup.setLngLat(coordinates).setHTML(description).addTo(map);
      });

      map.on("mouseleave", "places", () => {
   
        map.getCanvas().style.cursor = "";
        popup.remove();
      });
    });
  };
  useEffect(() => {
   
    handleInitial();
  }, []);

  return (
    <div className={
   Style.mapContanier}>
      <div className={
   Style.leftItem}>
        <div className={
   Style.leftBg}>{
   AllAddr.bgText}</div>
        <h1>长宁区咖啡馆</h1>
      </div>
      <div id="map" className={
   Style.mapItem} />
    </div>
  );
};