使用openlayer添加图层

需求

项目开发使用openlayer  给map对象添加图层示例

---

代码示例

1.引入

import ol from "openlayers"

2.创建地图对象

this.mapOne = new ol.Map({
	target: "mapOne",
    controls: ol.control
	    .defaults({
		attributionOptions: {
		    collapsed: false
		  }
		})
		.extend([new ol.supermap.control.Logo()]),
			view: this.allview
		});

3.后台数据格式

---

4.创建图层

let vectorLayer = new ol.layer.Vector({
		source: new ol.source.Vector({
			features: "",
		}),
		style: function (feature) {
		let style = new ol.style.Style({
		    stroke: new ol.style.Stroke({
					    color: "#E80000",
						width: 2,
					}),
					fill: new ol.style.Fill({
					    color: "rgba(0,0,0,0)",
					    }),
					});
						return style;
					},
				});
		vectorLayer.set("id", "patrol");

 5.给图层添加feature

let format = new ol.format.WKT();
let feature = format.readFeature(this.wtkList);
	feature = new ol.Feature({
			geometry: feature.getGeometry(),
		});
	vectorLayer.getSource().addFeature(feature);

6.将图层添加到map中去

that.mapOne.addLayer(vectorLayer);

7.以上图层已添加完成，下面内容是设置图层显示范围.

以多面为例

var poly = feature.getGeometry();

that.mapOne.getView().fit(poly.getExtent())

mapOne.getView()与fit 参照官网https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fithttps://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit

以上内容只是随手日记，能帮上大家就最好，没帮上也勿怪