react-map-gl + mapbox-gl-language 散点图

理解

什么是 react-map-gl ？ React -map- GL是一套React组件，旨在为Mapbox GL兼容js的库提供React API MapBox 官网地址：https://www.mapbox.com 那么现在我们知道了 MapBox 后要做些什么呢？ 首页我们先要到其官网平台 搞到 MapboxAccessToken。

关于 MapboxAccessToken

从2.0版本开始，Mapbox -gl需要一个Mapbox令牌用于任何使用，无论是否使用Mapbox数据服务。查看关于Mapbox令牌的选项 注册入口： https://account.mapbox.com/auth/signup/ 相关流程跟着引导就可以完成过了，下面来一张注册完成后登录平台的截图 自己新建项目 即可到分配到 对应 令牌了， 接下来我们直接和代码打交道了。

react-map-gl 依赖安装

npm install --save react-map-gl mapbox-gl

安装完依赖，首先赋上 react-map-gl 的开发文档地址： https://visgl.github.io/react-map-gl/docs/get-started/get-started 将依赖包引入项目,注意 react-map-gl的 地图样式 是依赖 mapbox-gl的

import ReactMapGL ,  {Marker} from 'react-map-gl';
import MapboxLanguage  from '@mapbox/mapbox-gl-language'
import 'mapbox-gl/dist/mapbox-gl.css';

地图语言包查看了很多相关文档，虽然有的写法并非使用，但这里贴出资料地址帮助理解 MapBox 官网 关于语言切换的文档地址： https://docs.mapbox.com/mapbox-gl-js/example/language-switch/ Mapbox GL Language 官方文档：https://github.com/mapbox/mapbox-gl-language#setlanguage

 const [viewport, setViewport] = useState({
        width: "100%",
        height: "100%",
        longitude: -100,
        latitude: 40,
        zoom: 1
    });
	
 // 处理地图中文
    const addControlHandler = (event) => {
        const map = event && event.target;
        // set lauguage to Chinese if you use English please comment it
        // 参考 https://github.com/mapbox/mapbox-gl-language#setlanguage
        if (map) {
            map.addControl(
                new MapboxLanguage({
                    defaultLanguage: 'zh',
                })
            );
            map.setLayoutProperty('country-label-lg', 'text-field', [
                'get',
                'name_zh',
            ]);
        }
    };

<ReactMapGL
      mapStyle="mapbox://styles/mapbox/streets-v9"
      mapboxAccessToken ={MAPBOX_ACCESS_TOKEN}
      {...viewport}
     onLoad={addControlHandler}
     onMove={(nextViewport) => setViewport(nextViewport)}
	 >
          <Marker longitude={-100} latitude={40} anchor="bottom" >
                 {/*<span role="img" aria-label="push-pin">*/}
                      {/*  📌*/}
                {/*</span>*/}
                 <img src="/images/map-pin.png" width='24px' height='38px'/>
          </Marker>

</ReactMapGL>