leaflet手绘地图实现原理-可视化工具设计手绘地图

在Leaflet中实现手绘地图并添加自定义标注是一个有趣且实用的功能。Leaflet 是一个开源的 JavaScript 库，用于在网页上创建交互式地图。下面是一个基本的实现步骤，包括如何加载手绘地图和添加自定义标注。

步骤 1：设置 HTML 页面

首先，创建一个基本的 HTML 页面，并引入 Leaflet 库。

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 手绘地图与自定义标注</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { height: 100vh; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        // JavaScript 代码将在这里编写
    </script>
</body>
</html>

步骤 2：初始化地图并加载手绘地图瓦片

在 <script> 标签中编写 JavaScript 代码，初始化 Leaflet 地图并加载手绘地图瓦片。假设你有一个手绘地图的瓦片服务器。

复制代码

// 初始化地图并设置视口
var map = L.map('map').setView([51.505, -0.09], 13);

// 添加手绘地图瓦片层
L.tileLayer('https://your-hand-drawn-map-tiles/{z}/{x}/{y}.png', {
    attribution: '&copy; Your Hand-Drawn Map Data'
}).addTo(map);

步骤 3：添加自定义标注

你可以使用 L.marker 来添加标注，并绑定弹出窗口（Popup）来显示自定义信息。

复制代码

// 初始化地图并设置视口
var map = L.map('map').setView([51.505, -0.09], 13);

// 添加手绘地图瓦片层
L.tileLayer('https://your-hand-drawn-map-tiles/{z}/{x}/{y}.png', {
    attribution: '&copy; Your Hand-Drawn Map Data'
}).addTo(map);

步骤 4：添加自定义图标（可选）

如果你想为标注使用自定义图标，可以创建一个 L.Icon 实例，并将其传递给 L.marker。

复制代码

// 创建自定义图标
var customIcon = L.icon({
    iconUrl: 'path/to/your/icon.png', // 图标路径
    iconSize: [38, 95], // 图标大小
    iconAnchor: [22, 94], // 图标锚点
    popupAnchor: [-3, -76], // 弹出窗口锚点
    shadowUrl: 'path/to/your/shadow.png', // 阴影路径（可选）
    shadowSize: [68, 95], // 阴影大小（可选）
    shadowAnchor: [22, 94] // 阴影锚点（可选）
});

// 使用自定义图标添加标注
var markerWithCustomIcon = L.marker([51.51, -0.08], { icon: customIcon }).addTo(map)
    .bindPopup('这是一个带有自定义图标的标注');

完整代码示例

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 手绘地图与自定义标注</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { height: 100vh; }
    </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://your-hand-drawn-map-tiles/{z}/{x}/{y}.png', {
            attribution: '&copy; Your Hand-Drawn Map Data'
        }).addTo(map);

        // 添加自定义标注
        var marker = L.marker([51.5, -0.1]).addTo(map)
            .bindPopup('这是一个自定义标注')
            .openPopup(); // 自动打开弹出窗口

        var marker2 = L.marker([51.49, -0.11]).addTo(map)
            .bindPopup('这是另一个自定义标注');

        // 创建自定义图标
        var customIcon = L.icon({
            iconUrl: 'path/to/your/icon.png', // 图标路径
            iconSize: [38, 95], // 图标大小
            iconAnchor: [22, 94], // 图标锚点
            popupAnchor: [-3, -76], // 弹出窗口锚点
            shadowUrl: 'path/to/your/shadow.png', // 阴影路径（可选）
            shadowSize: [68, 95], // 阴影大小（可选）
            shadowAnchor: [22, 94] // 阴影锚点（可选）
        });

        // 使用自定义图标添加标注
        var markerWithCustomIcon = L.marker([51.51, -0.08], { icon: customIcon }).addTo(map)
            .bindPopup('这是一个带有自定义图标的标注');
    </script>
</body>
</html>

这样，你就可以在 Leaflet 中实现手绘地图并添加自定义标注了。根据需要，你可以进一步自定义和扩展这些功能。

可视化工具实现手绘地图

设置手绘地图

页面直接集成了地图图片上传，支持超大图片上传，上传后会自动切成瓦片地图图片。

新增标注

在地图图片上右键新增标注，支持自定义标注图片、标注点击事件

手绘地图上画线

支持在地图上画线，然后指定画线为运动轨迹，即可实现运动效果。