openLayers+vue+element-ui实现地图

最新推荐文章于 2024-07-26 22:40:26 发布

hzh2310841288

最新推荐文章于 2024-07-26 22:40:26 发布

阅读量627

点赞数 1

文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/hzh2310841288/article/details/131045108

版权

本文介绍了如何创建一个Vue项目并集成OpenLayers来展示地图。涉及的关键步骤包括引入依赖包，如Vue、VueRouter、Vuex以及OpenLayers等，设置地图容器，导入和初始化地图所需模块，配置图层，实现地图点击事件和弹窗功能，以及添加遮罩层和图层控制。示例代码展示了如何实例化地图、处理瓦片图层和交互事件。

摘要由CSDN通过智能技术生成

1.创建一个vue项目

2.引入关键依赖包

package.json的依赖包如下

"dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "echarts": "^5.4.2",
    "element-ui": "^2.15.13",
    "ol": "^5.3.3",
    "ol-ext": "^4.0.8",
    "ol-layerswitcher": "^4.1.1",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },

用到的openLayers(简称ol)版本为5.3.3 不同版本的写法不同，低版本有些方法可能不支持或者没有

3.给地图一个容器

<div class="olMap" ref="rootMap">

4.页面引入ol各个需要用到的模块

// 地图版本5的导入
import "ol/ol.css";
import { Map, View, Overlay } from "ol";
import XYZ from "ol/source/XYZ";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import Feature from "ol/Feature";
import { fromExtent } from "ol/geom/Polygon";
import LinearRing from "ol/geom/LinearRing";
import { Fill, Stroke, Style, Text, Circle, Icon } from "ol/style";
import GeoJSON from "ol/format/GeoJSON";
import "ol-ext/dist/ol-ext.min.css";
import "ol-layerswitcher/dist/ol-layerswitcher.css";
import OlExtLayerSwitcher from "ol-ext/control/LayerSwitcher";

import * as echarts from "echarts";
// 导入瓦块数据
import mapJson from "../assets/jiandk.js";
import mapJson2 from "../assets/jiandk2.js";
// 引入请求

需要知道干啥用的模块去这个 ol中文文档 http://openlayers.vip/examples/

5.初始化地图

// 实例化地图
    initMap() {
      let me = this;
      // 地图dom
      let map = this.$refs.rootMap;
      // 自定义瓦块样式
      var style = new Style({
        fill: new Fill({
          color: "rgba(255, 0, 0, 0.5)",
        }),
        stroke: new Stroke({
          color: "#ccc",
          width: 1,
        }),
      });
      // 图层集合  这些图层看业务需要自行取舍, 自定义需要给到js文件的数据 
      var layers = [
         //看需要  我这里使用的是天地图 
        // 天地图底图层
        new TileLayer({
          title: "地区实景图层",
          source: new XYZ({
            url: "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=这块填自己的密钥",
          }),
        }),
        new TileLayer({
          title: "影像注记图层",
          source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=这块填自己的密钥",
          }),
        }),
        // 自定义的瓦块图层
        new VectorLayer({
          title: "自定义的瓦块图层1",
          source: new VectorSource({
            features: new GeoJSON().readFeatures(mapJson),
          }),
          style: style,
        }),
        // 自定义的瓦块图层
        new VectorLayer({
          title: "自定义的瓦块图层2",
          source: new VectorSource({
            features: new GeoJSON().readFeatures(mapJson2),
          }),
        }),
      ];
      this.map = new Map({
        // 图层容器
        layers: layers,
        // 挂载点
        target: map,
        view: new View({
          // 地图编码方式
          projection: "EPSG:4326",
          // 中心点
          center: [114.8606, 26.8597],
          // 最开始的层级
          zoom: 10,
          // 最大的缩放层级
          maxZoom: 18,
          // 最小的缩放层级
          minZoom: 9,
        }),
      });

      //设置地图缩放监听
      this.map.on("moveend", function (e) {
        let zoom = me.map.getView().getZoom();
        console.log("zoom", zoom);
      });
       //这块是创建点击弹窗  和地图其他遮罩层的方法
      this.addOverlay();
      this.singleclick();
      this.pointermove();
      this.addBeijin();

      // 使用LayerSwitcher实现的图层控制
      const ctrl = new OlExtLayerSwitcher({
        collapsed: true,
        trash: true,
      });
      // 地图添加控件
      this.map.addControl(ctrl);
      // this.addImg()
    }

