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を編集して編集します。

わかりました。私の理解が正しければ、imagesリーフレットのデフォルト アイコンと同じフォルダにカスタム アイコン イメージを追加しましたか?

その場合、リーフレットのデフォルトのアイコン画像の自動パス解決を利用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 に答える