leaflet

leaflet 加载 wkt 文件

by giser · 2019-04-03

目录

插件下载

https://download.csdn.net/download/seelingzheng/10481108

github ：https://github.com/Esri/Terraformer

介绍

terraformers是Esri的一个开源项目

terraformers

示例如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Leaflet load WKT</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css">
    <style>
        html,
        body,
        #map {
            margin: 0;
            height: 100%;
        }

        #submit {
            position: absolute;
            z-index: 400;
            right: 20px;
            top: 20px;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <button id="submit" onclick="loadWkt();">Load WKT into Map</button>
    <script src="libs/terraformer.js"></script>
    <script src="libs/terraformer-wkt-parser.js"></script>
    <script src="https://unpkg.com/leaflet@1.0.2"></script>
    <script>
        var map = new L.Map('map');
        // Create a layer of open streetmap tile layer
        var gaodeUrl =
            'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}';

        var gaode = new L.TileLayer(gaodeUrl, {
            minZoom: 2,
            maxZoom: 21,
            subdomains: ["1", "2", "3", "4"]

        });

        // add tiles to the map
        map.addLayer(gaode);

        map.setView([30.6017424, 104.069683], 10);

        var wkts = [
            "POINT(104.069683 30.601742)",
            "LINESTRING(104.18304604073 30.3305841465568,105.805692477062 32.0850224203499)",
            "POLYGON((104.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"
        ];

        function loadWkt() {
        
            var geojsons = []

            for (let index = 0; index < wkts.length; index++) {
                var geojson = Terraformer.WKT.parse(wkts[index]);
                geojsons.push(geojson)
            }
          
            var layer = L.geoJson(geojsons, {
                onEachFeature: onEachFeature
            }).addTo(map);
        }
        function onEachFeature(feature, layer) {
            var popupContent = "<p>Leaflet Load WKT " +
                feature.type + "</p>";
            if (feature.properties && feature.properties.popupContent) {
                popupContent += feature.properties.popupContent;
            }
            layer.bindPopup(popupContent);
        }
    </script>

</body>

</html>

更多内容，欢迎关注公众号

seeling_GIS

转载自：https://blog.csdn.net/weixin_34343000/article/details/88149665

相关推荐

Tags: leaflet leaflet 加载 wkt 文件

You may also like...