<!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