EJS-Maps：如何在经纬度点位列表间绘制连接线展示路线

以下是基于Syncfusion Essential JS 2 Maps的实现方案，通过内置的Marker和Polyline控件完成需求，无需在地图交互时重载代码：

1. 后端准备数据 #

首先创建点位模型类，并在Controller中生成或获取点位数据，转为JSON传给视图：

// Models/PointModel.cs
public class PointModel
{
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}

// Controllers/HomeController.cs
public IActionResult Index()
{
    // 模拟30个点位数据，实际可从数据库/接口获取
    var points = new List<PointModel>();
    // 示例：添加测试点位，替换为你的实际数据
    points.Add(new PointModel { Latitude = 39.9042, Longitude = 116.4074 });
    points.Add(new PointModel { Latitude = 31.2304, Longitude = 121.4737 });
    points.Add(new PointModel { Latitude = 23.1291, Longitude = 113.2644 });
    // ... 补充剩余点位

    // 将数据转为JSON存入ViewBag，供前端使用
    ViewBag.PointData = JsonSerializer.Serialize(points);
    return View();
}

2. 前端视图配置EJS Maps #

在Razor视图中引入EJS Maps资源，初始化地图并配置Marker（点位）和Polyline（路线）：

@{
    ViewData["Title"] = "Map Route";
}

<!-- 引入EJS Maps样式和脚本 -->
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

<div id="container" style="height: 600px; width: 100%;"></div>

<script>
    // 从ViewBag获取点位数据
    const pointData = @Html.Raw(ViewBag.PointData);

    // 初始化EJS Maps
    var map = new ej.maps.Map({
        // 设置地图图层，这里用OpenStreetMap
        layers: [{
            urlTemplate: 'https://tile.openstreetmap.org/level/tileX/tileY.png',
            type: 'OSM'
        }],
        // 配置标记（点位）
        markers: [{
            dataSource: pointData,
            // 指定数据中的经纬度字段
            latitudeValuePath: 'Latitude',
            longitudeValuePath: 'Longitude',
            // 设置标记样式
            shape: 'Circle',
            fill: '#FF0000',
            width: 8,
            height: 8
        }],
        // 配置折线（路线）
        polylines: [{
            dataSource: pointData,
            // 指定数据中的经纬度字段
            latitudeValuePath: 'Latitude',
            longitudeValuePath: 'Longitude',
            // 设置路线样式
            color: '#2E86AB',
            width: 3,
            dashArray: '0'
        }],
        // 设置地图初始中心点和缩放级别，可根据你的点位自动调整
        center: { latitude: 30.5928, longitude: 114.3055 },
        zoomSettings: {
            zoomLevel: 5
        }
    });

    // 将地图渲染到容器
    map.appendTo('#container');
</script>

关键说明 #

• 无需重载代码：Marker和Polyline是EJS Maps的内置控件，绑定数据后，地图的移动、缩放等交互操作会由控件自动处理渲染，不需要手动监听事件重新绘制，彻底避免冗余代码。
• 路线可视化：Polyline会按照你提供的点位顺序依次连接，完全满足无道路约束的路线展示需求。
• 自定义样式：可以根据需求修改Marker的形状、颜色，Polyline的颜色、宽度等样式参数。

内容的提问来源于stack exchange，提问作者rogerschneiter