เอกสาร / การตั้งค่า / React / MapTiler

การตั้งค่า MapTiler

ขั้นตอนการใช้งานสไตล์ MapTiler Cloud บนเว็บผ่าน MapConductor ตัวเรนเดอร์คือ `maplibre-gl` และรูปแบบจะถูกสร้างขึ้นเป็น URL ของ MapTiler Cloud พร้อมกับคีย์ API

PACKAGE

react-for-maptiler

API KEY

จำเป็น

CSS

จำเป็น

REACT NATIVE

ไม่มี

ผู้ให้บริการเดียวกัน แพลตฟอร์มอื่นAndroid iOS

ดูเดโมแผนที่ร้านค้า · React ↗

ก่อนเริ่ม

Node.js 18 ขึ้นไป

บัญชี MapTiler Cloud และคีย์ API

STEP 01

ที่จะติดตั้ง

ติดตั้งแพ็กเกจหลัก, React bindings และแพ็กเกจผู้ให้บริการ เมื่อเปลี่ยนผู้ให้บริการจะมีเพียงตัวที่สามเท่านั้นที่เปลี่ยนแปลง

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-maptiler

STEP 02

แยกออกจากการ bundle ล่วงหน้าของ Vite

หากใช้ Vite ให้เพิ่มผู้ให้บริการลงใน `optimizeDeps.exclude` `maplibre-gl` v6 จะโหลด worker ผ่าน URL หากถูก bundle ไว้ล่วงหน้าไฟล์ worker จะไม่ถูกสร้างใน `.vite/deps` ทำให้โหลดไม่สำเร็จ

vite.config.tsTypeScript · Vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    optimizeDeps: {
        exclude: ["@mapconductor/react-for-maptiler", "@mapconductor/js-sdk-core"],
    },
    plugins: [react()],
});

STEP 03

โหลดสไตล์ชีต

โหลดเพียงครั้งเดียวที่จุดเริ่มต้นของแอป หากลืมจะทำให้ตำแหน่งแผนที่และรูปลักษณ์ของตัวควบคุมเสียหาย

main.tsxTypeScript

import '@mapconductor/react-for-maptiler/style.css';

STEP 04

ส่งคีย์ API ไปยัง state hook

คีย์จะถูกฝังใน URL ของ style JSON (https://api.maptiler.com/maps/