然后在mounted里调用一下这个就好了

6.点击瓦块实现弹窗开关

// 生成弹窗加到地图上
    addOverlay() {
      // 创建Overlay
      let elPopup = this.$refs.popup;
      this.popup = new Overlay({
        element: elPopup,
        positioning: "bottom-center",
        stopEvent: true,
        autoPan: true,
        offset: [0, -10],
      });
      // console.log(this.popup,'弹窗')
      this.map.addOverlay(this.popup);
      // 创建Overlay
      let elPopup1 = this.$refs.popup1;
      this.popup1 = new Overlay({
        element: elPopup1,
        positioning: "bottom-center",
        stopEvent: true,
        autoPan: true,
        offset: [0, -10],
      });
      // console.log(this.popup,'弹窗')
      this.map.addOverlay(this.popup1);
    },
    // 点击出现弹窗
    singleclick() {
      // 点击
      this.map.on("singleclick", (e) => {
        // 判断是否点击在点上
        let feature = this.map.forEachFeatureAtPixel(
          e.pixel,
          (feature) => feature
        );
        if (feature) {
          console.log(feature, "点击需要渲染的数据");
          // 果园地块的数据
          if (feature.values_.BM) {

            this.info = feature.values_;
            this.shopPopup = true;

            // 设置弹窗位置
            let coordinates1 = feature.getGeometry().getCoordinates();
            // console.log(coordinates1);
            this.popup1.setPosition(coordinates1);
          }
        } else {
            //点击的不是将弹窗关闭  我有两个弹窗  全部关闭
          this.shopPopup = false;
        }
      });
    },
    //改变鼠标移到到瓦块点位上的光标样式
    pointermove() {
      this.map.on("pointermove", (e) => {
        if (this.map.hasFeatureAtPixel(e.pixel)) {
          this.map.getViewport().style.cursor = "pointer";
        } else {
          this.map.getViewport().style.cursor = "inherit";
        }
      });
    },

弹窗的样式大概自己写成自己想要的样子就好了，这里不弄样式

<div ref="popup" class="popup" v-show="shopPopup">
 </div>

7.实现将特定外的地块添加遮罩

 // 生成遮罩层 三个方法
    addBeijin() {
      var mystyle = new Style({
        fill: new Fill({
          color: "rgba(164, 176, 187, 0.2)",
        }),
        stroke: new Stroke({
          color: "#ccc",
          width: 3,
        }),
      });
      this.converLayer = new VectorLayer({
        title: "吉安市",
        source: new VectorSource(),
        style: mystyle,
      });
        //这里的json文件可以去阿里云的datav自己定义一下下载（下载的文件别包括市内的数据）
      var dataURL = require("../assets/jian.json");
      // console.log(dataURL, "加载遮罩json");
      this.addconver(dataURL);
      this.map.addLayer(this.converLayer);
    },
    addconver(data) {
      var fts = new GeoJSON().readFeatures(data);
      var ft = fts[0];
      var converGeom = this.erase(ft.getGeometry());
      console.log(converGeom);
      var convertFt = new Feature({
        geometry: converGeom,
      });
      this.converLayer.getSource().addFeature(convertFt);
    },
    erase(geom) {
      // 用来进行断点调试代码
      // debugger;
      const extent = [-180, -90, 180, 90];
      const polygonRing = fromExtent(extent);
      const coords = geom.getCoordinates();
      coords.forEach((coord) => {
        const linearRing = new LinearRing(coord[0]);
        polygonRing.appendLinearRing(linearRing);
      });
      return polygonRing;
    },