vue+openlayers5学习总结（八）vue封装除矢量外的所有功能

张栓来

已于 2023-03-29 14:39:47 修改

阅读量283

点赞数

CC 4.0 BY-SA版权

分类专栏： vue openlayers 网站开发文章标签： vue openlayers 封装

于 2019-06-24 15:23:53 首次发布

本文链接：https://blog.youkuaiyun.com/zhangshuanlai/article/details/93487805

这篇博客详细总结了如何使用Vue结合OpenLayers5进行地图功能的封装，包括olmap.vue组件、mapconfig.js配置、mapcontrols.js地图控制、layercontrols.js图层控制、pro.js投影设置、measure.js测量工具以及viewcontrols.js视图控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.olmap.vue

<template>
  <div>
    <!-- <div id="map" ref="rootmap" class="map"></div> -->
    <div id="fullscreen" class="fullscreen">
      <div tabindex="1" id="map" ref="rootmap" class="map"></div>
      <div class="sidepanel">
        <span class="sidepanel-title">图层列表</span>
        <div id="layerControl" class="layerControl">
          <ul id="layerTree" class="layerTree"></ul>
        </div>
      </div>
    </div>
    <button @click="selected('length')">测量距离</button>
    <button @click="selected('area')">测量面积</button>
    <button @click="removemeasure()">清除测量</button>
    <button @click="fun(1)">底图1</button>
    <button @click="fun(2)">底图2</button>
    <button @click="fun(3)">底图3</button>
    <button @click="fun(4)">底图4</button>
    <button @click="fun(5)">底图5</button>
    <button @click="fun(6)">底图6</button>
    <button @click="fun(7)">底图7</button>
    <button @click="fun(8)">底图8</button>
    <button @click="fun(0)">底图设置为空</button>
    <button @click="flyTo()">飞往成都</button>
    <div id="mouseposition" ref="xyposition" :style="{marginTop:'100px'}"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import {
   
    Map, View } from "ol";
import {
   
   
  Group as LayerGroup,
  Vector as VectorLayer,
  Tile as TileLayer
} from "ol/layer.js";
import {
   
   
  XYZ,
  BingMaps,
  OSM,
  TileArcGISRest,
  Vector as VectorSource
} from "ol/source.js";
import TileWMS from "ol/source/TileWMS.js";
import mapcontrols from "./mapcontrols.js";
import layercontrols from "./layercontrols.js";
import mapconfig from "./mapconfig";
import measure from "../mapcommands/measure.js";
import viewcontrols from "../mapcommands/viewcontrols.js";
import projection from "../projecton/pro.js";
import TileGrid from "ol/tilegrid/TileGrid";
import {
   
    GPX, GeoJSON, IGC, KML, TopoJSON } from "ol/format.js";
import {
   
   
  defaults as defaultInteractions,
  DragAndDrop,
  PinchZoom
} from "ol/interaction.js";
import {
   
    fromLonLat } from "ol/proj.js";
import Projection from "ol/proj/Projection.js";
import {
   
    register } from "ol/proj/proj4.js";
import proj4 from "proj4";
export default {
   
   
  data() {
   
   
    return {
   
   
      map: null
    };
  },
  mounted() {
   
   
    let self = this;
    var mapcontainer = this.$refs.rootmap;
    var mapxyposition = this.$refs.xyposition;

    //console.log(projection.projection) ;
    self.source = new VectorSource({
   
    wrapX: true });

    var dragAndDropInteraction = new DragAndDrop({
   
   
      formatConstructors: [GPX, GeoJSON, IGC, KML, TopoJSON]
    });
    dragAndDropInteraction.on("addfeatures", function(event, mymap) {
   
   
      var vectorSource = new VectorSource({
   
   
        features: event.features
      });
      self.map.addLayer(
        new VectorLayer({
   
   
          renderMode: "image",
          source: vectorSource
        })
      );
      self.map.getView().fit(vectorSource.getExtent());
    });
    this.layer = new TileLayer({
   
    name: "底图" });

    // console.log(projection.basemapsource(4));
    this.view = mapconfig.view;
    this.map = new Map({
   
   
      controls: mapcontrols,
      target: mapcontainer,
      interactions: defaultInteractions({
   
   
        constrainResolution: true,
        onFocusOnly: true
      }).extend([
        dragAndDropInteraction,
        new PinchZoom({
   
   
          constrainResolution: true // force zooming to a integer zoom
        })
      ]),
      layers: [
        this.layer,
        measure.vector(self.source),
      ],
      view: this.view
    });

    layercontrols.loadLayersControl(this.map, "layerTree");
  },
  methods: {
   
   
    fun(num) {
   
   
      this.layer.setSource(mapconfig.basemapsource(num));
    },
    removemeasure() {
   
   
      measure.removemeasuretip(this);
      this.selected("None");
    },
    selected(shp) {
   
   
      this.map.removeInteraction(this.draw);
      if (shp != "None") {
   
   
        measure.addInteraction(this, shp);
      }
    },
    flyTo() {
   
   
      viewcontrols.flyTo([35371814, 3430209], this.view);
    }
  }
};
</script>

 <style map>
.fullscreen:-moz-full-screen {
   
   
  height: 100%;
}
.fullscreen: