From 915189d8af9ac17ff1daed8825e666f07d82ddf0 Mon Sep 17 00:00:00 2001
From: Apcallover <1503963513@qq.com>
Date: Wed, 15 May 2024 18:11:01 +0800
Subject: [PATCH] =?UTF-8?q?flat:=20=E4=BF=AE=E6=94=B9=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                       |   1 +
 .env.hengshui                          |   1 +
 .env.production                        |   3 +-
 src/components/map/selectLocation2.vue | 386 +++++++++++++++++++++++++
 src/main.js                            |   3 +-
 5 files changed, 392 insertions(+), 2 deletions(-)
 create mode 100644 src/components/map/selectLocation2.vue

diff --git a/.env.development b/.env.development
index fc72183..601eae2 100644
--- a/.env.development
+++ b/.env.development
@@ -2,3 +2,4 @@ VUE_APP_SITE='default'
 VUE_APP_LOGIN_ERROR = http://10.160.7.216:9920/casserver/login
 VUE_APP_REPLACE_STR = {"{oss_file_url}": "http://10.165.0.173:8000", "https://dy12333.org.cn/api/jobslink-api/front/file": "http://10.165.0.173:8000/jobslink-api/front/file"}
 VUE_APP_LOGIN_NEXT = 'http://10.160.7.216:9920/casserver/login?service=http://10.165.0.173/manage/login&stService=http%3A%2F%2F10.165.0.173%2Fmanage%2Flogin'
+VUE_APP_SUPPER_MAP =  'http://10.165.0.44:1205/proxy/rest/maps/c02c6f51f3ab4190bffd5e3e54cf5ac4/111013e9067749488d44841208771768',
diff --git a/.env.hengshui b/.env.hengshui
index 6cc96a5..62e1215 100644
--- a/.env.hengshui
+++ b/.env.hengshui
@@ -2,3 +2,4 @@ VUE_APP_SITE='hengshui'
 VUE_APP_LOGIN_ERROR = http://10.160.7.216:9920/casserver/login
 VUE_APP_REPLACE_STR = {"{oss_file_url}": "http://10.165.0.173:8000", "https://dy12333.org.cn/api/jobslink-api/front/file": "http://10.165.0.173:8000/jobslink-api/front/file"}
 VUE_APP_LOGIN_NEXT = 'http://10.160.7.216:9920/casserver/login?service=http://10.165.0.173/manage/login&stService=http%3A%2F%2F10.165.0.173%2Fmanage%2Flogin'
+VUE_APP_SUPPER_MAP =  'http://10.165.0.44:1205/proxy/rest/maps/c02c6f51f3ab4190bffd5e3e54cf5ac4/111013e9067749488d44841208771768',
diff --git a/.env.production b/.env.production
index a093d52..d918ddc 100644
--- a/.env.production
+++ b/.env.production
@@ -1,4 +1,5 @@
 VUE_APP_SITE='default'
 VUE_APP_LOGIN_ERROR = http://10.160.7.216:9920/casserver/login
-VUE_APP_REPLACE_STR = {"{oss_file_url}": "http://10.165.0.173:8000", "https://dy12333.org.cn/api/jobslink-api/front/file": "http://10.165.0.173:8000/jobslink-api/front/file"}
+VUE_APP_REPLACE_STR = {"{oss_file_url}": "http://10.165.0.173:8000", "https://dy12333.org.cn/api/jobslink-api/front/file": "http://10.165.0.77:8000/jobslink-api/front/file"}
 VUE_APP_LOGIN_NEXT = 'http://10.160.7.216:9920/casserver/login?service=http://10.165.0.54:8300/manage/login&stService=http%3A%2F%2F10.165.0.54%3A8300%2Fmanage%2Flogin'
