openlayers

openlayers3异步调用geojson， Ajax

by giser · 2019-04-02

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Load Json</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="js/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="js/ol.js"></script>
    <!--<script src="js/p-ol3.debug.js"></script>-->
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/drag.js"></script>
</head>
<div id="map" style="width: 100%"></div>
<button id="loadJson" onClick="loadGeoJson();">Load Json</button>
<body>

    <script type="text/javascript">
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector(),
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 0, 0, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 5
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });

          var map = new ol.Map({
            //interactions: ol.interaction.defaults().extend([select, modify, new app.Drag()]),
            interactions: ol.interaction.defaults(),
            controls: ol.control.defaults({
                attribution: false
            }),
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              }), 
              //layer
            ],
            target: 'map',
            view: new ol.View({
              projection: 'EPSG:3857',
              //center: [104, 30],
              center: [-11000000, 4600000],
              zoom: 2
            })
          });


      // 加载矢量地图
    function addGeoJSON(src) {
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: (new ol.format.GeoJSON()).readFeatures(src, {     // 用readFeatures方法可以自定义坐标系
                    dataProjection: 'EPSG:4326',    // 设定JSON数据使用的坐标系
                    featureProjection: 'EPSG:3857' // 设定当前地图使用的feature的坐标系
                })
            })
        });
        map.addLayer(layer);
    }

    function loadGeoJson(){
        // 使用ajax获取矢量地图数据
        $.ajax({
            url: 'http://localhost:8080/openlayers/data/geojson/countries.geojson',
            success: function(data, status) {
                // 成功获取到数据内容后，调用方法添加到地图
                addGeoJSON(data);
            }
        });
    }

    </script>

</body>
</html>

默认打开的OSM的地图：
默认打开的Openstreetmap的地图

点击按钮后异步调用geojson之后的结果：
执行异步加载geojson的结果

参考内容：http://anzhihun.coding.me/ol3-primer/ch05/05-09.html

转载自：https://blog.csdn.net/tuoxinquyu/article/details/76081232

相关推荐

Tags: openlayers

You may also like...