Mapbox 및 Vite를 사용한 React 전단 설정

33704 단어 reactjavascriptfrontend
나는 모든 사람들이 언제든지 사이트에 지도를 추가하거나 앱을 만들어 친구들과 그들이 갔던 곳을 공유하려고 시도할 것이라고 믿는다.
그리고 어떤 때는 iFrame을 사용하여 사이트에 지도를 추가하면 최소한 한 기업이나 상점의 위치를 표시할 수 있다.
그러나 우리는 여전히 우리가 사용하는 서비스, 예를 들어 구글의 API를 사용하고 있다. 그러나 현재 우리는 Mapbox이라는 놀라운 서비스를 가지고 있다. 우리는 우리가 원하는 방식으로 지도를 설계할 수 있고 무료 계획을 세울 수 있다. 내가 보기에 이 계획은 매우 관대한 것 같다.
우선, 우리는 Leaflet의 기본 분폭만 사용하여 지도를 만들 것이다.만약 네가 결과에 만족한다면, 너는 이것에 대해 말하지 않아도 된다.단, 맵박스 배열을 사용하고 싶다면 문장이 끝날 때까지 본문을 읽어 주십시오.
오늘 우리가 할 프로그램은 현재 위치만 표시합니다.이를 위해 Geolocation 웹 API를 사용하고, 사용자가 이 위치에 액세스할 수 있는 경우 이 API를 사용하고, 그렇지 않으면 ipapi에 http 요청을 보냅니다(정확하지는 않지만 도움이 됩니다).
이번에는 webpack을 번들로 사용하지 않고 Vite을 사용합니다. 만약 당신이 사용한 적이 없다면 지금은 이렇게 할 수 있는 기회입니다.

저희가 인코딩을 해볼게요.


먼저 Vite를 사용하여 프로젝트를 만들고, 이를 위해 다음 명령을 사용합니다.
npm init @vitejs/app [PROJECT_NAME]
현재 우리는 터미널과 상호작용을 할 수 있다. 우선 우리의 프레임워크를 선택하고, 우리의 예는react이고, 그 다음은javaScript 언어이다.

그런 다음 프로젝트 폴더로 이동하여 종속성을 설치하고 개발 환경을 시작합니다.
cd [PROJECT_NAME]
npm install
npm run dev
포트 3000에 다음과 같은 애플리케이션이 있어야 합니다.

이제 React에서 전단지를 사용할 수 있도록 필요한 의존항을 설치할 수 있습니다.
npm install react-leaflet leaflet axios
먼저 프로그램의 마스터 파일로 전단 스타일을 가져와야 합니다.
// @src/main.jsx

import React from "react";
import ReactDOM from "react-dom";

import "./index.css";
import App from "./App";
import "leaflet/dist/leaflet.css"; // <- Leaflet styles

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
이제 지도를 가져오는 데 필요한 React 전단지 구성 요소를 가져올 것입니다.지도의 높이와 너비를 설정하십시오.
// @src/app.jsx

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

const App = () => {
  const position = [51.505, -0.09];
  return (
    <MapContainer
      center={position}
      zoom={13}
      scrollWheelZoom={true}
      style={{ minHeight: "100vh", minWidth: "100vw" }}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

export default App;
이제 이와 유사한 애플리케이션이 있어야 합니다.

코드에서 알 수 있는 바와 같이 정적 위치가 있습니다. 그러나 동적 위치가 필요하기 때문에 현재 위치를 얻기 위해 갈고리를 만들 것입니다.
우리가 전화한 갈고리 useMap:
// @src/hooks/index.jsx

export const useMap = () => {
  // Logic goes here
};
우선, 우리는 useState 갈고리를 사용하여 우리의 주를 만들고, 그 중에서 위도와 경도의 위치를 저장할 것이다.나는 최초의 주가 프랑스 남트에 있기를 희망하지만, 너는 다른 곳을 선택할 수 있다.
// @src/hooks/index.jsx

import { useState } from "react";

export const useMap = () => {
  const [position, setPosition] = useState({
    lat: 47.21725,
    lng: -1.55336,
  });
  // More logic goes here
};
그리고 우리는 useEffect 갈고리를 사용하여 페이지를 처음 보여줄 때만 실행할 것입니다.우리는 함수의 반환이 바로 위치라는 것을 안다.
// @src/hooks/index.jsx

import { useState, useEffect } from "react";

export const useMap = () => {
  const [position, setPosition] = useState({
    lat: 47.21725,
    lng: -1.55336,
  });
  useEffect(() => {
    // More logic goes here
  }, []);
  return { position };
};
다음 단계는 동일한 데이터를 저장하는 웹 API를 통해 위치에 액세스하는 것입니다.
// @src/hooks/index.jsx

import { useState, useEffect } from "react";
import axios from "axios";

export const useMap = () => {
  const [position, setPosition] = useState({
    lat: 47.21725,
    lng: -1.55336,
  });
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      ({ coords }) => {
        setPosition({ lat: coords.latitude, lng: coords.longitude });
      },
      (blocked) => {
        // More logic goes here
        }
      }
    );
  }, []);
  return { position };
};
그러나 만약 사용자 (또는 그가 사용하고 있는 장치) 가 그의 위치에 접근하지 못하게 한다면, 우리는 어쩔 수 없이 Api에 http 요청을 할 것입니다.이를 위해, 우리는 axios를 사용하고, 응답 데이터를 우리의 상태에 저장할 것입니다.
갈고리의 최종 코드는 다음과 같아야 한다.
// @src/hooks/index.jsx

