• 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">
			
			<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() {
			this.map.getView().setCenter(this.mapCenter);
		},

		/**
		 * 初始化地图
		 */
		initMap() {
			// 天地图图层
			const tdLayer = new TileLayer({
				source: new XYZ({
					crossOrigin: "anonymous",
					projection: "EPSG:4326",
					url: "https://t0.tianditu.gov.cn/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=地图的key",
				}),
				className: "dt",
			});

			// 天地图文字图层
			const tdTextLayer = new TileLayer({
				source: new XYZ({
					crossOrigin: "anonymous",
					projection: "EPSG:4326",
					url: "https://t0.tianditu.gov.cn/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=地图的key",
				}),
				className: "txt",
			});

			this.map = new Map({
				target: "map",
				view: new View({
					center: this.mapCenter,
					projection: olProj.get("EPSG:4326"),
					zoom: 13,
					maxZoom: 17,
					minZoom: 1,
				}),
			});

			this.map.addLayer(tdLayer);
			this.map.addLayer(tdTextLayer);
			this.mapLayers.zjc = { layer: tdTextLayer, show: true };

			//卫星影像图层
			const projection = olProj.get("EPSG:4326");
			const projectionExtent = projection.getExtent();
			const size = getWidth(projectionExtent) / 256;
			const resolutions = [];
			const matrixIds = [];
			for (let z = 0; z < 20; ++z) {
				resolutions[z] = size / Math.pow(2, z + 1);
				matrixIds[z] = z + 1;
			}
			const tdwxLayer = new TileLayer({
				opacity: 1,
				visible: false,
				source: new WMTS({
					crossOrigin: "anonymous",
					url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=地图的key",
					layer: "wxt",
					matrixSet: "c",
					format: "tiles",
					style: "default",
					projection: this.projection,
					tileGrid: new WMTSTileGrid({
						origin: getTopLeft(projectionExtent),
						resolutions: resolutions,
						matrixIds: matrixIds,
					}),
					wrapX: true,
				}),
			});
			this.map.addLayer(tdwxLayer);

			this.underlayer.sldt = { layer: tdLayer, show: true };
			this.underlayer.wxdt = { layer: tdwxLayer, show: false };
		},
		/**
		 * 初始化深颜色地图
		 */
		initDeepColorMap() {
			const view = new View({
				center: this.mapCenter,
				zoom: 12, //图层缩放大小
				projection: "EPSG:4326",
			});

			this.map = new Map({
				target: "map",
				view: view,
				controls: defaultControls({
					zoom: true,
					attribution: false,
					rotate: false,
				}),
			});

			// 添加矢量底图
			let url = "https://t0.tianditu.gov.cn/DataServer?x={x}&y={y}&l={z}";
			url = `${url}&T=vec_c&tk=地图的key`;
			const source = new XYZ({
				crossOrigin: "anonymous",
				url: url,
				projection: "EPSG:4326",
			});
			const tdtLayer = new TileLayer({
				className: "blueLayer",
				source: source,
			});
			this.map.addLayer(tdtLayer);

			// 添加矢量注记
			url = "https://t0.tianditu.gov.cn/DataServer?x={x}&y={y}&l={z}";
			url = `${url}&T=cva_c&tk=地图的key`;
			const sourceCVA = new XYZ({
				crossOrigin: "anonymous",
				url: url,
				projection: "EPSG:4326",
			});
			const tdtcvaLayer = new TileLayer({
				className: "blueLayer",
				source: sourceCVA,
			});
			this.map.addLayer(tdtcvaLayer);
			this.mapLayers.zjc = { layer: tdtcvaLayer, show: true };

			//卫星影像图层
			const projection = olProj.get("EPSG:4326");
			const projectionExtent = projection.getExtent();
			const size = getWidth(projectionExtent) / 256;
			const resolutions = [];
			const matrixIds = [];
			for (let z = 0; z < 20; ++z) {
				resolutions[z] = size / Math.pow(2, z + 1);
				matrixIds[z] = z + 1;
			}
			const tdwxLayer = new TileLayer({
				opacity: 1,
				visible: false,
				source: new WMTS({
					crossOrigin: "anonymous",
					url:
						"http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=地图的key",
					layer: "wxt",
					matrixSet: "c",
					format: "tiles",
					style: "default",
					projection: this.projection,
					tileGrid: new WMTSTileGrid({
						origin: getTopLeft(projectionExtent),
						resolutions: resolutions,
						matrixIds: matrixIds,
					}),
					wrapX: true,
				}),
			});
			this.map.addLayer(tdwxLayer);

			this.underlayer.sldt = { layer: tdtLayer, show: true };
			this.underlayer.wxdt = { layer: tdwxLayer, show: false };
		},
		initBlueColorMap() {
			let target = "map";

			let tileLayer = [
				new TileLayer({
					source: new XYZ({
						url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
					}),
				}),
			];
			let view = new View({
				center: this.mapCenter,
				zoom: 12,
			});
			this.map = new Map({
				target: target,
				layers: tileLayer,
				view: view,
			});

			const TiandiMap_cia = new TileLayer({
				name: "天地图影像注记图层",
				source: new XYZ({
					url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=地图的key", //parent.TiandituKey()为天地图密钥
					wrapX: false,
				}),
			});
			// 添加到地图上
			this.map.addLayer(TiandiMap_cia);
		},

		/**
		 * 地图事件
		 */
		initEvent() {
			// 地图加载完成
			this.map.once("rendercomplete", () => {
				// 行政区划
				this.addProvinceBorder();

				// 添加点位
				//this.addPoint([[118.103288, 36.96607]], require("@/assets/image/homecar2.png"), -(Math.PI / 3));

				this.$emit("complete", this.map);
			});

			// 地图点击
			this.map.on("click", e => {
				// 点位弹窗
				var pixel = this.map.getEventPixel(e.originalEvent);
				console.log(e.coordinate);
				let feature = this.map.forEachFeatureAtPixel(pixel, feature => {
					return feature;
				});
				if (feature && feature.name && feature.name != "cityScope") {
					var coodinate = e.coordinate;
					this.popup.content = "你点击的坐标为：" + coodinate;
					this.popup.popupOverlay.setPosition(coodinate);
					this.map.addOverlay(this.popup.popupOverlay);

					this.$emit("pointClick", true, feature.name, e.coordinate, e.pixel);
				} else {
					this.$emit("pointClick", false, feature.name, e.coordinate, e.pixel);
					this.popup.popupOverlay.setPosition(undefined);
				}
			});
		},
		/**
		 * 初始化点位弹窗
		 */
		initPointPopup() {
			var container = document.getElementById("popup");
			var popupCloser = document.getElementById("popup-closer");
			this.popup.popupOverlay = new Overlay({
				element: container,
				autoPan: true,
			});

			popupCloser.addEventListener("click", function() {
				this.popup.popupOverlay.setPosition(undefined);
			});
		},

		/***
		 * 加行政区域边界
		 * 获取geojson数据地址: https://datav.aliyun.com/portal/school/atlas/area_selector
		 */
		addProvinceBorder(geojson) {
			//行政区划边界图层
			const provinceLayer = new VectorLayer({
				renderMode: "vector",
				source: new VectorSource(),
				zIndex: 0,
			});
			this.map.addLayer(provinceLayer);
			this.mapLayers.xzqh = { layer: provinceLayer, show: true };

			// 加载geojson
			let qxn = geojson ? geojson : require("../mixins/370321.json");
			qxn.features.forEach(featureJSON => {
				let feature = new GeoJSON().readFeature(featureJSON);
				feature.set("name", feature.values_.NAME);
				feature.setStyle(
					new Style({
						stroke: new Stroke({
							//边框
							color: "rgba(3,15,83, 1)",
							width: 1,
						}),
						fill: new Fill({
							//填充
							color: "rgba(3,15,83, 0.5)", // "rgba(255, 255, 255, 0.5)"
						}),
					})
				);
				provinceLayer.getSource().addFeature(feature);
			});
		},

		/**
		 * 添加点位
		 * @param {*} list [[经度, 纬度], [经度, 纬度]]
		 * @param {*} icon 点位图标图片路径
		 * @param {*} angle 旋转角度
		 * @param {*} popupType 弹窗类型  可以在template中自定义多种弹窗, 然后指定弹出哪个
		 */
		addPoint(list, icon, angle, popupType = 0) {
			// 设置图层
			const flagLayer = new VectorLayer({
				source: new VectorSource(),
			});
			// 添加图层
			this.map.addLayer(flagLayer);

			let featuresArr = [];

			// 循环添加feature
			for (let i = 0; i < list.length; i++) {
				// 创建feature，一个feature就是一个点坐标信息
				let feature = new Feature({
					geometry: new Point([list[i][0], list[i][1]]),
				});
				feature.name = "point";
				feature.popupType = popupType;

				// 设置要素的图标
				feature.setStyle(
					new Style({
						// 设置图片效果
						image: new Icon({
							src: icon,
							anchor: [0.5, 0.9],
							scale: 1,
							rotation: angle || 0,
						}),
						zIndex: 6000,
					})
				);

				// feature.setStyle(
				//   new Style({
				//     // 设置图片效果
				//     image: new CircleStyle({
				//       radius: 10,
				//       stroke: new Stroke({
				//         color: '#fff'
				//       }),
				//       fill: new Fill({
				//         color: '#3399cc'
				//       })
				//     }),
				//     zIndex: 3000,
				//     name: '1111'
				//   }),

				// );

				featuresArr.push(feature);
			} // for 结束
			// 批量添加feature
			flagLayer.getSource().addFeatures(featuresArr);
		},

		 gis
		handleGisCommand(cmd) {
			switch (cmd) {
				case "1":
					this.drawDistance();
					break;
				case "2":
					this.drawArea();
					break;
				case "3":
					this.drawClear();
					break;
				case "4":
					this.printMap();
					break;

				default:
					break;
			}
		},
		/**
		 * 测距离
		 */
		drawDistance() {
			let source = new VectorSource(); // 首先创建一个数据源，用来放置绘制过程中和绘制结束后的线段
			const layer = new VectorLayer({
				// 添加一个图层，用来放置数据源，样式自己随便设置就可以了，我这里默认的官网
				source: source,
				style: new Style({
					fill: new Fill({
						color: "rgba(255, 255, 255, 0.2)",
					}),
					stroke: new Stroke({
						color: "#ffcc33",
						width: 4,
					}),
					image: new CircleStyle({
						radius: 7,
						fill: new Fill({
							color: "#ffcc33",
						}),
					}),
				}),
				zIndex: 4000,
			});
			this.mapDraw.mapMouseMove = this.map.on("pointermove", ev => {
				// 给地图添加一个鼠标移动事件
				let helpMsg = "点击开始测量"; // 默认开始的操作提示文本
				if (this.mapDraw.feature) {
					// featuer 是全局的，判断有没有点击鼠标绘制过
					helpMsg = "双击结束测量"; // 如果之前点击绘制了就显示双击结束
				}
				this.mapDraw.helpTooltipElement.innerHTML = helpMsg; // 设置dom的提示文字
				this.mapDraw.helpTooltip.setPosition(ev.coordinate); // 设置位置跟着鼠标走
				this.mapDraw.helpTooltipElement.classList.remove("hidden"); // 让他显示出来
			});
			this.drawCreateHelpTooltip(); // 创建那个helpTooltipElement方法
			this.map.addLayer(layer); // 把图层添加到地图
			this.mapDraw.drawLayers.push(layer); // 保存起来

			// 开始绘制线
			this.mapDraw.draw = new Draw({
				source: source,
				type: "LineString", // 绘制线
				style: new Style({
					// 绘制完成之前线的样式，这是官网的样式，需要的话自己可以修改成自己想要的样子
					fill: new Fill({
						color: "rgba(255, 255, 255, 0.2)",
					}),
					stroke: new Stroke({
						color: "rgba(0, 0, 0, 0.5)",
						lineDash: [10, 10],
						width: 4,
					}),
					image: new CircleStyle({
						radius: 5,
						stroke: new Stroke({
							color: "rgba(0, 0, 0, 0.7)",
						}),
						fill: new Fill({
							color: "rgba(255, 255, 255, 0.2)",
						}),
					}),
				}),
			});
			this.map.addInteraction(this.mapDraw.draw); // draw 绑定到地图上面去

			// 格式化长度， 直接官网代码
			const formatLength = function(line) {
				const length = getLength(line);
				let output;
				if (length > 100) {
					output = Math.round((length / 1000) * 100) / 100 + " " + "km";
				} else {
					output = Math.round(length * 100) / 100 + " " + "m";
				}
				return output;
			};
			this.drawCreateMeasureTooltip(); // 创建那个距离的提示框

			// 开始监听绘制
			const _this = this;
			this.mapDraw.draw.on("drawstart", evt => {
				_this.mapDraw.feature = evt.feature; // feature就是全局的
				let tooltipCoord = evt.coordinate; // 鼠标当前的位置
				_this.mapDraw.listener = _this.mapDraw.feature.getGeometry().on("change", function(evt) {
					const geom = evt.target;
					let output = formatLength(geom); // 距离的格式
					tooltipCoord = geom.getLastCoordinate(); // 设置鼠标位置改变后的实时位置
					_this.mapDraw.measureTooltipElement.innerHTML = output; // 设置提示框的内容，就是距离
					_this.mapDraw.measureTooltip.setPosition(tooltipCoord); // 设置距离提示框的位置
				});
			});

			// 双击绘制完成
			this.mapDraw.draw.on("drawend", () => {
				this.mapDraw.measureTooltipElement.className = "ol-tooltip ol-tooltip-static";
				this.mapDraw.measureTooltip.setOffset([0, -7]);
				this.mapDraw.feature = null;
				this.mapDraw.measureTooltipElement = null;
				this.drawCreateMeasureTooltip();
				unByKey(this.mapDraw.listener);

				// 画完一次就终止(不连续画线)
				unByKey(this.mapDraw.mapMouseMove);
				setTimeout(() => {
					this.mapDraw.helpTooltipElement.classList.add("hidden");
					this.mapDraw.helpTooltipElement = null;
					this.map.removeInteraction(this.mapDraw.draw);
				}, 50);
			});
		},
		/**
		 * 测距离提示信息
		 */
		drawCreateHelpTooltip() {
			if (this.mapDraw.helpTooltipElement) {
				this.mapDraw.helpTooltipElement.parentNode.removeChild(this.mapDraw.helpTooltipElement);
			}
			this.mapDraw.helpTooltipElement = document.createElement("div");
			this.mapDraw.helpTooltipElement.className = "ol-tooltip hidden";
			this.mapDraw.helpTooltip = new Overlay({
				element: this.mapDraw.helpTooltipElement,
				offset: [15, 0],
				positioning: "center-left",
			});
			this.map.addOverlay(this.mapDraw.helpTooltip);
		},
		/**
		 * 测距离提示信息
		 */
		drawCreateMeasureTooltip() {
			if (this.mapDraw.measureTooltipElement) {
				this.mapDraw.measureTooltipElement.parentNode.removeChild(this.mapDraw.measureTooltipElement);
			}
			this.mapDraw.measureTooltipElement = document.createElement("div");
			this.mapDraw.measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
			this.mapDraw.measureTooltip = new Overlay({
				element: this.mapDraw.measureTooltipElement,
				offset: [0, -15],
				positioning: "bottom-center",
				stopEvent: false,
				insertFirst: false,
			});
			this.mapDraw.drawElements.push(this.mapDraw.measureTooltip);
			this.map.addOverlay(this.mapDraw.measureTooltip);
		},
		/**
		 * 清空绘制
		 */
		drawClear() {
			for (let i = 0; i < this.mapDraw.drawLayers.length; i++) {
				this.map.removeLayer(this.mapDraw.drawLayers[i]);
			}
			for (let i = 0; i < this.mapDraw.drawElements.length; i++) {
				this.map.removeOverlay(this.mapDraw.drawElements[i]);
			}
			this.mapDraw.drawLayers = [];
			this.mapDraw.drawElements = [];
			this.map.removeInteraction(this.mapDraw.draw);
			unByKey(this.mapDraw.mapMouseMove);
		},

		/// 测面积
		drawArea() {
			let source = new VectorSource(); // 首先创建一个数据源，用来放置绘制过程中和绘制结束后的线段
			const layer = new VectorLayer({
				// 添加一个图层，用来放置数据源，样式自己随便设置就可以了，我这里默认的官网
				source: source,
				style: new Style({
					fill: new Fill({
						color: "rgba(255, 255, 255, 0.2)",
					}),
					stroke: new Stroke({
						color: "#ffcc33",
						width: 4,
					}),
					image: new CircleStyle({
						radius: 7,
						fill: new Fill({
							color: "#ffcc33",
						}),
					}),
				}),
				zIndex: 4000,
			});
			this.mapDraw.mapMouseMove = this.map.on("pointermove", ev => {
				// 给地图添加一个鼠标移动事件
				let helpMsg = "点击开始测量"; // 默认开始的操作提示文本
				if (this.mapDraw.feature) {
					// featuer 是全局的，判断有没有点击鼠标绘制过
					helpMsg = "双击结束测量"; // 如果之前点击绘制了就显示双击结束
				}
				this.mapDraw.helpTooltipElement.innerHTML = helpMsg; // 设置dom的提示文字
				this.mapDraw.helpTooltip.setPosition(ev.coordinate); // 设置位置跟着鼠标走
				this.mapDraw.helpTooltipElement.classList.remove("hidden"); // 让他显示出来
			});
			this.drawCreateHelpTooltip(); // 创建那个helpTooltipElement方法
			this.map.addLayer(layer); // 把图层添加到地图
			this.mapDraw.drawLayers.push(layer); // 保存起来

			// 开始绘制线
			this.mapDraw.draw = new Draw({
				source: source,
				type: "Polygon", // 绘制线
				style: new Style({
					// 绘制完成之前线的样式，这是官网的样式，需要的话自己可以修改成自己想要的样子
					fill: new Fill({
						color: "rgba(255, 255, 255, 0.2)",
					}),
					stroke: new Stroke({
						color: "rgba(0, 0, 0, 0.5)",
						lineDash: [10, 10],
						width: 4,
					}),
					image: new CircleStyle({
						radius: 5,
						stroke: new Stroke({
							color: "rgba(0, 0, 0, 0.7)",
						}),
						fill: new Fill({
							color: "rgba(255, 255, 255, 0.2)",
						}),
					}),
				}),
			});
			this.map.addInteraction(this.mapDraw.draw); // draw 绑定到地图上面去
			const _this = this;
			// 面积测量函数
			const formatArea = function(polygon) {
				var sourceProj = _this.map.getView().getProjection(); // 获取投影坐标系
				var area = getArea(polygon, {
					projection: sourceProj,
				});
				var output;
				if (area > 10000) {
					output = Math.round((area / 1000000) * 100) / 100 + " " + "km2";
				} else {
					output = Math.round(area * 100) / 100 + " " + "m2";
				}
				return output;
			};
			this.drawCreateMeasureTooltip(); // 创建那个距离的提示框

			// 开始监听绘制

			this.mapDraw.draw.on("drawstart", evt => {
				_this.mapDraw.feature = evt.feature; // feature就是全局的
				let tooltipCoord = evt.coordinate; // 鼠标当前的位置
				_this.mapDraw.listener = _this.mapDraw.feature.getGeometry().on("change", function(evt) {
					const geom = evt.target;
					let output = formatArea(geom); // 距离的格式
					tooltipCoord = geom.getInteriorPoint().getCoordinates(); // 设置鼠标位置改变后的实时位置
					_this.mapDraw.measureTooltipElement.innerHTML = output; // 设置提示框的内容，就是距离
					_this.mapDraw.measureTooltip.setPosition(tooltipCoord); // 设置距离提示框的位置
				});
			});

			// 双击绘制完成
			this.mapDraw.draw.on("drawend", () => {
				this.mapDraw.measureTooltipElement.className = "ol-tooltip ol-tooltip-static";
				this.mapDraw.measureTooltip.setOffset([0, -7]);
				this.mapDraw.feature = null;
				this.mapDraw.measureTooltipElement = null;
				this.drawCreateMeasureTooltip();
				unByKey(this.mapDraw.listener);

				// 画完一次就终止(不连续画线)
				unByKey(this.mapDraw.mapMouseMove);
				setTimeout(() => {
					this.mapDraw.helpTooltipElement.classList.add("hidden");
					this.mapDraw.helpTooltipElement = null;
					this.map.removeInteraction(this.mapDraw.draw);
				}, 50);
			});
		},

		/**
		 * 打印地图(将地图保存为图片)
		 */
		printMap() {
			const that = this;
			let exportOptions = {
				filter: function(element) {
					var className = element.className || "";
					return (
						className.indexOf("ol-control") === -1 ||
						className.indexOf("ol-scale") > -1 ||
						(className.indexOf("ol-attribution") > -1 && className.indexOf("ol-uncollapsible"))
					);
				},
			};
			that.map.once("rendercomplete", function(e) {
				// exportOptions.width = 1000;
				// exportOptions.height = 800;
				domtoimage.toJpeg(that.map.getViewport(), exportOptions).then(function(dataUrl) {
					saveAs(dataUrl, "map.jpg");
				});
			});
			that.map.updateSize();
		},

		 gis end

		/ 全屏
		enterfullscreen() {
			//进入全屏
			let docElm = document.documentElement;
			//FireFox
			if (docElm.mozRequestFullScreen) {
				docElm.mozRequestFullScreen();
			}
			//Chrome等
			else if (docElm.webkitRequestFullScreen) {
				docElm.webkitRequestFullScreen();
			}
			//IE11
			else if (elem.msRequestFullscreen) {
				elem.msRequestFullscreen();
			}
			this.isFullScreen = true;
		},

		exitfullscreen() {
			//退出全屏
			if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.webkitCancelFullScreen) {
				document.webkitCancelFullScreen();
			} else if (document.msExitFullscreen) {
				document.msExitFullscreen();
			}
			this.isFullScreen = false;
		},

		 全屏 end

		/// 轨迹回放,  轨迹运动
		//轨迹线
		addTrack() {
			this.mapTrack.route = new LineString(this.mapTrack.coordinates);
			this.mapTrack.geometryMove = new Point(this.mapTrack.route.getFirstCoordinate());

			this.mapTrack.featureMove = new Feature({
				type: "featureMove",
				geometry: this.mapTrack.geometryMove,
			});
			this.mapTrack.featureMove.name = "track_point";

			//坐标转换
			this.mapTrack.dotsData = this.mapTrack.coordinates.map(item => {
				return transform(item, "EPSG:3857", "EPSG:4326");
			});
			//深复制车的位置，不在原数组改变，方便重新播放
			// this.carPoints = JSON.parse(JSON.stringify(this.dotsData));
			this.mapTrack.carPoints = [...this.mapTrack.dotsData];

			this.mapTrack.routeLayer = new VectorLayer({
				source: new VectorSource({
					features: [
						new Feature({
							type: "route",
							geometry: this.mapTrack.route,
						}),
						this.mapTrack.featureMove,
						new Feature({
							type: "startIcon",
							geometry: new Point(this.mapTrack.route.getFirstCoordinate()),
						}),
						new Feature({
							type: "endIcon",
							geometry: new Point(this.mapTrack.route.getLastCoordinate()),
						}),
						new Feature({
							type: "featureMove",
							geometry: new Point(this.mapTrack.carPoints[0]),
						}),
					],
				}),
				style: feature => {
					if (feature.get("type") == "route") {
						return new Style({
							stroke: new Stroke({
								width: 6,
								color: [25, 59, 128, 1],
							}),
						});
					} else if (feature.get("type") == "startIcon") {
						return new Style({
							// image: new Icon({
							// 	anchor: [0.5, 1],
							// 	src: "",
							// 	// src: require("@/assets/image/map_start.png"),
							// 	// src: require("@/assets/image/homecar2.png"),
							// 	scale: 1, //设置大小
							// }),
						});
					} else if (feature.get("type") == "endIcon") {
						return new Style({
							// image: new Icon({
							// 	anchor: [0.5, 1],
							// 	src: "",
							// 	// src: require("@/assets/image/map_end.png"),
							// 	// src: require("@/assets/image/homecar2.png"),
							// 	scale: 1, //设置大小
							// }),
						});
					} else if (feature.get("type") == "featureMove") {
						return new Style({
							image: new Icon({
								//	src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
								// src: require("@/assets/image/map_arrow.png"),
								src: require("@/assets/image/homecar2.png"),
								scale: 1,
								//anchor: [0.5, 0.5],
								rotation: this.trackCountRotate(),
							}),
						});
					}
					//return this.mapTrack.styles[feature.get("type")];
				},
			});

			this.map.addLayer(this.mapTrack.routeLayer);
		},
		/**
		 * 小车开始运动
		 */
		trackMoveStart() {
			this.mapTrack.timer = setInterval(() => {
				if (this.mapTrack.routeIndex + 1 >= this.mapTrack.carPoints.length) {
					//重头开始
					this.mapTrack.routeIndex = 0;
					//移除要素
					// this.mapTrack.routeLayer.getSource().removeFeature(this.mapTrack.featureMove);
					clearInterval(this.mapTrack.timer);
					//重复运动
					// this.addTrack();
					// this.trackMoveStart();
					//this.open(); //自动开启功能
					return;
				}
				//到转折点旋转角度
				if (this.trackNextPoint() === this.mapTrack.carPoints[this.mapTrack.routeIndex + 1]) {
					this.mapTrack.routeIndex++;

					if (this.mapTrack.featureMove.getStyle()) {
						this.mapTrack.featureMove
							.getStyle()
							.getImage()
							.setRotation(this.trackCountRotate());
					}
				}
				//改变坐标点
				this.mapTrack.featureMove.getGeometry().setCoordinates(fromLonLat(this.mapTrack.carPoints[this.mapTrack.routeIndex]));

				// 经过的点位
				console.log(this.mapTrack.coordinates[this.mapTrack.routeIndex]);
			}, 10);
		},
		/**
		 * 小车暂停运动
		 */
		trackMovePause() {
			clearInterval(this.mapTrack.timer);
		},
		//计算下一个点的位置
		//这里的算法是计算了两点之间的点   两点之间的连线可能存在很多个计算出来的点
		trackNextPoint() {
			let routeIndex = this.mapTrack.routeIndex;
			let p1 = this.map.getPixelFromCoordinate(fromLonLat(this.mapTrack.carPoints[routeIndex])); //获取在屏幕的像素位置
			let p2 = this.map.getPixelFromCoordinate(fromLonLat(this.mapTrack.carPoints[routeIndex + 1]));
			let dx = p2[0] - p1[0];
			let dy = p2[1] - p1[1];
			//打印可见  在没有走到下一个点之前，下一个点是不变的，前一个点以这个点为终点向其靠近
			let distance = Math.sqrt(dx * dx + dy * dy);
			if (distance <= 1) {
				return this.mapTrack.carPoints[routeIndex + 1];
			} else {
				let x = p1[0] + dx / distance;
				let y = p1[1] + dy / distance;
				let coor = transform(this.map.getCoordinateFromPixel([x, y]), "EPSG:3857", "EPSG:4326");
				this.mapTrack.carPoints[routeIndex] = coor; //这里会将前一个点重新赋值  要素利用这个坐标变化进行移动
				return this.mapTrack.carPoints[routeIndex];
			}
		},
		//计算两点之间的角度  算旋转角度
		trackCountRotate() {
			let i = this.mapTrack.routeIndex,
				j = i + 1;
			if (j === this.mapTrack.carPoints.length) {
				i--;
				j--;
			}
			let p1 = this.mapTrack.carPoints[i];
			let p2 = this.mapTrack.carPoints[j];
			return Math.atan2(p2[0] - p1[0], p2[1] - p1[1]);
		},
		resetTrack() {
			clearInterval(this.mapTrack.timer);
			this.mapTrack.routeLayer.getSource().clear();
			this.map.removeLayer(this.mapTrack.routeLayer);
			this.mapTrack.featureMove = {};
			this.mapTrack.geometryMove = {};
			this.mapTrack.timer = null;
			this.mapTrack.carPoints = [];
			this.mapTrack.routeIndex = 0;
			this.mapTrack.routeLayer = {};
			this.mapTrack.route = null;
		},
	},
};
script>

