时间戳

首页 > 解决方案 > Leafllet 与 ASP .NET MVC 的集成

c# - Leafllet 与 ASP .NET MVC 的集成

问题描述

我正在尝试在基于 ASP .NET MVC5 的项目中使用 Leaflet ( https://leafletjs.com/ ) javascript 库。

为了简单起见，假设我正在尝试在视图上运行以下代码（由本教程提供： https ://leafletjs.com/examples/crs-simple/crs-simple.html） )，它使用预定义的布局 (_Layout.cshtml)：

索引.cshtml

<style>
    #map {
    height: 600px;
}

</style>

<div id="map"></div>

<script>

    var map = L.map('map', {
        crs: L.CRS.Simple,
        minZoom: -5
    });

    var bounds = [[0,0], [1000, 1000]];

    var image = L.imageOverlay('aMap.PNG', bounds).addTo(map);

    map.fitBounds(bounds);

</script>

在布局视图中，我将以下代码放在 HTML 代码的头部，按照这些指南的指示：https ://leafletjs.com/download.html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

但这不起作用，我可以看到即使 Intellisense 也无法识别该库。

我也尝试过下载包，如所示，我将文件添加到项目中，但考虑到 MVC 项目结构，我将 leaflet.css 文件添加到 Content 文件夹，将其余 js 文件添加到 Scripts 文件夹. 在布局视图中，我添加了：

<link rel="stylesheet" href="~/Content/leaflet.css" />
<script src="~/Scripts/leaflet.js"></script>

现在，Intellisense 可以识别库，但在运行项目时，地图仍然没有显示在视图中。

我在这里错过了一些明显的东西，也许是进口？如果答案很简单，请多多包涵，但我是使用 .NET 框架和 ASP .NET MVC 结构的初学者，我仍在尝试找出跨过这个框架的方法。

更新

意识到我是从索引视图加载的，所以没有先加载leaflet.js。

我现在可以看到传单地图部分，但未加载 PNG 图像。我相信传单无法找到，所以我应该将图像放在项目结构中的哪个位置？我尝试将它放在 Content and Scripts 文件夹中，但没有成功。

标签： c#asp.netasp.net-mvcleaflet

解决方案

在@ADyson 的帮助下，我解决了更新中已经提到的第一个问题：我直接从索引视图加载，该视图没有使leaflet.js 首先加载。

关于加载图像的问题，我通过分析 GET 方法用于检索图像的路径找到了放置它的正确路径，该路径仅位于项目的主文件夹以及 Contents、Models 等其他文件夹中。

推荐阅读