vue结合openlayers加载geojson，并根据不同级别渲染不同颜色

vue结合openlayers加载geojson，并根据不同级别渲染不同颜色

不同级别不同颜色样式的设置（面）

 let styleFunction = function(feature) {
                let dn = feature.get('dn');
                if (dn == 1) {
                  return new Style({
                    stroke: new Stroke({
                      color: '#5DC9DA',
                      width: 1,
                    }),
                    fill: new Fill({
                      color: '#5DC9DA',
                    }),
                  })
                } else if (dn == 2) {
                  return new Style({
                    stroke: new Stroke({
                      color: '#00758A',
                      width: 1,
                    }),
                    fill: new Fill({
                      color: '#00758A',
                    }),
                  })
                } 
                }

解读geojson并加入图层中

let vectorSource = new VectorSource({
              features: new GeoJSON().readFeatures(res.data.data),
            });
let vectorLayer1 = new VectorLayer({
              source: vectorSource,
              style: styleFunction,
              zIndex: 10,
            });
            _this.map.addLayer(vectorLayer1);

图层矢量点击高亮

const overlay = new Overlay({
              element: container,
              autoPan: true,
              autoPanAnimation: {
                duration: 250,
              },
            });
 const selectFocus = new Select({
              condition: EventType.click,
              layers: [_this.vectorLayer1],
              hitTolerance: 5,
              style: new Style({
                fill: new Fill({
                  color: "rgba(6, 255, 193, 0.8)",
                }),
                stroke: new Stroke({
                  color: "#ffcc33",
                  width: 1,
                }),
                image: new CircleStyle({
                  radius: 5,
                  fill: new Fill({
                    color: '#4CB49C',
                  }),
                  stroke: new Stroke({
                    color: '#4CB49C',
                    width: 3
                  }),
                })
              }),
            });
            _this.map.addInteraction(selectFocus);

selectFocus.on("select", function(e) {
              if (e.selected.length > 0) {
                let properties = e.selected[0].getProperties();
                console.log(properties)
                let siteName = properties.city;
                let coordinate
                if (data.cid == 1) {
                  coordinate = e.selected[0].getGeometry().flatCoordinates;
                } else {
                  coordinate = e.mapBrowserEvent.coordinate;
                  properties.area = properties.area.toFixed(2);
                }
                container.style.display = 'block';
                _this.selectData = properties;
                overlay.setPosition(coordinate);
                _this.map.addOverlay(overlay);
              } else if (e.deselected.length > 0) {
                overlay.setPosition(undefined);
                return false;
              }
            });