import { useState, useEffect } from "react";
import axios from "axios";

export const useMap = () => {
  const [position, setPosition] = useState({
    lat: 47.21725,
    lng: -1.55336,
  });
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      ({ coords }) => {
        setPosition({ lat: coords.latitude, lng: coords.longitude });
      },
      (blocked) => {
        if (blocked) {
          const fetch = async () => {
            try {
              const { data } = await axios.get("https://ipapi.co/json");
              setPosition({ lat: data.latitude, lng: data.longitude });
            } catch (err) {
              console.error(err);
            }
          };
          fetch();
        }
      }
    );
  }, []);
  return { position };
};
이제 우리는 지도 구성 요소로 다시 돌아갈 수 있다. 갈고리를 가져와 동적 방식으로 우리의 위치를 방문할 수 있다.우리는 지도의 축소 비율을 13에서 4.5로 바꿀 것이다.
// @src/app.jsx

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

import { useMap } from "./hooks";

const App = () => {
  const { position } = useMap();
  return (
    <MapContainer
      center={position}
      zoom={4.5}
      scrollWheelZoom={true}
      style={{ minHeight: "100vh", minWidth: "100vw" }}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

export default App;
현재의 결과는 이와 매우 비슷할 것이다.

결과에 만족한다면 여기까지 할 수 있지만, 다른 블록을 원한다면, 지금 우리가 Mapbox 블록을 사용할 것이기 때문에 본문을 계속 읽어 주십시오.
먼저 맵 상자 website으로 이동해서 계정을 만듭니다.

그런 다음 Mapbox Studio로 이동하여 새 스타일을 작성합니다.


그런 다음 원하는 템플릿과 해당 변형을 선택할 수 있습니다.이 예에서, 나는 기본 템플릿과 갤럭시 변체를 사용할 것이다.

맵의 구성 UI에서 공유를 클릭하고 운영 탭에서 스타일 URL과 액세스 토큰을 찾을 수 있는지 확인합니다.

이제 프로젝트를 바탕으로 스토리지 환경 변수를 .env으로 만듭니다.스타일 URL 링크에는 사용자 이름과 스타일 id가 있습니다.
VITE_USERNAME=
VITE_STYLE_ID=
VITE_ACCESS_TOKEN=
이제 맵 구성 요소로 돌아가서 다음과 같이 환경 변수를 가져옵니다.
// @src/app.jsx

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

import { useMap } from "./hooks";

const { VITE_USERNAME, VITE_STYLE_ID, VITE_ACCESS_TOKEN } = import.meta.env;

// Hidden for simplicity
<TileLayer /> 구성 요소에서 속성과 URL을 바꿉니다.url에 링크를 추가하여 환경 변수의 값을 동적으로 전달함으로써 Mapbox 분폭을 가져옵니다.우리가 속성에서 Mapbox에 점수를 매겨야 하는 것처럼이렇게:
// @src/app.jsx

// Hidden for simplicity

const App = () => {
  const { position } = useMap();
  return (
    <MapContainer
      center={position}
      zoom={4.5}
      scrollWheelZoom={true}
      style={{ minHeight: "100vh", minWidth: "100vw" }}
    >
      <TileLayer
        attribution='Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>'
        url={`https://api.mapbox.com/styles/v1/${VITE_USERNAME}/${VITE_STYLE_ID}/tiles/256/{z}/{x}/{y}@2x?access_token=${VITE_ACCESS_TOKEN}`}
      />
      // Hidden for simplicity
    </MapContainer>
  );
};
지도 구성 요소 코드는 다음과 같습니다.
// @src/app.jsx

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

import { useMap } from "./hooks";

const { VITE_USERNAME, VITE_STYLE_ID, VITE_ACCESS_TOKEN } = import.meta.env;

const App = () => {
  const { position } = useMap();
  return (
    <MapContainer
      center={position}
      zoom={4.5}
      scrollWheelZoom={true}
      style={{ minHeight: "100vh", minWidth: "100vw" }}
    >
      <TileLayer
        attribution='Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>'
        url={`https://api.mapbox.com/styles/v1/${VITE_USERNAME}/${VITE_STYLE_ID}/tiles/256/{z}/{x}/{y}@2x?access_token=${VITE_ACCESS_TOKEN}`}
      />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

export default App;
저희가 신청한 최종 결과는 다음과 같습니다.

나는 이것이 도움이 되고 이해하기 쉽기를 바란다.😁
좋은 하루 되세요!😉
CocosCreator 물체 이동 제어
Into the Typescript 2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage