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)