Openlayers零基础教程【6】geojson实现点要素

1. geojson定义

geojson 数据是矢量数据，是包含地理信息的json数据，格式是以key:value的形式存在的。后缀以 geojson结尾

2. geojson设置一个点要素

本篇内容我们主要介绍使用geojson设置一个点要素，效果如下图所示。

3. 实现步骤：

3.1. 创建geojson数据

/* 创建geojson数据 */
var data = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [114.30, 30.50]
      }
    }
  ]
}

3.2. 将数据添加到矢量数据源

/* 将数据添加到矢量数据源中 */
var source = new ol.source.Vector({
    features: new ol.format.GeoJSON().readFeatures(data)
});

3.3. 设置矢量图层

/* 设置矢量图层 */
var layer = new ol.layer.Vector({
    source: source
});

3.4. 添加矢量图层到地图容器

/* 添加矢量图层到地图容器 */
map.addLayer(layer);

3.5. 给要素添加属性

const style = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({
            color: "#ff2d51"
        })
    })
});
layer.setStyle(style);

3.6. 给点要素添加描边：

stroke: new ol.style.Stroke({
    color: "#333"
})

代码示例：

var data = { 
  type: "FeatureCollection", 
  features: [ 
    { 
      type: "Feature", 
      geometry: { 
        type: "Point", 
        coordinates: [114.30, 30.50] 
      } 
    } 
  ] 
} 
var source = new ol.source.Vector({ 
  /* 将geojson数据设置给实例数据源 */ 
  features: new ol.format.GeoJSON().readFeatures(data) }) 
var layer = new ol.layer.Vector({ 
  source 
}) 
map.addLayer(layer); 

设置样式

const style = new ol.style.Style({       
  image: new ol.style.Circle({ 
    radius: 8, 
    fill: new ol.style.Fill({ 
      color: "#ff2d51" 
    }), 
    stroke: new ol.style.Stroke({ color: '#333', 
                                  width: 2 
                                }) 
  }), 
}) 
layer.setStyle(style); 

4. 总结：

本篇教程我们学习了geojson的基本概念以及如何利用geojson设置点要素，下一篇我们继续学习如何建立线要素。

需要本视频教程的找博主免费领取。