openlayers 地图组件封装

openlayers 地图组件封装

<template>
	<div class="mapBox">
		<!-- 地图 -->
		<div ref="map" id="map" class="map"></div>

		<!-- 点位弹窗 -->
		<div id="popup" class="ol-popup">
			<a href="#" id="popup-closer" class="ol-popup-closer"></a>
			<div id="popup-content">{
  { popup.content }}</div>
		</div>

		<!-- 地图操作 -->
		<div v-if="false" class="optionsBox">
			<!-- GIS服务 -->
			<el-dropdown @command="handleGisCommand">
				<el-button type="primary">
					GIS服务
					<i class="el-icon-arrow-down el-icon--right"></i>
				</el-button>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="1">测距离</el-dropdown-item>
					<el-dropdown-item command="2">测面积</el-dropdown-item>
					<el-dropdown-item command="3">清空</el-dropdown-item>
					<el-dropdown-item command="4">打印地图</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>

			<!-- 矢量底图 / 卫星底图 -->
			<el-radio-group v-model="checkUnderLayer" @change="handleUnderLayerChange">
				<el-radio-button label="sldt">矢量底图</el-radio-button>
				<el-radio-button label="wxdt">卫星底图</el-radio-button>
			</el-radio-group>

			<!-- 注记层 / 行政区划 -->
			<el-checkbox-group v-model="checkLayers" @change="handleLayerChange">
				<el-checkbox-button label="zjc">注记层</el-checkbox-button>
				<el-checkbox-button label="xzqh">行政区划</el-checkbox-button>
			</el-checkbox-group>

			<!-- 全屏 -->
			<el-button type="primary" @click="handleFullScreen">{
  { isFullScreen ? "退出全屏" : "全屏" }}</el-button>

			<!-- 回到原点 -->
			<el-button type="primary" @click="handleBackCenter">回到原点</el-button>

			<!-- 轨迹运动 -->
			<el-button type="primary" @click="handleTrackStart">{
  { mapTrack.isPlay ? "暂停" : "开始" }}</el-button>
			<el-button type="primary" @click="handleTrackStop">停止</el-button>
		</div>
	</div>
</template>

<script>
import "ol/ol.css";
import request from "@/utils/request.js";
import domtoimage from "dom-to-image";
import Text from "ol/style/Text";

import {
      getWidth, getTopLeft } from "ol/extent";
import View from "ol/View";
import Map from "ol/Map";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import Feature from "ol/Feature";
import {
      WMTS, Vector as VectorSource, XYZ } from "ol/source";
import {
      Tile as TileLayer, Vector as VectorLayer, VectorImage } from "ol/layer";
import {
      getArea, getLength } from "ol/sphere";
import {
      unByKey } from "ol/Observable";
import {
      LineString, Polygon, Point, MultiLineString } from "ol/geom";
import {
      MousePosition, ScaleLine, ZoomSlider } from "ol/control";
import {
      createStringXY } from "ol/coordinate";
import * as olProj from "ol/proj";
import {
      Draw, Select, Modify } from "ol/interaction";
import Overlay from "ol/Overlay";

import {
      Circle as CircleStyle, Fill, Stroke, Style, Icon } from "ol/style";
import {
      scale } from "ol/size";

import GeoJSON from "ol/format/GeoJSON";
import SourceVector from "ol/source/Vector";
import {
      getDistance } from "ol/sphere";

import {
      getVectorContext } from "ol/render";
import {
      EventBus } from "@/utils/eventBus.js";

import {
      transform, fromLonLat, toLonLat } from "ol/proj";

import LayerTile from "ol/layer/Tile";
import ImageLayer from "ol/layer/Image";
import {
      Raster as RasterSource } from "ol/source";
import {
      defaults as defaultControls } from "ol/control";
import {
      saveAs } from "file-saver";
export default {
     
	data() {
     
		return {
     
			map: null,
			mapCenter: [118.091838, 36.958653], // 地图中心点
			// 弹窗
			popup: {
     
				popupOverlay: null, // 点位弹窗
				content: "", // 弹窗显示内容
			},
			// 行政区划/注记层
			checkLayers: ["zjc", "xzqh"],
			mapLayers: {
     },
			// 底图
			underlayer: {
     
				sldt: {
      layer: null, show: true },
				wxdt: {
      layer: null, show: false },
			},
			checkUnderLayer: "sldt",
			// 测量距离/面积
			mapDraw: {
     
				helpTooltipElement: null,
				feature: null,
				helpTooltip: null,
				draw: null,
				measureTooltipElement: null,
				measureTooltip: null,
				listener: null,
				mapMouseMove: null,
				drawElements: [],
				drawLayers: [],
			},
			isFullScreen: false,
			// 轨迹
			mapTrack: {
     
				isPlay: false, // 开始或暂停运动
				isStop: false, // 停止运动, 复位
				route: null,
				featureMove: {
     },
				geometryMove: {
     },
				carPoints: [], //车还要走的点
				routeIndex: 0, //当前小车所在的路段
				timer: null,
				routeLayer: {
     },
				coordinates: [
					[117.98804853292008, 36.924719974587475],
					... ...
				],
			},
		};
	},

	mounted() {
     
		// this.initMap();
		this.initDeepColorMap();
		// this.initBlueColorMap();

		this.initEvent();
		this.initPointPopup();

		// 添加轨迹
		// this.addTrack();

		// 监听全屏状态
		window.addEventListener("resize", () => {
     
			// 是否全屏
			this.isFullScreen =
				document.fullscreenElement ||
				document.webkitFullscreenElement ||
				document.msFullscreenElement ||
				document.mozFullScreenElement ||
				null;
		});
	},

	methods: {
     
		handleTrackStart() {
     
			this.mapTrack.isPlay = !this.mapTrack.isPlay;
			if (this.mapTrack.isPlay) {
     
				//开始动
				this.trackMoveStart();
			} else {
     
				this.trackMovePause();
			}
		},
		handleTrackStop() {
     
			this.mapTrack.isPlay = false;
			this.mapTrack.isStop = true;

			this.resetTrack();
			this.addTrack();
		},
		/**
		 * 切换底图
		 */
		handleUnderLayerChange(type) {
     
			for (let i in this.underlayer) {
     
				this.underlayer[i].layer.setVisible(false);
				this.underlayer[i].show = false;
			}
			this.underlayer[type].show = true;
			this.underlayer[type].layer.setVisible(true);
		},
		/**
		 * 注记层/行政区划 显示与隐藏
		 */
		handleLayerChange() {
     
			for (let i in this.mapLayers) {
     
				this.mapLayers[i].layer.setVisible(false);
			}
			for (let i in this.checkLayers) {
     
				this.mapLayers[this.checkLayers[i]].layer.setVisible(true);
			}
		},
		/**
		 * 切换全屏
		 */
		handleFullScreen() {
     
			if (this.isFullScreen) {
     
				this.exitfullscreen();
			} else {
     
				this.enterfullscreen();
			}
		},
		/**
		 * 回到原点
		 */
		handleBackCenter()