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>