OpenLayers4 省界鼠标滑动特效(高亮省份加声音)

<!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>

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

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

转载自:https://blog.csdn.net/qq_35796916/article/details/79162282

You may also like...