openlayers はマップ上をクリックして座標と交差するフィーチャを取得し、座標を入力して交差するフィーチャを取得します。

1. マップ上をクリックして、座標と交差するフィーチャを取得します。

//判断点击的坐标是否在田块内
  var selected = new Style({
    
    
    fill: new Fill({
    
    
      color: 'yellow'
    }),
    stroke: new Stroke({
    
    
      color: 'rgba(255, 255, 255, 0.7)',
      width: 2
    })
  });
  var select: SELECT;
  const isinField = () => {
    
    
    //点击的图层
    let layerarr = hxMap.mapInstance.getLayers().getArray();
    //select
    select = new SELECT({
    
    
      condition: click,
      style: selected,
      layers: [layerarr[1]]
    });
    hxMap.mapInstance.addInteraction(select);
    select.on('select', (e: any) => {
    
    
      let features = e.target.getFeatures().getArray();
      if (features.length > 0) {
    
    
        setisinfield(true);
        //删除上一个田块样式
        clearselectstyle();
        //重新设置样式
        features[0].setStyle(selectFieldStyle(features[0]));
        features[0].setId('selectfeature');
        formRef.setFieldsValue({
    
     landCode: features[0].code });
      } else {
    
    
        setisinfield(false);
        message.error('设备点不位于田块内！');
      }
    });
  };

map.on('click', function (e) {
    
    
  const viewResolution = map.getView().getResolution();
  const url = dFarmlandLayer.getSource().getFeatureInfoUrl(
    e.coordinate, viewResolution, 'EPSG:4326',
    {
    
    
      'INFO_FORMAT': 'application/json',
    });
  fetch(url, {
    
    
    method: 'GET',
    mode: 'cors'
  }).then(function (response) {
    
    
    return response.json();
  }).then(function (json) {
    
    
    if(json.features.length==0)return;
    const features = new GeoJSON().readFeatures(json);
    console.log(features[0].getGeometry().getCoordinates().join(' '));
    vectorSource.clear();
    vectorSource.addFeatures(features);
    //map.getView().fit(vectorSource.getExtent());//缩放到查询出的feature
  });
});

2. 交差するフィーチャを取得するための座標を入力します。getCountByFarmCodeインターフェイスを使用して、ここでフィールドの総数を取得するには、getFeatureAtCooperative(
coodyne) メソッドを使用します。これは、ページが読み込まれたばかりのときは、レイヤーの要素をレンダリングできないためです。
非同期リクエスト メソッドが「時間を延長する」ために使用され、フィーチャの実際の数が結果と一致する場合、それはすべてのフィーチャが読み込まれていることを意味し、getFeatureAtCoowned は空になりません。

//输入的坐标，判断其所属田块并让其高亮
  const coorinField=(coordinate:any)=>{
    
    
    let layerarr = hxMap.mapInstance.getLayers().getArray();
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
    const {
    
     code } = userInfo.ffarmRespVO;
    getCountByFarmCode({
    
    farmCode:code}).then((res)=>{
    
    
       let features_=layerarr[1].getSource().getFeatures()
       if(features_.length=res.dcount){
    
    
        let features=layerarr[1].getSource().getFeaturesAtCoordinate(coordinate)
        if(features.length>0){
    
    
          //删除上一个田块样式
          clearselectstyle()
          //重新设置样式
          features[0].setStyle(selectFieldStyle(features[0]));
          features[0].setId('readfeature');
          formRef.setFieldsValue({
    
     landCode: features[0].code });
        }else{
    
    
          message.error("坐标不位于田块内！")
        }
       }     
    })
   }