<!--
?* @Description: 實(shí)時(shí)坐標(biāo)點(diǎn)
?* @Author: Dragon
?* @Date: 2020-12-18 10:08:40
?* @LastEditTime: 2020-12-18 15:59:29
?* @LastEditors: Dragon
-->
?
<template>
? <div id="map"></div>
</template>
?
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { Image as ImageLayer, Vector as VectorLayer } from "ol/layer";
import { ImageStatic, Vector as VectorSource } from "ol/source";
import { getCenter } from "ol/extent";
import { Projection } from "ol/proj";
?
import { Point } from "ol/geom";
import { Icon, Style, Text, Fill, Stroke } from "ol/style";
?
// import { websocket } ?from "./mixins";
import staticMap from "@/assets/map.png";
import img from "@/assets/tx-icon-1.png";
?
?
export default {
? data() {
? ? return {
? ? ? map: null, // 地圖
? ? ? imgx: 0, // 當(dāng)前地圖寬
? ? ? imgy: 0, // 當(dāng)前地圖高
? ? ? persons: [], // 人員
? ? ? features: [],
? ? ? feature: null,
? ? ? vectorSource: new VectorSource(),
? ? ? timer: null
? ? };
? },
? // mixins: [websocket],
? watch: {
? ? persons(val) {
? ? ? if (val) {
? ? ? ? this.setFeature();
? ? ? }
? ? },
? },
? methods: {
? ? ?// 初始化地圖
? ? initMap() {
? ? ? let extent = [0, 0, this.imgx, this.imgy];
? ? ? let projection = new Projection({
? ? ? ? extent: extent
? ? ? });
? ? ? let $this = this;
? ? ? // 默認(rèn)地圖
? ? ? let mapLayer = new ImageLayer({ ?
? ? ? ? source: new ImageStatic({
? ? ? ? ? url: staticMap,
? ? ? ? ? projection: projection,
? ? ? ? ? imageExtent: extent
? ? ? ? })
? ? ? })
? ? ? // 繪制點(diǎn)
? ? ? let featureLayer = new VectorLayer({
? ? ? ? source: this.vectorSource,
? ? ? });
?
? ? ? this.map = new Map({
? ? ? ? target: "map",
? ? ? ? layers: [
? ? ? ? ? mapLayer,
? ? ? ? ? featureLayer
? ? ? ? ],
? ? ? ? view: new View({
? ? ? ? ? projection: projection,
? ? ? ? ? center: getCenter(extent),
? ? ? ? ? zoom: 2,
? ? ? ? ? maxZoom: 18
? ? ? ? })
? ? ? });
? ? },
?
? ? // WebSocket數(shù)據(jù)接收
? ? // getMessage(message) {
? ? ? // let res = JSON.parse(message.data);
? ? ? // this.persons = res.data;
? ? // },
?
? ? // 點(diǎn)
? ? setFeature() {
? ? ? let that = this;
? ? ? that.features = [];
? ? ? that.vectorSource.clear(); // 先清除
? ? ? that.persons.map((item) => {
? ? ? ? that.feature = new Feature({
? ? ? ? ? geometry: new Point([item.x, item.y]),
? ? ? ? ? name: item.name,
? ? ? ? });
? ? ? ? // 設(shè)置Feature的樣式，使用小旗子圖標(biāo)
? ? ? ? that.feature.setStyle(
? ? ? ? ? new Style({
? ? ? ? ? ? image: new Icon({
? ? ? ? ? ? ? anchor: [0, 1],
? ? ? ? ? ? ? src: img,
? ? ? ? ? ? }),
? ? ? ? ? ? text: new Text({
? ? ? ? ? ? ? // 位置
? ? ? ? ? ? ? textAlign: "center",
? ? ? ? ? ? ? // 基準(zhǔn)線
? ? ? ? ? ? ? textBaseline: "middle",
? ? ? ? ? ? ? // 文字樣式
? ? ? ? ? ? ? font: "normal 20px 微軟雅黑",
? ? ? ? ? ? ? // 文本內(nèi)容
? ? ? ? ? ? ? text: item.name,
? ? ? ? ? ? ? // 文本填充樣式（即文字顏色）
? ? ? ? ? ? ? fill: new Fill({ color: "#aa3300" }),
? ? ? ? ? ? ? stroke: new Stroke({ color: "#ffcc33", width: 2 }),
? ? ? ? ? ? }),
? ? ? ? ? })
? ? ? ? );
? ? ? ? that.features.push(that.feature);
? ? ? });
? ? ? that.vectorSource.addFeatures(that.features);
? ? },
? },
? mounted() {
? ? let img = new Image();
? ? img.src = staticMap;
? ? let that = this;
? ? img.onload = function(res) {
? ? ? that.imgx = res.target.width;
? ? ? that.imgy = res.target.height;
? ? ? that.initMap();
? ? ? // that.initWebSocket();
? ? };
? },
? created() {
? ? let that = this
? ? that.timer = setInterval(function() {
? ? ? that.persons = [
? ? ? ? {id: 1, name: "點(diǎn)-1", x: 497.08, y: 187.88, z: 0},
? ? ? ? {id: 2, name: "點(diǎn)-2", x: 725.32, y: 565.88, z: 0},
? ? ? ? {id: 3, name: "點(diǎn)-3", x: 643.24, y: 503.96, z: 0}
? ? ? ]
? ? ? console.warn(that.persons, 22)
? ? },3000)
? },
? beforeDestroy() {
? ? clearInterval(this.timer)
? }
};
</script>
?
<style>
#map {
? width: 100%;
? height: calc(100Vh - 50px);
}
</style>