<style lang="scss" scoped>
.mapBox {
	width: 100%;
	height: 100%;
	position: relative;
}
.map {
	width: 100%;
	height: 100%;
}

/deep/.ol-control {
	display: none;
}

/deep/.blueLayer {
	// filter: grayscale(100%) sepia(21%) invert(100%) saturate(150%) brightness(100%);
	filter: grayscale(98%) invert(100%) sepia(50%) hue-rotate(180deg) saturate(2000%) brightness(50%) contrast(90%) !important;
}

.optionsBox {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1000;
	display: flex;
	align-items: center;
}
style>


<style lang="scss" scoped>
/deep/.ol-tooltip {
	position: relative;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	color: white;
	padding: 4px 8px;
	opacity: 0.7;
	white-space: nowrap;
	font-size: 12px;
	cursor: default;
	user-select: none;
}

/deep/ .hidden {
	display: none;
}

/deep/.ol-tooltip-measure {
	opacity: 1;
	font-weight: bold;
}

/deep/.ol-tooltip-static {
	background-color: #ffcc33;
	color: black;
	border: 1px solid white;
}

/deep/.ol-tooltip-measure:before,
/deep/.ol-tooltip-static:before {
	border-top: 6px solid rgba(0, 0, 0, 0.5);
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	content: "";
	position: absolute;
	bottom: -6px;
	margin-left: -7px;
	left: 50%;
}

