Question

我在Spring MVC Framework应用程序中使用leafletjs。我想使用自定义图标使用costum图像为不同的图标。

这是我项目的层次结构：

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>

如果我没有对图像进行custimaze，我会看到默认的标记图标在这里，它显示完美：

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-SNAPSHOT

我也试过

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

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

Answer 1

编辑问题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框架的自定义图标标记（静态内容）

1 个答案: