vue结合openlayer的使用

geoserver中imageWMS添加popup弹框

查看图片图层包含的图块信息：

1. 弹窗；

2. 添加基础地图，以及点击图块的样式

//弹框
        let container = document.getElementById('popup');
        this.content = document.getElementById('popup-content');
        this.closer = document.getElementById('popup-closer');
        this.propertyList = document.getElementById('propertyList');
        this.overlay = new Overlay({
          element: container,
          autoPan: true,
          autoPanAnimation: {
            duration: 250,
          },
        })
        let content = this.content
        let closer = this.closer
        let overlay = this.overlay
        closer.onclick = function() {
          overlay.setPosition(undefined);
          closer.blur();
          _wfs_source.clear();
          return false;
        };
//基础地图
        this.map = new Map({
          target: "map",
          overlays: [overlay],
          interactions: new defaults({
            doubleClickZoom: false,
          }).extend([new DragRotateAndZoom()]),
          layers: [
            new TileLayer({
              source: new TileArcGISRest({
                url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
              }),
              // zIndex: 1
            })
          ],
          view: new View({
            projection: "EPSG:4326", //使用这个坐标系
            center: [108.236, 36.438], //西安
            zoom: 7.5
          })
        });

        //创建矢量图层点击样式
        this._wfs_source = new VectorSource();
        let _wfs_source = this._wfs_source
        this._wfs_layer_ = new VectorLayer({
          source: _wfs_source,
          style: new Style({
            fill: new Fill({
              //填充样式
              color: "rgba(255, 255, 255, 0.2)",
            }),
            stroke: new Stroke({
              //线样式
              color: "#0099FF",
              width: 3,
            }),
          }),
          visible: true,
          code: true,
          zIndex: 50,
        });
        this.map.addLayer(this._wfs_layer_);

3. 点击图块获取属性；

// 地图中点击获取属性
        self_map.on("singleclick", function(evt) {
          let view = self_map.getView();
          let viewResolution = view.getResolution();
          let clicks = [];
          self_map.forEachLayerAtPixel(evt.pixel, function(l, b) {
            if (l.get("click") && l.getVisible()) {
              clicks.push(l);
            }
          });

          try {
            var l = clicks.shift();
            var url = l
              .getSource()
              .getFeatureInfoUrl(
                evt.coordinate,
                viewResolution,
                view.getProjection(), {
                  INFO_FORMAT: "application/json"
                }
              );
            axios(url).then(data => {
              console.log(data.data.features[0].properties.Code)
              // 获取的矢量的属性
              let property = data.data.features[0].properties;
              closer.click();
              // 给选中的区域添加边界
              let feature = new GeoJSON().readFeature(
                data.data.features[0].geometry
              );
              _wfs_source.addFeature(feature);
              /***添加完成***/
              // 获取点击图层某处地区的code
              let resdata = JSON.parse(sessionStorage.getItem('resdata'));
              resdata.code = property.Code;
              let innerhtml = "111111111111111111111111";
              _this.propertyList.innerHTML = innerhtml;
              overlay.setPosition(evt.coordinate);
            }).catch(err => {
              console.log(err)
            });
          } catch (e) {
            console.log("未点到数据");
          }
        });