openlayers3异步调用geojson， Ajax

发布时间：2020-12-16 03:23:20 所属栏目：百科来源：网络整理

导读：!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

<!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.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的地图：

点击按钮后异步调用geojson之后的结果：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!