在 OpenLayers 和 Thymeleaf 中使用 Javascript 个变量

Question

我有一个基本的 Spring 启动应用程序。使用 Spring 初始化程序、JPA、嵌入式 Tomcat、Thymeleaf 模板引擎，并打包为可执行 JAR 文件。我有一个 Thymeleaf，它从控制器获取 lat 和 lng 变量。在 Thymeleaf 模板中我有这段代码

    <div id="Map" class="map"></div>
                        <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
                        <script th:inline="javascript">
                        /*<![CDATA[*/

                            var lat            = /*[[${lat}]]*/;
                         var lng            = /*[[${lng}]]*/;

                               var map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            target: 'Map',
            controls: ol.control.defaults({
              attributionOptions: {
                collapsible: false
              }
            }),
            view: new ol.View({
              center: [lng, lat],
              zoom: 10
            })
          });

          document.getElementById('zoom-out').onclick = function() {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom - 1);
          };

          document.getElementById('zoom-in').onclick = function() {
            var view = map.getView();
            var zoom = view.getZoom();
            view.setZoom(zoom + 1);
          };

 /*]]>*/
                                  </script>
                </div>

但是我看到所有的地图都是灰色的，当我看到页面的源代码时，我看到的字面意思是：

  <script>
                    /*<![CDATA[*/

                        var lat            = 31.184349060058594;
                     var lng            = 1.2457042932510376;

                           var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'Map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: new ol.View({
          center: [lng, lat],
          zoom: 10
        })
      });

      document.getElementById('zoom-out').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom - 1);
      };

      document.getElementById('zoom-in').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
      };
  /*]]>*/   
                    </script>

在控制器中：

model.addAttribute("lat",           getLatitude());
        model.addAttribute("lng",           getLongitude());

Answer 1

您的代码中有几个问题。

没有名为"zoom-out"或"zoom-in"的id。所以document.getElementById('zoom-in').onclick = function() {报错
请将缩放级别设置为5，然后您就可以看到地图了。实际上地图正在加载，但是你看不到它，因为它已经放大了。

这是工作 html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Map</title>
</head>
<body>
<div id="Map" class="map"></div>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/

    var lat            = /*[[${lat}]]*/;
    var lng            = /*[[${lng}]]*/;

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'Map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: new ol.View({
            center: ol.proj.fromLonLat([lon, lat]),
            zoom: 5
        })
    });

    document.getElementsByClassName('ol-zoom-out').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom - 1);
    };

    document.getElementsByClassName('ol-zoom-in').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
    };

    /*]]>*/
</script>
</div>
</body>
</html>

请从这里找到工作示例https://gitlab.com/supun/spring-boot-app/commit/856cbbd1e798ab071118d420f9cab02722d219eb

在 OpenLayers 和 Thymeleaf 中使用 Javascript 个变量

Working with Javascript variables in OpenLayers and Thymeleaf

html

javascript

openlayers

thymeleaf

spring-boot