OpenLayers4 省界鼠标滑动特效（高亮省份加声音）

最新推荐文章于 2024-06-18 17:18:11 发布

相心胖

最新推荐文章于 2024-06-18 17:18:11 发布

阅读量2.3k

点赞数 3

分类专栏： GIS 文章标签： OpenLayers4

本文链接：https://blog.csdn.net/qq_35796916/article/details/79162282

版权

GIS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>Vector Layer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info"> </div>
<script>
  //style样式 灰色 黑色字体 白色边界
  var style = new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(0, 0, 255, 0.9)'
        }),
        stroke: new ol.style.Stroke({
          color: '#319FD3',
          width: 1
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          fill: new ol.style.Fill({
            color: '#00008B'
          }),
          stroke: new ol.style.Stroke({
            color: '#fff',
            width: 3
          })
        })
      });
  //地图基础风格图层
      var tileLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
      });


      var second = new ol.layer.Tile({
        source:new ol.source.TileWMS({
          url:'http://192.168.1.134:8888/geoserver/cite/wms?service=WMS&version=1.1.0&request=GetMap&layers=cite:geotest&styles=&bbox=26.1158885753,114.3896413825,32.0267244225,119.2238081034&width=768&height=628&srs=EPSG:4326',
          serverType:'geoserver'
        
        })
      })

      var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'http://192.168.1.134:8888/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:ch_34p&maxFeatures=50&outputFormat=application%2Fjson',
          format: new ol.format.GeoJSON()
        }),
        style: style
      });

      var map = new ol.Map({
        layers: [tileLayer,vectorLayer,second],
        target: 'map',
        view: new ol.View({
          center: [107,34],
          projection: 'EPSG:4326',
          zoom: 5
        })
      });
//高亮样式
var highlightStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#f00',
          width: 2
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255,0,0,0.3)'
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          fill: new ol.style.Fill({
            color: '#000'
          }),
          stroke: new ol.style.Stroke({
            color: '#f00',
            width: 3
          })
        })
      });
//高亮风格的图层：
      var featureOverlay = new ol.layer.Vector({
        source: new ol.source.Vector(),
        map: map,
        style: highlightStyle
      });

      var highlight;
      //定义事件响应函数
      var displayFeatureInfo = function(pixel) {
        // window.alert('执行了');
        //对于每个与事件像素点相交的图层上的多个Feature执行回调函数--返回每个Feature
        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
          // console.log(feature);
          return feature;
        });
        //在图层外面的时候，feature和highlight都是null，不执行
        //如果有feature没有hightlight，就添加feature到图层，并且给highlight赋值。
        //如果feature发生改变，就移除highlight并添加新的feature到图层，然后给highlight改变值。

        if (feature !== highlight) {
          if (highlight) {
            featureOverlay.getSource().removeFeature(highlight);
          }
          if (feature) {
            featureOverlay.getSource().addFeature(feature);
          }
          highlight = feature;
        }
        return feature;
      };
      
      var onFeature_2;
      var count=0;
      //声音文件:
      var audio;
      audio = new Audio();
      audio.src = "voice/2.wav";

      var functionAfterClick = function(event){
        count^=1;
        if(count==1){
          //单击一次，单次执行：

        console.log(1);
        //网络交换代码
       



      }

      };

      map.on('pointermove', function(evt) {
            var pixel = map.getEventPixel(evt.originalEvent);
            //获取鼠标下方的Feature
            var onFeature_1 = displayFeatureInfo(pixel);
            if(onFeature_1 !== onFeature_2){
              console.log(2);

            onFeature_1.on('click',functionAfterClick);//绑定事件

            if(onFeature_2){
              //当鼠标越过省界的时候，发生这里：
               audio.play();
              console.log(0);
              onFeature_2.un('click',functionAfterClick);//解除绑定事件


          }
            }
            onFeature_2 = onFeature_1;

            });

      map.on('click',function(evt){
            map.forEachFeatureAtPixel(evt.pixel,function(feature){
              feature.dispatchEvent({type:'click',event:evt});

              });
            });


    </script>
     </body>
</html>

如下图鼠标放在甘肃省范围内可以高亮甘肃省，而且切换省份时会有音效。

鼠标放在西藏边界内会高亮西藏

相心胖

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
OpenLayers4 省界鼠标滑动特效（高亮省份加声音）

Vector Layer //style样式灰色黑色字体白色边界 var style = new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.9)' }),
复制链接

扫一扫