vue+天地图+Openlayers

npm install ol

<template>
        <div id="geomap" style="width: 100%; height: 722px" class="map-container" ref="mapContainer"></div>
        <div class="mapIcon2">
          <div class="btn" @click="chgIcons">{{iconText}}图例</div>
          <div class="btn" @click="chgxj">{{xjText}}乡界</div>
          <div class="btn" @click="chghl">{{hlText}}河流</div>
        </div>
</template>

<script>

  //以下为 geomap 支持
  import ols from '@/utils/ols.js';
  import { get as getProjection } from 'ol/proj'; // 引入 useGeographic
  import jybjGeo from '@/assets/board/jiangyongxian.json'      //外缘地图包
  import jyxjGeo from '@/assets/board/jiangyongxiang.json'     //乡界地图包
   
 mounted() {
	      // 初始化 geomap
      this.initGeomap();
},
method:{

      //geomap
      initGeomap() {
        // 启用地理坐标系
        ols.useGeographic();

        // //添加天地图底图
        var tdTU = new ols.TileLayer({
          source: new ols.XYZ({
            url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
          }),
        })

        // 天地图的卫星图
        var tiandi_img_w = new ols.Tile({
          title: "卫星图",
          source: new ols.XYZ({
            crossOrigin: "anonymous",
            url: "http://t7.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + this.tdtKey,
          }),
          visible: true, // 默认为true 展示
        });

        var tiandi_cia_w = new ols.Tile({
          title: "卫星图",
          source: new ols.XYZ({
            crossOrigin: "anonymous",
            url: "http://t7.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + this.tdtKey,
          }),
          visible: true, // 默认为true 展示
        })

        this.map = new ols.olMap({
          target: this.$refs.mapContainer,
          layers: [
            //添加天地图底图
            //tdTU,

            // 添加天地图的卫星影像底图 + 影像注记
            tiandi_img_w,
            tiandi_cia_w,
          ],
          view: new ols.View({
            center: [111.3498, 25.1641], // 江永的中心点
            zoom: 10, // 初始缩放级别
            projection: 'EPSG:3857'
          }),
        });


        //创建蒙层，凸显区域
        this.showjyArea();
        //绘制乡界
        this.showjyxj();
        //绘制河流
        this.showjyhl()
        // initMap over
      },
      showjyhl() {
        this.hlWMS = new ols.TileLayer({
          source: new ols.TileWMS({
            url: 'http://XXXX:XXXX/geoserver/XXXX/wms',
            params: {
              LAYERS: 'jiangyong:jiangyongheliu',
              VERSION: '1.1.1',
              TILED: true,
            },
            serverType: 'geoserver',
            projection: 'EPSG:3857',
          }),
        })
        this.map.addLayer(this.hlWMS);
      },
      addGeomapinfo() {
        this.addIcons();
        this.addCircles();
        if (this.zoomLevel <= 10) {
          this.clustersState = false
          this.clusters.setVisible(this.clustersState);
          this.circlesState = true
          this.circles.setVisible(this.circlesState);
          this.miState = false
        } else {
          this.clustersState = true;
          this.clusters.setVisible(this.clustersState);
          this.circlesState = false
          this.circles.setVisible(this.circlesState);
          this.miState = true
        }
      },
      clearGeomapinfo() {
        if (this.circles) {
          this.circles.getSource().clear();
          this.circles = null
        }
        if (this.clusters) {
          this.clusters.getSource().clear();
          this.clusters = null
        }
      },
      addCircles(center, radius) {
        // 创建Feature对象集合
        const features2 = [];
        this.mapData.forEach((item) => {
          const point = new ols.Point([Number(item.ln[0]), Number(item.ln[1])]);
          const feature = new ols.Feature({
            geometry: point,
          });
          features2.push(feature);
        });
        // 矢量要素数据源
        const source2 = new ols.VectorSource({
          features: features2,
        });
        this.circles = new ols.VectorLayer({
          zIndex: 4,
          source: source2,
          style: (feature, resolution) => {
            return new ols.Style({
              image: new ols.Circle({
                radius: 5,
                fill: new ols.Fill({
                  color: '#06f106',
                }),
              }),
            });
          },
        });

        this.map.addLayer(this.circles);
      },
      addIcons() {
        // 创建Feature对象集合
        const features1 = [];
        this.mapData.forEach((item) => {
          const point = new ols.Point([Number(item.ln[0]), Number(item.ln[1])]);
          const feature = new ols.Feature({
            geometry: point,
            info: item,
            imgSrc: item.imgSrc, // 添加图标路径
          });
          features1.push(feature);
        });
        // 矢量要素数据源
        const source1 = new ols.VectorSource({
          features: features1,
        });
        this.clusters = new ols.VectorLayer({
          zIndex: 4,
          source: source1,
          style: (feature, resolution) => {
            const imgSrc = feature.get('imgSrc');
            return new ols.Style({
              image: new ols.Icon({
                opacity: 1,
                src: imgSrc,
                scale: 1, // 图标缩放比例
              }),
            });
          }
        });

        this.map.addLayer(this.clusters);
        this.bindClickEvent();
      },
      // 添加多边形
      showjyxj() {
        // 解析 GeoJSON 数据
        const features = new ols.GeoJSON().readFeatures(jyxjGeo);
        // 创建矢量源
        const vectorSource = new ols.VectorSource({
          features: features
        });
        this.vectorLayerXJ = new ols.VectorLayer({
          zIndex: 3,
          source: vectorSource,
          style: new ols.Style({
            stroke: new ols.Stroke({
              color: "#f4b49f",
              width: 3
            })
          })
        });
        this.map.addLayer(this.vectorLayerXJ);
      },
      // 添加多边形并填充外部区域
      showjyArea() {
        let initLayer = new ols.VectorLayer({
          zIndex: 3,
          source: new ols.VectorSource(),
          style: new ols.Style({
            fill: new ols.Fill({
              color: "rgba( 255, 255, 255, 0.7)",
            }),
            stroke: new ols.Stroke({
              color: "#f4b49f",
              width: 3
            })
          })
        });
        this.map.addLayer(initLayer);
        this.addConver(initLayer, jybjGeo);
      },
      //添加遮罩
      addConver(converLayer, data) {
        const fts = new ols.GeoJSON().readFeatures(data);
        const ft = fts[0];
        const converGeom = this.erase(ft.getGeometry());
        const convertFt = new ols.Feature({
          geometry: converGeom,
        });
        converLayer.getSource().addFeature(convertFt);
      },
      //擦除操作，生产遮罩范围
      erase(geom) {
        const extent = [-180, -90, 180, 90];
        const polygonRing = ols.fromExtent(extent);
        const coords = geom.getCoordinates();
        coords.forEach(coord => {
          const linearRing = new ols.LinearRing(coord[0]);
          polygonRing.appendLinearRing(linearRing);
        });
        return polygonRing;
      },
      addZoomListener() {
        // 监听鼠标滚轮事件
        this.map.getView().on('change:resolution', () => {
          this.zoomLevel = this.map.getView().getZoom();
          if (this.iconState) {
            if (this.zoomLevel <= 10) {
              this.clustersState = false
              this.clusters.setVisible(this.clustersState);
              this.circlesState = true
              this.circles.setVisible(this.circlesState);
              this.miState = false
            } else {
              this.clustersState = true;
              this.clusters.setVisible(this.clustersState);
              this.circlesState = false
              this.circles.setVisible(this.circlesState);
              this.miState = true
            }
          }
        });
      },
      bindClickEvent() {
        // 移除已有的点击事件监听器
        if (this.clickListener) {
          this.map.un('singleclick', this.clickListener);
        }

        // 绑定新的点击事件监听器
        this.clickListener = (e) => {
          let point = this.map.forEachFeatureAtPixel(e.pixel, (feature) => feature);
          if (point && point.get('info')) {
            let params = point.getProperties();

            let obj = point.get('info');
            // console.log("当前标点参数", obj);
            if (obj.attribute == '河道') {
              this.objshow = false
              this.rivershow = true
              this.riverData = obj
              this.getRiverArea(obj)
              setTimeout(() => {
                this.rHeight = this.$refs.vbody.offsetHeight + 50
              }, 200)
            } else {
              this.closeRiver()
              this.objshow = true
              this.objData = obj
            }
          }
        };

        this.map.on('singleclick', this.clickListener);
      },
      chgIcons() {
        this.iconState = !this.iconState
        this.iconText = this.iconState ? '隐藏' : '显示'
        if (this.zoomLevel <= 10) {
          this.circlesState = !this.circles.getVisible()
          this.circles.setVisible(this.circlesState);
        } else {
          this.clustersState = !this.clusters.getVisible()
          this.clusters.setVisible(this.clustersState);
        }
      },
      chgxj() {
        if (this.vectorLayerXJ) {
          this.vectorLayerXJState = !this.vectorLayerXJ.getVisible()
          this.vectorLayerXJ.setVisible(this.vectorLayerXJState);
          this.xjText = this.vectorLayerXJState ? '隐藏' : '显示'
        }
      },
      chghl() {
        if (this.hlWMS) {
          this.hlWMSState = !this.hlWMS.getVisible()
          this.hlWMS.setVisible(this.hlWMSState);
          this.hlText = this.hlWMSState ? '隐藏' : '显示'
        }
      },
}
</script>

