openlayers的基本使用

1、环境构建

yarn add ol

---

2、引入文件(按需引入)

import "ol/ol.css";
import { Map, View } from "ol";
import * as olProj from "ol/proj";
import { Vector as VectorLayer, Tile } from "ol/layer";
import Feature from "ol/Feature";
import { Point } from "ol/geom";
import { XYZ, Vector as VectorSource } from "ol/source";
import { Style, Icon, Fill, Stroke, Text } from "ol/style";
import GeoJSON from "ol/format/GeoJSON";

---

3、初始化地图及图层切换

地图初始化

    // 初始化一个 openlayers 地图
      let firstLayer = new Tile({
        visible：false,//控制图层的显示和隐藏
        source: new XYZ({
          url: "gis2d/terrain/{z}/{x}/{y}.jpg"//图层
        })
      });
      let lasterLayer = new Tile({
        visible：true,//控制图层的显示和隐藏
        source: new XYZ({
          url: "gis2d/terrain/{z}/{x}/{y}.jpg"//图层
        })
      });
      this.map = new Map({
        target: "map",
        layers: [firstLayer, lasterLayer],
        view: new View({
          center: olProj.transform(
            [103.879389, 37.42613],//地图中心位置
            "EPSG:4326",
            "EPSG:3857"
          ),
          minZoom: 3,//显示层级
          zoom: 4,
          maxZoom: 5
        })
      });

图层切换：通过this.map.getLayers()获取所有图层，设置某个图层的visible值,或者直接修改图层

//第一种方法
      this.map
          .getLayers()
          .item(0)
          .setVisible(true);
//第二种方法
      this.map
          .getLayers()
          .item(0)
          .setSource(
             new XYZ({url:""})
           );

---

4添加marker图标和文字

zoom可以用来控制层级显示
feature.setStyle 设置marker的样式及图标

this.$http.get("/json/feature.json", {}).then(res => {
   res.data.forEach(item => {
       let feature = new Feature({
        pointType: "station",
        geometry: new Point(olProj.fromLonLat([item.X, item.Y])) // 标签位置
      });
      feature.setStyle([
        new Style({
          image: new Icon({
            anchor: [0.5, 19],
            anchorYUnits: "pixels",
            src: require("@/assets/img/star.png")
          })
        }),
        new Style({
          image: new Icon({
            anchor: [0.5, 36],//偏移量
            anchorYUnits: "pixels",
            src: require("@/assets/img/down.png")
          })
        }),
        new Style({
          text: new Text({
            text: item.stationName,//marker文本
            font: "14px Microsoft YaHei",
            offsetY: "15",
            fill: new Fill({
              color: "#fff"
            }),
            stroke: new Stroke({
              color: "#000",
              width: 2
            })
          })
        }),
        new Style({
          text: new Text({
            text: item.stationName,//marker提示
            font: "14px Microsoft YaHei",
            offsetY: "-45",
            padding: [5, 10, 5, 10],
            backgroundFill: new Fill({
              color: "#fff"//提示背景色
            }),
            fill: new Fill({
              color: "#000"
            })
          })
        })
      ]);
      feature.setId(item.id); // 设置ID
      let source = new VectorSource({}); // 初始化矢量数据源
      source.addFeature(feature); // 将标签要素添加至矢量数据源
      let pointLayer = new VectorLayer({
        source: source,
        minZoom: 3,//最小层数
        zoom: 3,
        maxZoom: 4//最大层数
        // name: "pointLayer"
      });
      this.map.addLayer(pointLayer);
   });
});

---

5、获取经纬度

this.map.on("pointermove", e => {
    this.gisLong = olProj.transform(e.coordinate, "EPSG:3857", "EPSG:4326"); //转换经纬度
    // console.log(gisLong);
    let pixel = this.map.getEventPixel(e.originalEvent);
    //鼠标悬浮在marker上样式改变
    let hoverPoint = this.map.hasFeatureAtPixel(pixel, {
      layerFilter: layer => {
        return layer.get("name") == "pointLayer";
      }
    });
    this.map.getTargetElement().style.cursor = hoverPoint ? "pointer" : "";
});

---

6、监听地图大小发生改变，使用防抖

mounted(){
    window.addEventListener("resize", this.debounce(this.handle, 1000));
},
methods:{
    debounce(fn, wait) {
      var timeout = null;
      return function() {
        if (timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
      };
    },
    handle(){
    //执行操作
    }
}

7、地图定位

   this.map.setView(
      new View({
          center: olProj.transform(
            [103.879389, 37.42613],
            "EPSG:4326",
            "EPSG:3857"
          ),
          minZoom: 3,//显示层级
          zoom: 4,
          maxZoom: 5
      })
   )

8、更新feature

//初始化feature
let featureArr = []
featureArr = await featureList();//返回的feature数组
featureSource = new VectorSource({//数据来源
   features:featureArr 
})
let featureLayer = new VectorLayer({//数据图层
   source:featureSource,
   minZoom:4,
   zoom:5,
   name:"featureLayer" 
})
this.map.addLayer(featureLayer)

//更新
featureArr = await featureList()
featureSource = new VectorSource({
   features:featureArr 
})
this.featureLayer.setSource(featureSource)