Vue3 + TS + Leafletjs 打造企业级原神大地图-项目初步实战

leaflet 简介

Leaflet 是一个开源的 JavaScript 库，用于在 Web 页面上创建互动地图。它轻量级、高效且易于使用，非常适合进行地理信息系统（GIS）开发。

安装 Leaflet

要在你的项目中使用 Leaflet，可以通过以下方式进行安装：

使用 CDN：在你的 HTML 文件的 <head> 部分添加以下链接： <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>HTML
使用 npm：在你的项目目录中运行以下命令： npm install leafletBASH 然后在你的 JavaScript 文件中导入： import L from 'leaflet';JAVASCRIPT

创建一个简单的地图

以下是一个基本的 Leaflet 地图示例：

代码语言：javascript复制

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        // 创建地图并设置视图中心和缩放级别
        var map = L.map('map').setView([51.505, -0.09], 13);

        // 添加地图瓦片层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        }).addTo(map);

        // 添加标记
        L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
            .openPopup();
    </script>
</body>
</html>HTML

添加其他元素

从0到1全流程落地web游戏大地图项目，成为WebGlS专家，添加圆形、矩形、多边形

代码语言：javascript复制

// 添加圆形
L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);

// 添加矩形
L.rectangle([[51.49, -0.08], [51.5, -0.06]], {
    color: "#ff7800",
    weight: 1
}).addTo(map);

// 添加多边形
L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);JAVASCRIPT

添加图层控制

代码语言：javascript复制

// 基础地图层
var streets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
});

var satellite = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
    maxZoom: 17,
    attribution: '© OpenTopoMap'
});

var baseMaps = {
    "Streets": streets,
    "Satellite": satellite
};

// 叠加层
var cities = L.layerGroup([
    L.marker([51.5, -0.09]).bindPopup("London"),
    L.marker([48.8566, 2.3522]).bindPopup("Paris"),
    L.marker([40.7128, -74.0060]).bindPopup("New York")
]);

var overlayMaps = {
    "Cities": cities
};

L.control.layers(baseMaps, overlayMaps).addTo(map);

0 人点赞