Vue3 + TS + Leafletjs 打造企业级原神大地图-项目初步实战
原创Vue3 + TS + Leafletjs 打造企业级原神大地图-项目初步实战
原创
用户11190134
发布于 2024-07-01 23:49:41
发布于 2024-07-01 23:49:41
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 地图示例：
<!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专家，添加圆形、矩形、多边形
// 添加圆形
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添加图层控制
// 基础地图层
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);原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
作者已关闭评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。
腾讯云开发者
