OpenLayers geojson 进行展示矢量标签展示

效果预览：

在线沙盒地址：https://codesandbox.io/s/olditucontrals-dnvcl

GeoJSON：

GeoJSON是一种对各种地理数据结构进行编码的格式，支持下面几何类型：点、线、面、多点、多线、多面和几何集合。（自己百度）

推荐工具地址：http://geojson.io 在线矢量图，可以查看个格式

GeoJSON特征集合：
let geojsonObject={
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [102.0, 0.5]
            },
            "properties": {
                "prop0": "value0"
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]]
            },
            "properties": {
                "prop0": "value0",
                "prop1": 0.0
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]]
            },
            "properties": {
                "prop0": "value0",
                "prop1": {
                    "this": "that"
                }
            }
        }
    ]
}

 

样式控制

import {Fill, Stroke, Circle, Style} from 'ol/style';

let  styleGeoJson =
        new Style({
            stroke: new Stroke({
                width: 5,
                color: 'red'
            }),
            fill: new Fill({
                color: '#f5f5f5'
            }),
            text: new Text({
                text:'ceshi',
                font: '26',
                fill: new Fill({
                    color: '#f5f5f5'
                }),
            })
        });

fill：填充样式

image：图片样式

text：文字样式

样式与数据geojson组合

var vectorPolygons = new VectorLayer({
  source:  new VectorSource({
        features: (new GeoJSON()).readFeatures(geojsonObject)
  }),
  style: styleGeoJson
});

map.addLayers(vectorPolygons)