ol.js

// ----------------<<CSS文件>>----------------
import "ol/ol.css";
 
// ----------------<<常用模块>>----------------
import Map from "ol/Map.js";
import View from "ol/View.js";
import TileLayer from "ol/layer/Tile";
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ'
import Fill from 'ol/style/Fill.js'
import Point from 'ol/geom/Point.js';
import Style from 'ol/style/Style.js';
import Circle from 'ol/style/Circle.js';
import Stroke from 'ol/style/Stroke.js';
import Feature from 'ol/Feature.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
 
// ----------------<<其他模块>>----------------
 
import Icon from 'ol/style/Icon.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import TileWMS from 'ol/source/TileWMS.js';
 import { useGeographic } from 'ol/proj.js'  
import { fromExtent } from "ol/geom/Polygon";
import LinearRing from 'ol/geom/LinearRing.js';

const ols = {
  olMap: Map,
  View: View,
  TileLayer: TileLayer,
  Tile: Tile,
  XYZ: XYZ,
  Icon: Icon,
  Fill: Fill,
  Point: Point,
  Style: Style,
  Circle: Circle,
  Stroke: Stroke,
  Feature: Feature,
  GeoJSON: GeoJSON,
  TileWMS: TileWMS,
  VectorLayer: VectorLayer,
  VectorSource: VectorSource,
  useGeographic: useGeographic,
  fromExtent:fromExtent,
  LinearRing:LinearRing
}
 
export default ols