如何在geojson中使用每个坐标添加名称和描述并在弹出窗口中显示

时间:2016-08-03 10:05:56

标签: openlayers-3

如何在geojson中为每个坐标添加名称和描述,并在每个标记点击时弹出窗口

我的Json代码

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "MultiPoint",
        "coordinates": [
          [
            -98.1298828125,
            40.59727063442027
          ],
          [
            -97.88818359375,
            41.32732632036622
          ],
          [
            -97.44873046875,
            40.52215098562377
          ]
        ]
      }
    }
  ]
}



// we change this on input change
// tiles for background
var raster = new ol.layer.Tile({
    source: new ol.source.TileJSON({
        url: 'http://api.tiles.mapbox.com/v3/tschaub.mp9mlp0b.jsonp'
    })
});

// vector layer
var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'https://raw.githubusercontent.com/mapbox/cover-bench/89a8da794ef8c9434b8745d306f1a1b590bba97a/fixtures/multipoint.geojson'
    }),
    style: [
    new ol.style.Style({
        image: new ol.style.Icon({
            src: 'http://api.tiles.mapbox.com/mapbox.js/v2.1.9/images/marker-shadow.png',
            anchor: [13 / 41, 1]
        })
    }),
    new ol.style.Style({
        image: new ol.style.Icon({
            src: 'http://api.tiles.mapbox.com/mapbox.js/v2.1.9/images/marker-icon.png',
            anchor: [0.5, 1]
        })
    })]
});

// render the map    
var map = new ol.Map({
    target: 'map',
    renderer: 'canvas',
    layers: [raster, vector],
    view: new ol.View({
        center: [-10807016, 5029327],
        zoom: 8
    })
});

<script src="http://openlayers.org/en/master/build/ol.js"></script>
<div id="map" class="map"></div>
&#13;
&#13;
&#13;

0 个答案:

没有答案