【openlayers框架学习】十五：事件监听与交互功能

openlayers进阶

40 事件监听

map.getView().on("change:resolution", function(e){
   
   
    let zoom = this.getZoom();
    if(zoom>10){
   
   
      cityLayer.setVisible(false);
      drawLayer.setVisible(false);
    }else{
   
   
      cityLayer.setVisible(true);
      drawLayer.setVisible(true);
    }

  });

41 openlayers地图点击事件

//点击地图 弹出popup
  map.on('click',function(e){
   
   
    // const coordinate = e.coordinate;
    // let features = map.getLayers().getFeaturesAtCoordinate(coordinate);
    const pixel = e.pixel;
    const features = map.getFeaturesAtPixel(pixel);
    if(features.length > 0 && features[0].get('name')){
   
   
      const center = features[0].get("center");
      const name = features[0].get('name');
      popup = new Overlay({
   
   
        element:document.getElementById("popup"),
      });
      popup.setPosition(center);
      popupContent.value = `
      <p>当前城市是${
     
     name}</p>
      <p>经度：${
     
     center[0]}</p>
      <p>纬度：${
     
     center[1]}</p>`
      map.addOverlay(popup);
    }else{
   
   
      if(popup){
   
   
        popup.setPosition(undefined);
      }
    }
  });

App.vue

<template>
  <div class="top-nav">
    <div class="city-choose">{
  
  { city }}</div>
    <el-input v-model="searchCity" style="width:240px" size="large" placeholder="请输入城市名称" :prefix-icon="Search" @keyup.enter="handleSearchCity"></el-input>
    <el-select v-model="drawType" placeholder="请选择绘制图形" style="width: 240px;"  @change="handleDrawType">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select v-model="iconType" placeholder="请选择图标类型" style="width: 240px;">
      <el-option v-for