openlayers点击地图获取与坐标相交的要素feature、输入坐标获取与其相交的要素

最新推荐文章于 2023-12-13 11:32:46 发布

定位算法工程师

最新推荐文章于 2023-12-13 11:32:46 发布

阅读量1.1k

点赞数

分类专栏： react openlayers GIS 文章标签： react.js typescript

本文链接：https://blog.csdn.net/qq_37967853/article/details/129580669

版权

react 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

GIS

15 篇文章 1 订阅

订阅专栏

openlayers

8 篇文章 0 订阅

订阅专栏

该代码段主要展示了如何在地图应用中实现用户点击获取与坐标相交的要素，并通过输入坐标判断所属田块。它使用了图层交互、样式设置以及异步请求来确保图层完全加载后进行操作。同时，存在错误处理，如坐标不在田块内的情况。

摘要由CSDN通过智能技术生成

1.点击地图获取与坐标相交的要素feature

//判断点击的坐标是否在田块内
  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.输入坐标获取与其相交的要素
通过getFeaturesAtCoordinate(coordinate)方法
此处运用 getCountByFarmCode接口获取田块总数量，原因在于页面刚加载时，图层的要素不能马上渲染完毕，通过异步请求方式“延长时间”，当实际要素数量与结果一致时代表要素全部加载完毕，这时getFeaturesAtCoordinate就不会为空。

//输入的坐标，判断其所属田块并让其高亮
  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("坐标不位于田块内！")
        }
       }     
    })
   }