openlayers中国地图省市悬停高亮

目录

1、效果图   

2、核心代码

3、完整代码

1、效果图   

2、核心代码

    // 悬停高亮核心代码
    mouseHover () {
      const selected = new Style({
        fill: new Fill({ color: '#FFFFFF00' }),
        stroke: new Stroke({color: '#e90880', width: 3})
      });
      const selectPointerMove = new Select({
        condition: pointerMove, //鼠标移动
        style: selected,
      });
      this.map.addInteraction(selectPointerMove);
    }

3、完整代码

<!--世界地图 - 使用交互进行悬停高亮-->
<script>
import { ref } from 'vue'
import {Map, View} from 'ol'
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer"
import Feature from "ol/Feature"
import { OSM, Vector as VectorSource, XYZ } from "ol/source"
import { defaults as DefaultsControl } from "ol/control"
import GeoJSON from "ol/format/GeoJSON"
import { fromLonLat, transform } from "ol/proj"
import { MultiPolygon, Polygon } from "ol/geom"
import areaGeo from "../../assets/resource/china.json"
import { Fill, Stroke, Style, Text } from "ol/style"
import { pointerMove } from 'ol/events/condition'
import Select from 'ol/interaction/Select'
export default {
  name: 'tree',
  data () {
    return {
      map: null,
      count: ref(0),
      previousFeature: null
    }
  },
  components: {},
  methods: {
    initMap () {
      this.map = new Map({
        view: new View({
          center: transform([113.304788, 28.013391], "EPSG:4326", "EPSG:3857"), //两个投影之间进行坐标转换
          // center: fromLonLat([112.93, 28.23], "EPSG:3857"), //地图中心坐标
          zoom: 5, //缩放级别
          // rotation: Math.PI / 2
        }),
        layers: [
          new TileLayer({
            title: 'worldLayer',
            source: new XYZ({
              // url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
              // 高德
              url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
              // 阿里：https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
            }),
          })
        ],
        target: 'map', //对应绑定地图div的id标签 - map
        controls: DefaultsControl({
          rotate: false,
          zoom: false
        })
      });
    },
    initOverlay () {
      // 获取边界的经纬度数据
      let features = [];
      let routeFeature = null;
      areaGeo.features.forEach(lineData => {
        // 将每一个地域设置为一个feature
        if (lineData.geometry.type === 'MultiPolygon') {
          routeFeature = new Feature({
            geometry: new MultiPolygon(
                lineData.geometry.coordinates
            ).transform("EPSG:4326", "EPSG:3857")
          });
        } else if (lineData.geometry.type === 'Polygon') {
          routeFeature = new Feature({
            geometry: new Polygon(
                lineData.geometry.coordinates
            ).transform("EPSG:4326", "EPSG:3857"),
          });
        }
        const coverStyle = new Style({
          fill: new Fill({ color: '#FFFFFF10' })
        })
        routeFeature.setStyle(coverStyle);
        features.push(routeFeature);
      });

      let routeLayer = new VectorLayer({
        source: new VectorSource({
          features: features
        })
      })
      this.map.addLayer(routeLayer);
    },
    // 悬停高亮核心代码
    mouseHover () {
      const selected = new Style({
        fill: new Fill({ color: '#FFFFFF00' }),
        stroke: new Stroke({color: '#e90880', width: 3})
      });
      const selectPointerMove = new Select({
        condition: pointerMove,
        style: selected,
      });
      this.map.addInteraction(selectPointerMove);
    }
  },
  mounted() {
    this.initMap()
    this.initOverlay()
    this.mouseHover()
  }
}
</script>

<template>
  <div class="content">
    <!--  <button @click="count++">Count is: {{ count }}</button>  -->
    <!--  绑定map地图  -->
    <div id="map" ref="map"></div>
  </div>
</template>

<style scoped>
.content{
  width: 100%;
  height: 100%;
  #map {
    width: calc(100vw);
    height: calc(100vh);
  }
  button {
    font-weight: bold;
  }
}
</style>

参考：

openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解_vue-openlayers根据省份边界贴图-CSDN博客