Как загрузить geojson из контроллера в google api с помощью thymeleaf в Spring Boot? - PullRequest
Новая
       19

Как загрузить geojson из контроллера в google api с помощью thymeleaf в Spring Boot?

0 голосов
/ 01 июля 2018

Я пытаюсь загрузить или добавить свой json (в формате GeoJson) с моего контроллера, отправляя Thymeleaf на HTML-страницу для отображения в Google API MAP, но я не могу этого сделать (ничего не происходит, карта не загружается) геойсон, на консоли нет ошибок, просто ничего не добавляется. Просто отобразите карту, но без какого-либо знака моего Json.)

На моем контроллере я генерирую свой GeoJson с объектами Json, а затем отправляю на страницу с моделью.

Это мой контроллер (я уже проверил свой json на geojson.io, и он работает): 

@GetMapping("/test")
    public String Json( Model model) throws JSONException {

        JSONObject featureCollection = new JSONObject();
        featureCollection.put("type", "FeatureCollection");
        JSONObject properties = new JSONObject();
        properties.put("name", "ESPG:4326");
        JSONObject crs = new JSONObject();
        crs.put("type", "name");
        crs.put("properties", properties);
        featureCollection.put("crs", crs);

        JSONArray features = new JSONArray();
                        .
                        .
                        .
                        .
            // System.out.println(featureCollection.toString());
            // }

        }
        //System.out.println(featureCollection.toString());
        model.addAttribute("geojson",featureCollection);

        return "test";
    }

Это мой HTML: 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
    height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body onload="initMap()">
    <div id="map"></div>
    <script th:inline="javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom : 4,
                center : {
                    lat : -7,
                    lng : 137
                }
            });

            var json = [[${geojson}]];
        //var geojson = /*[[${geojson}]]*/'default';


            map.data.addGeoJson(json);


        }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MYKEYHERE&callback=initMap">

    </script>
</body>
</html>

1 Ответ

0 голосов
/ 02 июля 2018

Ответ:

Нужно было разобрать объект: 

var json = JSON.parse([[${geojson}]]);


            map.data.addGeoJson(json);
...