+VUE_APP_SUPPER_MAP =  'http://10.165.0.44:1205/proxy/rest/maps/c02c6f51f3ab4190bffd5e3e54cf5ac4/111013e9067749488d44841208771768',
diff --git a/src/components/map/selectLocation2.vue b/src/components/map/selectLocation2.vue
new file mode 100644
index 0000000..08cb627
--- /dev/null
+++ b/src/components/map/selectLocation2.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="app-content">
+    <div id="map" style="width: 100%;height: 100%;"></div>
+  </div>
+</template>
+
+<script>
+import 'ol/ol.css';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import SourceVector from 'ol/source/Vector';
+import LayerVector from 'ol/layer/Vector';
+import * as control from 'ol/control';
+import {
+  toLonLat
+} from 'ol/proj';
+import Overlay from 'ol/Overlay';
+import {
+  toStringHDMS
+} from 'ol/coordinate';
+import {
+  Select
+} from 'ol/interaction'
+import {
+  GeoJSON
+} from 'ol/format';
+import {
+  Style,
+  Circle,
+  Fill,
+  Stroke,
+  Icon,
+  Text
+} from 'ol/style';
+import Feature from 'ol/Feature';
+import {
+  Point,
+  Polygon
+} from 'ol/geom';
+import {
+  Logo,
+  TileSuperMapRest,
+  FeatureService,
+  GetFeaturesByGeometryParameters
+} from '@supermap/iclient-ol';
+
+export default {
+  name: "uMapView",
+  props: {
+    latitude: {
+      required: true,
+    },
+    longitude: {
+      required: true,
+    },
+    zoom: {
+      type: Number,
+      required: false,
+      default: 10,
+    },
+    maxZoom: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    minZoom: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    ScaleZoom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    MapUrl: { // 瓦片地图URL
+      type: String,
+      required: false,
+      default: process.env.VUE_APP_SUPPER_MAP,
+    },
+    flagTip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    open: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      // 实例化对象
+      map: null,
+      addPointsSource: null,
+      vectorSource: null,
+      vectorSourceIcon: null,
+      vectorLayerIcon: null,
+      selectInteraction: null,
+      helpTooltipElement: null,
+      helpTooltip: null,
+      isclearPoint: null,
+      overlay: null,
+      // 控制参数
+      isShowToolTip: false,
+    };
+  },
+  mounted() {
+    this.initMap()
+    if (this.flagTip) {
+      this.createHelpTooltip()
+    }
+  },
+  methods: {
+    initMap() {
+      this.map = new Map({
+        target: 'map',
+        controls: control.defaults({
+          attribution: false,
+          zoom: this.ScaleZoom,
+        }),
+        layers: [
+          new TileLayer({ // 使用瓦片
+            source: new TileSuperMapRest({
+              url: this.MapUrl,
+              wrapX: true,
+            }),
+            projection: 'EPSG:4326',
+          }),
+        ],
+        view: new View({
+          center: [this.longitude, this.latitude],
+          maxZoom: this.maxZoom,
+          minZoom: this.minZoom,
+          zoom: this.zoom,
+          projection: 'EPSG:4326',
+        })
+      });
+      //添加查询结果图层
+      this.vectorSource = new SourceVector({
+        wrapX: false
+      });
+      const resultLayer = new LayerVector({
+        source: this.vectorSource,
+      });
+
+      //添加点图层
+      this.addPointsSource = new SourceVector({
+        wrapX: false
+      });
+      const addPointsLayer = new LayerVector({
+        source: this.addPointsSource,
+      });
+      this.map.addLayer(addPointsLayer);
+      this.map.addLayer(resultLayer);
+      this.map.on('pointermove', (e) => {
+        if (this.isShowToolTip) {
+          this.helpTooltip.setPosition(undefined);
+          this.helpTooltipElement.classList.add('hidden');
+        }
+        this.$emit('regionchange', e.pixel)
+      });
+      this.map.on('singleclick', (e) => {
+        this.$emit('clickMap', this.coordinate)
+      });
+
+      // if (this.open) {
+      //   this.addFeature([{
+      //     id: 1,
+      //     latitude: this.latitude,
+      //     longitude: this.longitude,
+      //     iconPath: mypoint,
+      //     title: '我的位置',
+      //     width: 20,
+      //     height: 20
+      //   }])
+      // }
+
+    },
+    addMarker(point) {
+      console.log('point', point)
+      // this.ceateMarker([104.404419, 31.133980])
+    },
+    addFeature(covers) {
+      const features = covers.map((item) => ({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [item.longitude, item.latitude],
+        },
+        properties: {
+          iconPath: item.iconPath,
+          text: item.title,
+          value: JSON.stringify(item),
+          scale: item.id === 1 ? [0.15, 0.15] : [0.1, 0.1]
+        }
+      }))
+
+      this.careateFeature(features)
+
+    },
+    ceateMarker(point) {
+      // 创建一个坐标点
+      const pointed = new Point(point); // 这里的[0, 0]应该替换为您的经度和纬度
+
+      // 创建一个特征
+      const pointFeature = new Feature({
+        geometry: pointed,
+        name: 'My Point'
+      });
+
+      pointFeature.setStyle(new Style({
+        image: new Circle({
+          fill: new Fill({
+            color: [255, 0, 0, 0.5]
+          }),
+          stroke: new Stroke({
+            color: 'red',
+            width: 2
+          }),
+          radius: 8
+        })
+      }));
+
+      pointFeature.setProperties({
+        POP: 1,
+        CAPITAL: 'test'
+      });
+      // 将特征添加到矢量图层
+      this.addPointsSource.addFeature(pointFeature);
+      // 确保更新地图视图以显示新的标点
+      this.map.getView().fit(this.addPointsSource.getExtent());
+      // // 或者移动视图
+      // _this.map.getView().animate({
+      //     duration: 850,
+      //     zoom: 5,
+      //     center: point,
+      // });
+
+    },
+    careateFeature(result) {
+      if (this.vectorSourceIcon) {
+        this.vectorSourceIcon.clear()
+      }
+      const geojsonObject = {
+        type: 'FeatureCollection',
+        features: result,
+      };
+      // 创建一个图层作为点位
+      this.vectorSourceIcon = new SourceVector({
+        features: new GeoJSON().readFeatures(geojsonObject)
+      });
+      this.vectorLayerIcon = new LayerVector({
+        source: this.vectorSourceIcon,
+        style: feature => {
+          return new Style({
+            image: new Icon({
+              anchor: [0.5, 0.9],
+              scale: feature.get('scale'),
+              src: feature.get('iconPath'),
+            }),
+            text: new Text({
+              text: feature.get('text'),
+              fill: new Fill({
+                color: '#000'
+              }),
+              stroke: new Stroke({
+                color: '#fff',
+                width: 3
+              }),
+              font: 'normal 12px Calibri, sans-serif',
+              textAlign: 'center', // 文本对齐
+              offsetX: 0,
+              offsetY: 15,
+              rotation: 0, // 文本旋转
+            }),
+          });
+        }
+      });
+      this.map.addLayer(this.vectorLayerIcon);
+      this.selectInteraction = new Select({
+        layers: [this.vectorLayerIcon]
+      });
+      this.selectInteraction.on('select', (event) => {
+        const selectedFeatures = event.selected;
+        if (selectedFeatures.length) {
+          const select = selectedFeatures[0].values_
+          this.$emit('markertap', JSON.parse(select.value))
+          // tooltip
+          if (this.flagTip) {
+            const coordinate = selectedFeatures[0].values_.geometry.flatCoordinates;
+            this.helpTooltipElement.innerHTML = select.text;
+            console.log(this.helpTooltip)
+            this.helpTooltip.setPosition(coordinate);
+            this.helpTooltipElement.classList.remove('hidden');
+            this.map.addOverlay(this.helpTooltip);
+            this.isShowToolTip = true
+          }
+        }
+      });
+      this.map.addInteraction(this.selectInteraction);
+    },
+    createHelpTooltip() {
+      this.helpTooltipElement
+      if (this.helpTooltipElement) {
+        this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
+      }
+      this.helpTooltipElement = document.createElement('div');
+      this.helpTooltipElement.className = 'tooltip hidden';
+      this.helpTooltip = new Overlay({
+        element: this.helpTooltipElement,
+        offset: [-30, 20],
+        positioning: 'center-left'
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-content {
+  width: 100%;
+  height: 300px;
+}
+
+.editPane {
+  position: absolute;
+  right: 65px;
+  top: 8px;
+  text-align: center;
+  background: #FFF;
+  z-index: 1000;
+  border-radius: 4px;
+}
+
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  bottom: 12px;
+  left: -50px;
+  min-width: 120px;
+  white-space: nowrap;
+}
+
+.ol-popup:after,
+.ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+
+.tooltip {
+  position: relative;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+  color: white;
+  padding: 4px 8px;
+  opacity: 0.7;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index c73f3f7..d03038c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,7 +23,7 @@ import cityLabelCascader from './components/city-cascader/label'
 import goBack from './components/go-back/main'
 import tagSelect from './components/tag-select/main'
 import tooltip from './components/tooltip/index'
-
+import superMapView from './components/map/selectLocation2.vue';
 import i18n from './lang' // Internationalization
 import axios from './router/axios';
 import router from './router/router';
@@ -44,6 +44,7 @@ Vue.component('jl-city-cascader', cityCascader);
 Vue.component('jl-cityLabel-cascader', cityLabelCascader);
 Vue.component('tag-select', tagSelect)
 Vue.component('tool-tip', tooltip)
+Vue.component('superMap-View', superMapView)
 // 加载相关url地址
 Object.keys(urls).forEach(key => {
   Vue.prototype[key] = urls[key];