1

我在 Spring MVC Framework 应用程序中使用 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'}),

在我的脚本的内部内容中添加一个 alert('${pageContext.request.contextPath})' 以查看它解决了什么，消息是我的应用程序的内容名称： /myApp-1.0-SNAPSHOT

我也试过

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

它也不起作用，即使在 JSP 中也能完美运行

4

1 回答 1

2

编辑以下问题的编辑8-12：

好的，如果我理解正确，您将自定义图标图像添加到与imagesLeaflet 默认图标相同的文件夹中？

在这种情况下，您可以利用 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'吗？（注意没有前导斜杠）

于 2016-07-05T09:28:27.180 回答