openlayers

画线，画园，查用feature使用

      let route = new LineString(arr) //  画线1
      let route = new Polygon(arr) //  画线2
      let feature = new Feature(
          geometry: route
      )
      feature.setId('rada_id','xxx')  // 设置id 便于对他操作

图层操作

      let layer = new VectorLayer({
          title: 'xxx',  // 通过title获取对应图层
          source: new VectorSource(),
          zIndex: 52,   // 图层层级
      })
      // 获取图层
      let layer = mapInstance.getLayers().getArray().forEach( item => {
          if(item.get('title) === title){
              return item // item 为指定图层
          }
      })
      // 从指定图层获取feature
      let feature = layer.getSource().getFeatureById('id')
      // 指定图层删除feature
      layer.getSource().remove(feature)
      // 动态修改feature的图标及文本样式
      let features = layer.getSource().getFeatures()
      features.forEach(ele => {
          ele.getStyle().setImage(
              new Icon({
                  src: '',
                  scale: 0
,              })
          )
          ele.getStyle().getText().setText('xxx')
      })

地图控件操作

    //动画平移到指定位置
    map.getView().animate({
        center: fromLonLat([long,lat]),
        zoom: zoom,
    })

openlayer 结合turf.js图形算法库实现图形并集

    drawCircle() {
      var options = { units: "meters" };
      var circle = turf.circle([112, 28], 10000, options);
      var circle2 = turf.circle([112, 27.9], 10000, options);
      var union = turf.union(circle, circle2);
      var feature = new GeoJSON().readFeature(circle, {
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:4326",
      });
      var feature2 = new GeoJSON().readFeature(circle2, {
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:4326",
      });
      var feature_union = new GeoJSON().readFeature(union, {
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:4326",
      });
      feature.setStyle(
        new Style({
          fill: new Fill({
            color: "red",
          }),
          stroke: new Stroke({
            width: 1, //边界宽度
            color: "#b0b5bc", //边界颜色
          }),
        })
      );
      let layer = new VectorLayer({
        source: new VectorSource({
          features: [feature_union],
          name: "circle",
        }),
      });
      this.mapInstance.addLayer(layer);
    },