/deep/.ol-tooltip-static:before {
	border-top-color: #ffcc33;
}
style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
    • 485
    • 486
    • 487
    • 488
    • 489
    • 490
    • 491
    • 492
    • 493
    • 494
    • 495
    • 496
    • 497
    • 498
    • 499
    • 500
    • 501
    • 502
    • 503
    • 504
    • 505
    • 506
    • 507
    • 508
    • 509
    • 510
    • 511
    • 512
    • 513
    • 514
    • 515
    • 516
    • 517
    • 518
    • 519
    • 520
    • 521
    • 522
    • 523
    • 524
    • 525
    • 526
    • 527
    • 528
    • 529
    • 530
    • 531
    • 532
    • 533
    • 534
    • 535
    • 536
    • 537
    • 538
    • 539
    • 540
    • 541
    • 542
    • 543
    • 544
    • 545
    • 546
    • 547
    • 548
    • 549
    • 550
    • 551
    • 552
    • 553
    • 554
    • 555
    • 556
    • 557
    • 558
    • 559
    • 560
    • 561
    • 562
    • 563
    • 564
    • 565
    • 566
    • 567
    • 568
    • 569
    • 570
    • 571
    • 572
    • 573
    • 574
    • 575
    • 576
    • 577
    • 578
    • 579
    • 580
    • 581
    • 582
    • 583
    • 584
    • 585
    • 586
    • 587
    • 588
    • 589
    • 590
    • 591
    • 592
    • 593
    • 594
    • 595
    • 596
    • 597
    • 598
    • 599
    • 600
    • 601
    • 602
    • 603
    • 604
    • 605
    • 606
    • 607
    • 608
    • 609
    • 610
    • 611
    • 612
    • 613
    • 614
    • 615
    • 616
    • 617
    • 618
    • 619
    • 620
    • 621
    • 622
    • 623
    • 624
    • 625
    • 626
    • 627
    • 628
    • 629
    • 630
    • 631
    • 632
    • 633
    • 634
    • 635
    • 636
    • 637
    • 638
    • 639
    • 640
    • 641
    • 642
    • 643
    • 644
    • 645
    • 646
    • 647
    • 648
    • 649
    • 650
    • 651
    • 652
    • 653
    • 654
    • 655
    • 656
    • 657
    • 658
    • 659
    • 660
    • 661
    • 662
    • 663
    • 664
    • 665
    • 666
    • 667
    • 668
    • 669
    • 670
    • 671
    • 672
    • 673
    • 674
    • 675
    • 676
    • 677
    • 678
    • 679
    • 680
    • 681
    • 682
    • 683
    • 684
    • 685
    • 686
    • 687
    • 688
    • 689
    • 690
    • 691
    • 692
    • 693
    • 694
    • 695
    • 696
    • 697
    • 698
    • 699
    • 700
    • 701
    • 702
    • 703
    • 704
    • 705
    • 706
    • 707
    • 708
    • 709
    • 710
    • 711
    • 712
    • 713
    • 714
    • 715
    • 716
    • 717
    • 718
    • 719
    • 720
    • 721
    • 722
    • 723
    • 724
    • 725
    • 726
    • 727
    • 728
    • 729
    • 730
    • 731
    • 732
    • 733
    • 734
    • 735
    • 736
    • 737
    • 738
    • 739
    • 740
    • 741
    • 742
    • 743
    • 744
    • 745
    • 746
    • 747
    • 748
    • 749
    • 750
    • 751
    • 752
    • 753
    • 754
    • 755
    • 756
    • 757
    • 758
    • 759
    • 760
    • 761
    • 762
    • 763
    • 764
    • 765
    • 766
    • 767
    • 768
    • 769
    • 770
    • 771
    • 772
    • 773
    • 774
    • 775
    • 776
    • 777
    • 778
    • 779
    • 780
    • 781
    • 782
    • 783
    • 784
    • 785
    • 786
    • 787
    • 788
    • 789
    • 790
    • 791
    • 792
    • 793
    • 794
    • 795
    • 796
    • 797
    • 798
    • 799
    • 800
    • 801
    • 802
    • 803
    • 804
    • 805
    • 806
    • 807
    • 808
    • 809
    • 810
    • 811
    • 812
    • 813
    • 814
    • 815
    • 816
    • 817
    • 818
    • 819
    • 820
    • 821
    • 822
    • 823
    • 824
    • 825
    • 826
    • 827
    • 828
    • 829
    • 830
    • 831
    • 832
    • 833
    • 834
    • 835
    • 836
    • 837
    • 838
    • 839
    • 840
    • 841
    • 842
    • 843
    • 844
    • 845
    • 846
    • 847
    • 848
    • 849
    • 850
    • 851
    • 852
    • 853
    • 854
    • 855
    • 856
    • 857
    • 858
    • 859
    • 860
    • 861
    • 862
    • 863
    • 864
    • 865
    • 866
    • 867
    • 868
    • 869
    • 870
    • 871
    • 872
    • 873
    • 874
    • 875
    • 876
    • 877
    • 878
    • 879
    • 880
    • 881
    • 882
    • 883
    • 884
    • 885
    • 886
    • 887
    • 888
    • 889
    • 890
    • 891
    • 892
    • 893
    • 894
    • 895
    • 896
    • 897
    • 898
    • 899
    • 900
    • 901
    • 902
    • 903
    • 904
    • 905
    • 906
    • 907
    • 908
    • 909
    • 910
    • 911
    • 912
    • 913
    • 914
    • 915
    • 916
    • 917
    • 918
    • 919
    • 920
    • 921
    • 922
    • 923
    • 924
    • 925
    • 926
    • 927
    • 928
    • 929
    • 930
    • 931
    • 932
    • 933
    • 934
    • 935
    • 936
    • 937
    • 938
    • 939
    • 940
    • 941
    • 942
    • 943
    • 944
    • 945
    • 946
    • 947
    • 948
    • 949
    • 950
    • 951
    • 952
    • 953
    • 954
    • 955
    • 956
    • 957
    • 958
    • 959
    • 960
    • 961
    • 962
    • 963
    • 964
    • 965
    • 966
    • 967
    • 968
    • 969
    • 970
    • 971
    • 972
    • 973
    • 974
    • 975
    • 976
    • 977
    • 978
    • 979
    • 980
    • 981
    • 982
    • 983
    • 984
    • 985
    • 986
    • 987
    • 988
    • 989
    • 990
    • 991
    • 992
    • 993
    • 994
    • 995
    • 996
    • 997
    • 998
    • 999
    • 1000
    • 1001
    • 1002
    • 1003
    • 1004
    • 1005
    • 1006
    • 1007
    • 1008
    • 1009
    • 1010
    • 1011
    • 1012
    • 1013
    • 1014
    • 1015
    • 1016
    • 1017
    • 1018
    • 1019
    • 1020
    • 1021
    • 1022
    • 1023
    • 1024
    • 1025
    • 1026
    • 1027
    • 1028
    • 1029
    • 1030
    • 1031
    • 1032
    • 1033
    • 1034
    • 1035
    • 1036
    • 1037
    • 1038
    • 1039
    • 1040
    • 1041
    • 1042
    • 1043
    • 1044
    • 1045
    • 1046
    • 1047
    • 1048
    • 1049
    • 1050
    • 1051
    • 1052
    • 1053
    • 1054
    • 1055
    • 1056
    • 1057
    • 1058
    • 1059
    • 1060
    • 1061
    • 1062
    • 1063
    • 1064
    • 1065
    • 1066
    • 1067
    • 1068
    • 1069
    • 1070
    • 1071
    • 1072
    • 1073
    • 1074
    • 1075
    • 1076
    • 1077
    • 1078
    • 1079
    • 1080
    • 1081
    • 1082
    • 1083
    • 1084
    • 1085
    • 1086
    • 1087
    • 1088
    • 1089
    • 1090
    • 1091
    • 1092
    • 1093
    • 1094
    • 1095
    • 1096
    • 1097
    • 1098
    • 1099
    • 1100
    • 1101
    • 1102
    • 1103
    • 1104
    • 1105
    • 1106
    • 1107
    • 1108
    • 1109
    • 1110
    • 1111
    • 1112
    • 1113
    • 1114
    • 1115
    • 1116
    • 1117
    • 1118
    • 1119
    • 1120
    • 1121
    • 1122
    • 1123
    • 1124
    • 1125
    • 1126
    • 1127
    • 1128
    • 1129
    • 1130
    • 1131
    • 1132
    • 1133
    • 1134
    • 1135
    • 1136
    • 1137
    • 1138
    • 1139
    • 1140
    • 1141
    • 1142
    • 1143
    • 1144
    • 1145
    • 1146
    • 1147
    • 1148
    • 1149
    • 1150
    • 1151
    • 1152
    • 1153
    • 1154
    • 1155
    • 1156
    • 1157
    • 1158
    • 1159
    • 1160
    • 1161
    • 1162
    • 1163
    • 1164
    • 1165
    • 1166
    • 1167
    • 1168
    • 1169
    • 1170
    • 1171
    • 1172
    • 1173
  • 相关阅读:
    SAP MM 关于事务代码VL04的一个测试 II
    Day725.Java为何需要模块化 -Java8后最重要新特性
    MySQL-字符串按照数值排序
    蓝桥等考Python组别六级003
    单片机之从C语言基础到专家编程 - 4 C语言基础 - 4.12枚举
    Vue3 - style v-bind 动态样式（详细使用教程）
    内网学习笔记(4)
    基于BiGRU和GAN的数据生成方法
    软件测试面试题之测试基础，想轻松应对面试，看完这篇就够了
    Redis-双写一致性
  • 原文地址：https://blog.csdn.net/zhao3756/article/details/134084758