import 'ol/ol.css';
import Circle from 'ol/geom/Circle';
import Feature from 'ol/Feature';
import GeoJSON from 'ol/format/GeoJSON';
import { Point } from 'ol/geom'
import { Circle as CircleStyle, Fill, Stroke, Style, Text, Icon } from 'ol/style';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
Map为初始化地图
init() {
const _that = this
if (_that.vectorLayer) {
`_that.vectorLayer.getSource().clear()`
}
// 样式start
const image = new CircleStyle({
`radius: 5,`
`fill: null,`
`stroke: new Stroke({ color: 'red', width: 1 }),`
});
const styles = {
`'Point': new Style({`
`image: image,`
`}),`
`'LineString': new Style({`
`stroke: new Stroke({`
`color: '#f8c93c',`
`width: 1,`
`}),`
`}),`
`'MultiLineString': new Style({`
`stroke: new Stroke({`
`color: 'green',`
`width: 1,`
`}),`
`}),`
`'MultiPoint': new Style({`
`image: image,`
`}),`
`'MultiPolygon': new Style({`
`stroke: new Stroke({`
`color: 'yellow',`
`width: 1,`
`}),`
`fill: new Fill({`
`color: 'rgba(255, 255, 0, 0.1)',`
`}),`
`}),`
`'Polygon': new Style({`
`stroke: new Stroke({`
`color: 'blue',`
`// lineDash: [4],`
`width: 2,`
`}),`
`fill: new Fill({`
`color: 'rgba(0, 0, 255, 0.1)',`
`}),`
`}),`
`'GeometryCollection': new Style({`
`stroke: new Stroke({`
`color: 'magenta',`
`width: 2,`
`}),`
`fill: new Fill({`
`color: 'magenta',`
`}),`
`image: new CircleStyle({`
`radius: 10,`
`fill: null,`
`stroke: new Stroke({`
`color: 'magenta',`
`}),`
`}),`
`}),`
`'Circle': new Style({`
`stroke: new Stroke({`
`color: 'red',`
`width: 2,`
`}),`
`fill: new Fill({`
`color: 'rgba(255,0,0,0.2)',`
`}),`
`}),`
};
// 样式end
// 获取geojson Type设置样式
const styleFunction = function (feature) {
`return styles[feature.getGeometry().getType()];`
};
// 数据Geojson
const saveFeatures = []
。。。。
// 配置Geojson数据
const geojsonObject = {
`'type': 'FeatureCollection',`
`'crs': {`
`'type': 'name',`
`'properties': {`
`'name': 'EPSG:4326',`
`},`
`},`
`features: saveFeatures`
};
// 配置矢量容器数据
const vectorSource = new VectorSource({
`features: new GeoJSON().readFeatures(geojsonObject),`
});
// 创建矢量层
_that.vectorLayer = new VectorLayer({
`source: vectorSource,`
`style: styleFunction,`
`zIndex: 900,`
});
Map.addLayer(_that.vectorLayer)
},
