[openlayers基础]从入门到实习（2）

1.主要是使用geoserver，实现geotiff和shp的调用，以及加载geojson数据。

 shp和geotiff只有发布时不同，调用只需改LAYERS或者FORMAT

const source = new ImageWMS({
          ratio: 1,
          url: "http://localhost:8080/geoserver/test/wms",
          crossOrigin: "anonymous",
          params: {
            LAYERS: "test:contour200",
            FORMAT: "image/png",
            VERSION: "1.1.1",
            exceptions: "application/vnd.ogc.se_inimage",
          },
        });
        this.contour= new ImageLayer({
          source: source,
        });
    this.map.addLayer(this.contour);

调用geojson：可以修改style。

const source = new VectorSource({
      url: "road.json",
      format: new GeoJSON(),
    });
    this.road = new VectorLayer({
      source: source,
      style: function(feature) {
    var style = new Style({
      stroke: new Stroke({ color: 'red', width: 2 }),
      fill: new Fill({ color: 'rgba(150,20, 0, 0.7)' })
    });
    return style;
  }

    });
    this.map.addLayer(this.road);

目前遇到的问题是不会切片，起初加载的是一个市的geotiff，但有一个多G，加载非常慢，遂换成了一个县，是要解决的。

2.框选显示范围

先画框 （Draw）

const box = createBox();
this.selectInteraction = new Draw({
  type: 'Circle',
  geometryFunction: box,
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2
    })
  })
});
this.map.addInteraction(this.selectInteraction);

drawend时获取几何图形的extent，把图层范围设置为这个extent 

this.selectInteraction.on('drawend', function(event) {
  const extent = event.feature.getGeometry().getExtent();
  _this.dem.setVisible(true);
  // 根据框选范围设置高程图层的可见性
  _this.dem.setExtent(extent);
});

使用方法getGeometry().getExtent()         setExtent（）

new VectorSource（

        url：xxx,

      format: new GeoJSON(),

）             

new VectorLayer（） 

new ImageWMS（）   new ImageLayer

写于 613