在 OpenLayers 和 Thymeleaf 中使用 Javascript 变量答案

【问题标题】：Working with Javascript variables in OpenLayers and Thymeleaf在 OpenLayers 和 Thymeleaf 中使用 Javascript 变量
【发布时间】：2018-11-20 15:58:05
【问题描述】：

我有一个基本的 SpringBoot 应用程序。使用 Spring Initializer、JPA、嵌入式 Tomcat、Thymeleaf 模板引擎，并将其打包为可执行的 JAR 文件。我有一个从控制器获取 lat 和 lng 变量的 Thymeleaf。在 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());

【问题讨论】：

附带说明，坐标应为long, lat，而不是纬度、经度
你能分享你的控制器代码吗？

标签： javascript html spring-boot thymeleaf openlayers

【解决方案1】：

您的代码中有几个问题。

没有称为“缩小”或“放大”的 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

【讨论】：

谢谢...我已删除“缩小”和“放大”，将缩放级别设置为 5，但唯一的问题是 taht 未以 lat / long 为中心？ ?
查看我修改后的答案