美文网首页
openlayers获取地图点击位置的信息

openlayers获取地图点击位置的信息

作者: Spinach | 来源:发表于2022-12-27 08:50 被阅读0次

    1、地图点击事件

    单击:

          /* 监听地图的单击事件,如果点击的是矢量元素则进行相关操作 */
          // selfMap.OlMap===map
          selfMap.OlMap.on('click', (evt) => {
            /* 检测视口中的矢量特征 */
            const featureInfo = selfMap.OlMap.forEachFeatureAtPixel(evt.pixel, (feature, layerVetor) => feature);
            console.log(featureInfo);
            if (featureInfo) {
              // console.log(featureInfo.get('point'));
              dkqj();
            }
          });
    

    双击:

        // mapMode.ol===map
        mapMode.ol.on('dblclick', (a) => {
            /* // eslint-disable-next-line prefer-destructuring
            pointLngLat.latitude = a.frameState.extent[1];
            // eslint-disable-next-line prefer-destructuring
            pointLngLat.longitude = a.frameState.extent[0]; */
            const { extent } = a.frameState;
            /* 范围坐标 */
            geomWKT = `POLYGON((${extent[0]} ${extent[1]},${extent[0]} ${extent[3]},${extent[2]} ${extent[3]},${extent[2]} ${extent[1]},${extent[0]} ${extent[1]}))`;
            tolerance = mapMode.ol.getView().getResolution() * 4;
            getThemeTree();
            drawerVisible.value = !drawerVisible.value;
          });
    

    2、特征要素选择Select

          /* 监听特征元素(消防报警点)的点击事件 */
          const select = new Select();
          selfMap.OlMap.addInteraction(select);
          select.on('select', (e) => {
             // console.log(e.selected[0].get('name')); //已选择的Feature的name属性
            const features = e.target.getFeatures().getArray();
            console.log(features);
            if (features.length > 0) {
              // const feature = features[0];
              console.log('点击特征元素');
              dkqj();
            }
          });
    

    相关文章

      网友评论

          本文标题:openlayers获取地图点击位置的信息

          本文链接:https://www.haomeiwen.com/subject/vymnqdtx.html