LEAFLET（交互式地图）- 带有 Spring MVC 框架（静态内容）的自定义图标的标记

Question

我在 Spring MVC 框架应用程序中使用 leafletjs。我想使用自定义图标，使用不同图标的服装图像。

这是我项目的层次结构：

webaapp
   --- core
-------- css
-------- js
-----------images (leafletjs images)

代码在这里

 <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/core/css/leaflet.css" />
    <title>leafletjs</title>
    </head>
    <body>


THIS IMAGE IS OK, I CAN SEE IT:
        <img src="${pageContext.request.contextPath}/resources/core/images/marker-icon-2x-blue.png"/>

        <div id="mapid" style="width: 800px; height: 600px"></div>


        <script src="${pageContext.request.contextPath}/resources/core/js/leaflet.js"></script>
        <script>

            var mymap = L.map('mapid').setView([51.505, -0.09], 13);

            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
                maxZoom: 18,
                attribution:
                    'osm',
                id: 'mapbox.streets'
            }).addTo(mymap);

            var greenIcon  = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-green.png'}),
                redIcon    = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-red.png'}),
                blueIcon   = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-blue.png'}),
                yellowIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-yellow.png'});



            L.marker([51.5, -0.09], {icon: greenIcon}).addTo(mymap)
                .bindPopup(" ").openPopup();

            L.marker([51.49, -0.091], {icon: greenIcon}).addTo(mymap)
            .bindPopup(" ").openPopup();

            L.marker([51.48, -0.092], {icon: greenIcon}).addTo(mymap)
            .bindPopup("").openPopup();

            L.marker([51.47, -0.098], {icon: greenIcon}).addTo(mymap)
            .bindPopup(" ").openPopup();

            var popup = L.popup();


        </script>   
    </body>
    </html>

如果我不自定义图像，我会看到默认标记图标在此处并且显示完美：

http://localhost:8080/myApp-1.0-SNAPSHOT/resources/core/js/images/marker-icon-2x.png

但对于自定义的，我尝试了几种方法都没有成功：

new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-green.png'}),

new LeafIcon({iconUrl: 'images/marker-icon-2x-green.png'}),

new LeafIcon({iconUrl: '/images/marker-icon-2x-green.png'}),

new LeafIcon({iconUrl: '/resources/core/js/images/marker-icon-2x-green.png'}),

new LeafIcon({iconUrl: 'resources/core/js/images/marker-icon-2x-green.png'}),

在我的脚本的内部内容中添加一个警报（'${pageContext.request.contextPath}）'以查看它解决了什么，该消息是我的应用程序的联系人名称：/myApp -1.0-快照

我也试过

<spring:url value="/resources/core/js/images/marker-icon-2x-green.png" var="myImage" />
 var greenIcon  = new LeafIcon({iconUrl:'${myImage}'})

它也没有工作，即使在 JSP 中工作得很好

Answer 1

EDIT 编辑问题 8-12 后：

好的，如果我没理解错的话，你是在与 Leaflet 默认图标相同的 images 文件夹中添加了自定义图标图像？

在这种情况下，您可以利用 Leaflet 默认图标图像自动路径解析 L.Icon.Default.imagePath 来构建您自己的路径。

我猜是这样的：

new LeafIcon({iconUrl: L.Icon.Default.imagePath + '/marker-icon-2x-green.png'});

你在哪里定义你的LeafIcon？

'${pageContext.request.contextPath}' 在脚本的内部内容中解析了什么？

你试过'resources/core/images/marker-icon-2x-green.png'了吗？（注意没有前导斜杠）

LEAFLET（交互式地图）- 带有 Spring MVC 框架（静态内容）的自定义图标的标记

LEAFLET (interactive maps) - Markers with Custom Icons with Spring MVC Framework (Static content)

spring-mvc

leaflet

ui-leaflet