ol鼠标点击显示弹框、移入标记鼠标变手型

已于 2023-03-21 13:57:07 修改
阅读量237 收藏
点赞数 1
分类专栏： openlayers相关 文章标签： css 前端 javascript
于 2023-03-21 13:46:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssy001128/article/details/129686755
版权

 弹框盒子

<template>
    <div id="popup" class="ol-popup">
      <div class="pophead">
        <!-- position: absolute;top: 5px;left: 8px; -->
        <div id="popup-title" class="popup-title"></div>
        <p id="popup-closer" class="ol-popup-closer" style="color:#8e908c;">
          <img src="../../assets/img/image/ic_guanbi.png" alt srcset />
        </p>
      </div>
      <div class="popup-info" id="popup-info"></div>
      <div id="popup-content" style="padding: 10px"></div>
    </div>
</template>

弹框样式

<style lang="scss" scoped>
  /*设置弹出框样式*/
.ol-popup {
  position: absolute;
  background-color: rgba(249, 252, 255, 0.95);
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  // padding: 15px;
  // border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
  .pophead {
    display: flex;
    background: url('../../assets/img/image/bg_title_tucengkongzhi.png')
      no-repeat;
    // background-size: 601px 43px;
    width: 100%;
    height: 43px;
    line-height: 43px;
    justify-content: space-between;
    .popup-title {
      font: bold 15px sans-serif;
      color: #000000;
      display: flex;
      justify-content: space-between;
      width: 90%;
      height: 43px;
      line-height: 43px;
      padding-left: 38px;
      p {
        width: 43px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.popup-info {
  display: flex;
  align-items: center;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: #eeeeee;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  width: 10%;
  text-align: right;
  text-decoration: none;
  cursor: pointer;
  font-style: normal;
  img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
  }
}
// .ol-popup-closer:after {
//     content: "✖";
// }
</style>

鼠标点击显示弹框内容

<script>
    mapOnclick() {
      let _this = this
      //拿到弹出框元素
      var container = document.getElementById("popup");
      //拿到弹出框内容元素
      var content = document.getElementById("popup-content");
      var contentTitle = document.getElementById("popup-title");
      var contentInfo = document.getElementById("popup-info");

      //拿到弹出框关闭元素
      var popupCloser = document.getElementById("popup-closer");

      //创建弹出框容器
      var overlay1 = new Overlay({
        //设置弹出框的容器
        element: container,
        //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
        autoPan: true,
        autoPanAnimation: {
          duration: 250
          //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
        }
      });
      _this.map.on('click', (e) => {
        var pixel = _this.map.getEventPixel(e.originalEvent);
        _this.map.forEachFeatureAtPixel(pixel, function (feature) {
          var attr = feature.getProperties().properties;
          if(feature && attr){
            if(attr.valueName === 'shuiku1' || attr.valueName === 'shuiku2'){
              const params = {
                geoId: attr.id
              }
              let info = '信息介绍'
              getMapRsrDetail(params).then(res => {
                if (res.code === 1) {
                  tMessager.$emit('reservoir', res)
                  let title = `
                    <p style="font-size: 18px;color: #FFFFFF;">${res.data.rsnm ? res.data.rsnm : ''}</p>
                    <p>${res.data.address ? res.data.address : ''}</p>
                  `
                  let contentInfos = `
                    <img src="${infoImg}" alt="" srcset="" style=" margin: 0 5px 0 30px;width: 20px;height: 20px;">
                    <p style="height: 40px;line-height: 40px;font-size: 16px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #333333;">${info}</p>
                  `
                  let contentData = `
                    <div style="display: flex;justify-content: space-between;height: 176px;width: 100%;">
                      <p style="height: 100%;overflow-y: auto;width: 336px;line-height: 30px;text-indent: 25px;">${res.data.rsov ? res.data.rsov : ''}</p>  
                      <img src="${res.data.previewUrl ? res.data.previewUrl : ''}" style="width:244px;height:176px">
                    </div>
                    <div style="display: flex;flex-wrap: wrap;margin-top: 14px;">
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:336px;line-height:30px;color: #666666;">中文名</p>  
                        <p style="width:224px;line-height:30px;color: #000000;">${res.data.rsnm ? res.data.rsnm : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:336px;line-height:30px;color: #666666;">总库容</p>  
                        <p style="width:224px;line-height:30px;color: #000000;">${res.data.ttstcp ? res.data.ttstcp : ''}亿m3</p>  
                      </div>
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:336px;line-height:30px;color: #666666;">主坝坝型</p>  
                        <p style="width:224px;line-height:30px;color: #000000;">${res.data.dmtpNm ? res.data.dmtpNm : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:336px;line-height:30px;color: #666666;">主坝最大坝高</p>  
                        <p style="width:224px;line-height:30px;color: #000000;">${res.data.maxdmhg ? res.data.maxdmhg : ''}m</p>  
                      </div>
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:336px;line-height:30px;color: #666666;">行政区划类型</p>  
                        <p style="width:224px;line-height:30px;color: #000000;">${res.data.rsnm ? res.data.rsnm : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:336px;line-height:30px;color: #666666;">工程规模</p>  
                        <p style="width:224px;line-height:30px;color: #000000;">${res.data.prscNm ? res.data.prscNm : ''}</p>  
                      </div>
                    </div>
                  
                  `
                  var coodinate = e.coordinate;
                  contentTitle.innerHTML = title
                  contentInfo.innerHTML = contentInfos
                  contentInfo.style = "display:flex"
                  content.innerHTML = contentData
                  overlay1.setPosition(coodinate);
                  _this.map.addOverlay(overlay1);

                }
              })
            }
            if (attr.valueName === 'shuizha') {
              const params = {
                geoId: attr.id
              }
              getMapSluDetail(params).then(res => {
                tMessager.$emit('reservoir', res)
                let title = `
                    <p style="font-size: 18px;color: #FFFFFF;">${res.data.slnm ? res.data.slnm : ''}</p>
                    <p>${res.data.address ? res.data.address : ''}</p>
                  `
                let contentData = `
                  <div style="display: flex;">
                    <div style="width: 253px;height: 190px;margin-right: 10px;">
                      <img src="${res.data.previewUrl ? res.data.previewUrl : ''}" style="width:100%;height:100%">
                    </div>
                    <div style="display: flex;flex-wrap: wrap;flex:1">
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="水闸名称">水闸名称</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.slnm ? res.data.slnm : ''}">${res.data.slnm ? res.data.slnm : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="行政区划">行政区划</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.countyNm ? res.data.countyNm : ''}">${res.data.countyNm ? res.data.countyNm : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="所在河流(蓄滞洪区)名称">所在河流(蓄滞洪区)名称</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.rvrnm ? res.data.rvrnm : ''}">${res.data.rvrnm ? res.data.rvrnm : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="水闸类型">水闸类型</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.sltpNm ? res.data.sltpNm : ''}">${res.data.sltpNm ? res.data.sltpNm : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="过闸流量(m3/s)">过闸流量(m3/s)</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.dslcfl ? res.data.dslcfl : ''}">${res.data.dslcfl ? res.data.dslcfl : ''}m3/s</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="管理单位">管理单位</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.mnun ? res.data.mnun : ''}">${res.data.mnun ? res.data.mnun : ''}</p>  
                      </div>
                    </div>
                  </div>
                `
                var coodinate = e.coordinate;
                contentTitle.innerHTML = title
                contentInfo.style = "display:none"
                content.innerHTML = contentData
                overlay1.setPosition(coodinate);
                _this.map.addOverlay(overlay1);
              })
            }
            if (attr.valueName === 'difang') {
              const params = {
                geoId: attr.id
              }
              getMapLevDetail(params).then(res => {
                let title = `
                    <p style="font-size: 18px;color: #FFFFFF;">${res.data.lvnm ? res.data.lvnm : ''}</p>
                  `
                let contentData = `
                  <div style="display: flex;">
                    <div style="width: 253px;height: 190px;margin-right: 10px;">
                      <img src="${res.data.previewUrl ? res.data.previewUrl : ''}" style="width:100%;height:100%">
                    </div>
                    <div style="display: flex;flex-wrap: wrap;flex:1">
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="堤防名称">堤防名称</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.lvnm ? res.data.lvnm : ''}">${res.data.lvnm ? res.data.lvnm : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="堤防长度(m)">堤防长度(m)</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.lvlen ? res.data.lvlen : ''}">${res.data.lvlen ? res.data.lvlen : ''}m</p>  
                      </div>
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="起点">起点</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.startAddress ? res.data.startAddress : ''}">${res.data.startAddress ? res.data.startAddress : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="终点">终点</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.endAddress ? res.data.endAddress : ''}">${res.data.endAddress ? res.data.endAddress : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="起点桩号">起点桩号</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.lvinch ? res.data.lvinch : ''}">${res.data.lvinch ? res.data.lvinch : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #666666;" title="终点桩号">终点桩号</p>  
                        <p style="width:280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height:30px;color: #000000;" title="${res.data.lvtrch ? res.data.lvtrch : ''}">${res.data.lvtrch ? res.data.lvtrch : ''}</p>  
                      </div>
                    </div>
                  </div>
                `
                var coodinate = e.coordinate;
                contentTitle.innerHTML = title
                content.innerHTML = contentData
                contentInfo.style = "display:none"
                overlay1.setPosition(coodinate);
                _this.map.addOverlay(overlay1);
              })
            }
            if (attr.valueName === 'xingbian') {
              console.log(attr);
              const params = {
                stcd: attr.stcd
              }
              _this.getTotalInfoData(params, e, contentTitle, content, overlay1, attr, '', contentInfo)

            }
            if (attr.valueName === 'shenya') {

              let info = '监测信息'
              pressureList().then(res => {
                if (res.code === 1) {
                  let dataJson = JSON.parse(res.data[0].jsonData)
                  const colors = ['#5470C6', '#91CC75', '#EE6666'];
                  let contentInfos = `
                    <img src="${infoImg}" alt="" srcset="" style=" margin: 0 5px 0 20px;width: 20px;height: 20px;">
                    <p style="height: 40px;line-height: 40px;font-size: 16px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #333333;">${info}</p>
                  `
                  let title = `
                    <p style="font-size: 18px;color: #FFFFFF;">${res.data[0].stnm ? res.data[0].stnm : ''}</p>
                  `
                  let contentData = `
                  <div style="display: flex;flex-wrap: wrap;">
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:300px;line-height:30px;color: #666666;">闸坝名称</p>  
                        <p style="width:274px;line-height:30px;color: #000000;">${res.data[0].stnm ? res.data[0].stnm : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:300px;line-height:30px;color: #666666;">监控时间</p>  
                        <p style="width:274px;line-height:30px;color: #000000;">${res.data[0].tm ? res.data[0].tm : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;margin-right: 10px;justify-content: space-between;">
                        <p style="width:300px;line-height:30px;color: #666666;">桩号</p>  
                        <p style="width:274px;line-height:30px;color: #000000;">${res.data[0].stationNumber ? res.data[0].stationNumber : ''}</p>  
                      </div>
                      <div style="display: flex;width: 48%;justify-content: space-between;">
                        <p style="width:300px;line-height:30px;color: #666666;">断面名称</p>  
                        <p style="width:274px;line-height:30px;color: #000000;">${res.data[0].sectionName ? res.data[0].sectionName : ''}</p>  
                      </div>
                      <div id="shenYaEcharts" style="width:100%;height:200px">
                    </div>
                  `
                  var coodinate = e.coordinate;
                  contentTitle.innerHTML = title
                  content.innerHTML = contentData
                  contentInfo.innerHTML = contentInfos
                  contentInfo.style = "display:flex"
                  overlay1.setPosition(coodinate);
                  _this.map.addOverlay(overlay1);
                  var myChart = _this.$echarts.init(document.getElementById("shenYaEcharts"));
                  myChart.setOption({
                    color: ['#5470C6', '#91CC75', '#EE6666'],
                    tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                        type: 'cross'
                      }
                    },
                    grid: {
                      right: '20%',
                      bottom: '10%',
                      right: '10%'
                    },

                    legend: {
                      data: ['设计浸润线', '监测值']
                    },
                    xAxis: [
                      {
                        type: 'category',
                        axisTick: {
                          alignWithLabel: true
                        },
                        // prettier-ignore
                        data: dataJson.section
                      }
                    ],
                    yAxis: [
                      {
                        type: 'value',
                        name: '高程',
                        position: 'right',
                        alignTicks: true,
                        offset: -133,
                        axisLine: {
                          show: true,
                          lineStyle: {
                            color: colors[1]
                          }
                        },
                        axisLabel: {
                          formatter: '{value} ml'
                        }
                      },
                      {
                        type: 'value'
                      },
                      {
                        type: 'value',
                        // name: '温度',
                        position: 'left',
                        alignTicks: true,
                        axisLine: {
                          show: true
                        },
                      }
                    ],
                    series: [
                      {
                        name: '1',
                        type: 'bar',
                        yAxisIndex: 2,
                        data: dataJson.bar
                      },

                      {
                        name: '设计浸润线',
                        type: 'line',
                        yAxisIndex: 2,
                        data: dataJson.devise
                      },
                      {
                        name: '3',
                        type: 'line',
                        yAxisIndex: 2,
                        data: dataJson.level
                      },
                      {
                        name: '监测值',
                        type: 'line',
                        yAxisIndex: 2,
                        data: dataJson.monitor
                      }
                    ]
                  })
                  window.addEventListener('resize', () => {
                    myChart.resize()
                  })
                }
              })
            }
          }
        });
      })
      //关闭弹出框操作
      popupCloser.addEventListener('click', function () {
        overlay1.setPosition(undefined);
      });
    },
</script>

鼠标移入标记上，鼠标变手型

<script>
    mapMouse() {
      let _this = this
      _this.map.on('pointermove', e => {
        //鼠标经过箭头变手势，，可以在if的条件中加入指定的图层layerId即可
        let pixel = _this.map.getEventPixel(e.originalEvent);
        let feature = _this.map.forEachFeatureAtPixel(pixel, (feature) => {
          return feature
        })
        if (feature) {
          _this.map.getTargetElement().style.cursor = 'pointer'
        } else {
          _this.map.getTargetElement().style.cursor = ''
        }
      });
    },
</script>

易鹤鹤.
关注
专栏目录
鼠标移入输入框，li列表出现
weixin_43700362的博客
11-16 796
运行结果： 刚打开页面的时候： 鼠标移入的时候： 鼠标选中某一选项的时候，被选中项变黄色（当鼠标划过其他选项的时候，其他选项还是蓝色。），且输入框显示被选中项。 大致思路： 最上面是一个输入框， 下面是ul列表（隐藏） ，当鼠标进去输入框的时候，ul列表显示。 当鼠标划过每一个li的时候，li背景色蓝色，鼠标变手型。 当点击页面任意地方的时候，ul列表再次隐藏。 代码如下： <!DO...
VUE学习（七） 自定义列表鼠标移入变色，点击变色（仿el-table实现）
n009ww的博客
11-08 4706
常规列表数据用elementUI的el-table标签即可实现，但有些需要自定义列表数据样式的，则需要手写，这样如何做出和el-table一样的效果呢？一下代码可以实现 页面渲染 <div class="list" v-if="tableDate.length" v-infinite-scroll="load"> <div :cla...
鼠标经过自动弹出提示框
zhuyi的博客
03-09 9077
思路：首先写DOM结构，先编写若干div，隐藏弹窗部分，设置display为none，添加完样式后，通过js来判断是否鼠标经过，当鼠标经过，则触发弹出提示框事件，也就是将弹窗部分的display设置为block，鼠标移开，则将弹窗的display改为原始的none值。html<div class="wrap"> <div class="box"> <img src="#" a
openlayers 地图上绘制区域悬浮弹窗实现跟随鼠标移动
zhongguogangkou的博客
04-23 2759
今天做了一个功能，是基于openlayers在地图上绘制区域，并实现鼠标在区域内悬浮弹出指示窗，指示窗随着鼠标的移动而移动。 我采用的是ol.Overlay方式： 首先新加一个overlay。 function addOverlay(center){ document.getElementById('overlay').style.display = "block"; //此处的overlay...
鼠标拖动弹出框移动的方法封装
zuo_kaizheng的博客
07-08 322
js封装方法
如何用鼠标点击页面中的任意标签，弹出该标签的名称．
Honey_tianming的博客
10-26 1310
话不多说，看代码 &lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;鼠标点击页面中的任意标签，alert该标签的名称&lt;/title&gt; &lt;style&gt; .box{ height: 100px; background:red;
JS实现的鼠标跟随代码(卡通手型点击效果)
10-23
主要介绍了JS实现的鼠标跟随代码,带有卡通手型点击效果.涉及JavaScript鼠标事件的响应与页面元素的动态调用技巧,需要的朋友可以参考下
css鼠标样式cursor介绍(鼠标手型)
09-25
1. **hand**：这个值将鼠标指针改变为手型样式，常见于链接或按钮，提示用户这里可以进行点击操作。不过需要注意的是，hand已被废弃，推荐使用pointer。 2. **pointer**：pointer也是手型指针，它是hand的替代品，...
手型鼠标指针 箭头 经典蓝商务ppt模板.rar
09-08
本主题聚焦于一个特定的PPT模板——"手型鼠标指针 箭头 经典蓝商务ppt模板"，该模板包含了一些关键元素，如手型鼠标指针、箭头以及竖线条纹背景，这些都是设计专业且引人注目的演示文稿的重要组成部分。 首先，让...
vue echarts map 改变tooltip
Weather_的博客
12-26 427
改变tooltip位置和内容 tooltip: { show: true, padding: 10, alwaysShowContent: true, // 是否永远显示tooltip enterable: true, transitionDuration: 0, /
openlayers实现点聚合，并添加点击事件（点击显示弹窗）
我灰灰凭啥输
04-07 7533
新手第一次用openlayers，看了下官网，对新手很不友好，看着官网的例子整了半天才出来， 直接上代码 <div id="map"></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-title" class="popup-title"&gt.
Openlayer随记
08-19 2223
绑定事件 鼠标点击事件：click 鼠标划过矢量要素事件：pointermove （划过要素时，设置鼠标为手势：this.map.getTargetElement().style.cursor="pointer";） this.map.on("click", (e) => { console.log("e:", e); }); 获取屏幕坐标 通过e.pixel获取屏幕坐标 通过this.map.getEventPixel(e.original...
display：flex；布局
weixin_51109349的博客
03-22 2386
菜鸟教程display：flex；布局 例子原文 菜鸟教程讲解的已经很详细了，（点击上方链接），这里总结一些布局例子； 例子一：垂直居中布局 display: flex; justify-content: center; align-items: center; 例二：水平横向平分 display: flex;(父元素) flex:1;（子元素等分空间） HTML代码： <ul> <li>音乐</li> <li>影视</li&gt
OpenLayers3基础教程——OL3之Popup
LZUGIS
07-07 6506
本节重点讲述OpenLayers3中Popup的调用时实现，OL3改用Overlay代替OL2的Popup功能。
鼠标滑到某元素标签弹出div浮动框及其关闭
hello___everyone的博客
08-30 4354
css： .more111{ top:event.clientY+10; left:event.clientX-330; z-index:1; position:absolute; } html 元素 更多条件 div：
OpenLayers 3 之 弹出框（popup）
热门推荐
研究与专注
03-18 2万+
摘要          上回说到，加载完地图后，我们想更多一点交互，而不仅仅是缩放和平移，赋予地图多一点的生命 ~-~！点击地图，它至少应该知道我是在哪里点击了，并且弹出一个气球类似的框框告诉我！这次，我们就来尝试给我们的地图加上这个能力！          PS：这次的例子是基于上一篇的加载地图的代码的哦！在上一篇的基础上增删修改，所以读读前一篇是很有必要的哦！ 正文
OpenLayers标记地图点及点击地图点显示自定义弹出框
Zartillery的博客
01-13 6860
css代码(设置弹出框样式) /*设置弹出框样式*/ .ol-popup { position: absolute; background-color: #eeeeee; -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
（转）OpenLayers3基础教程——OL3之Popup
06-09 265
http://blog.csdn.net/gisshixisheng/article/details/46794813 概述： 本节重点讲述OpenLayers3中Popup的调用时实现，OL3改用Overlay代替OL2的Popup功能。 接口简介： overlay跟ol.control.Control一样，是一个可见的窗口，但是不和Control一样，不是固定在地图区域...
antd table鼠标移入整行改变样式
最新发布
05-17
这里我们设置鼠标移入tr元素时，将背景颜色设置为浅灰色，并将鼠标样式设置为手型。 然后，在antd的Table组件中，设置rowClassName属性为一个函数，该函数返回样式类名，代码如下： ``` dataSource={dataSource}...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值