From 05d9fb2ae038a5b3bf80eaaa864141bc278084a5 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期四, 30 五月 2024 17:17:19 +0800
Subject: [PATCH] 代码更新
---
src/components/ProjectOl.vue | 460 ++++++++++++++++++++++++++++----------------------------
1 files changed, 230 insertions(+), 230 deletions(-)
diff --git a/src/components/ProjectOl.vue b/src/components/ProjectOl.vue
index 285d7ac..d736419 100644
--- a/src/components/ProjectOl.vue
+++ b/src/components/ProjectOl.vue
@@ -1,230 +1,230 @@
-<template>
- <div
- id="mapView"
- class="projectBox"
- >
- <div class="Tools box_divm">
- <el-form
- :inline="true"
- :model="formInline"
- class="demo-form-inline"
- >
- <el-form-item :label="$t('dataManage.projectObj.longitude')">
- {{formInline.lon}}
- </el-form-item>
- <el-form-item :label="$t('dataManage.projectObj.latitude')">
- {{formInline.lat}}
- </el-form-item>
- <el-form-item :label="$t('dataManage.projectObj.country')">
- {{formInline.country}}
- </el-form-item>
- <el-form-item :label="$t('dataManage.projectObj.province')">
- {{formInline.province}}
- </el-form-item>
- <el-form-item :label="$t('dataManage.projectObj.county')">
- {{formInline.location}}
- </el-form-item>
-
- <el-form-item>
- <el-button
- type="success"
- icon="el-icon-plus"
- @click="drowPoint"
- ></el-button>
- <el-button
- type="danger"
- icon="el-icon-delete"
- @click="clearDrawPoint"
- ></el-button>
- </el-form-item>
- </el-form>
-
- </div>
- </div>
-</template>
-
-<script>
-import TileLayer from 'ol/layer/Tile';
-import XYZ from 'ol/source/XYZ';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import { transform } from 'ol/proj';
-import VectorSource from 'ol/source/Vector';
-import { Vector as VectorLayer, Tile } from 'ol/layer';
-import { Draw } from 'ol/interaction';
-import Feature from 'ol/Feature';
-import { Circle as CircleStyle, Style, Fill, Stroke } from 'ol/style';
-import { Point } from 'ol/geom';
-import { project_selectLocation } from '../api/api.js'
-export default {
- data() {
- return {
- mapol: null,
- drawLayer: null,
- draw: null,
- formInline: {
- lon: '',
- lat: '',
- location: '',
- province: '',
- country: ''
- }
- };
- },
- methods: {
- initOlMap() {
-
-
- var val = 'http://{host}/LFData/2d/tiles/img/{z}/{x}/{y}.png';
- if (val.indexOf('{host}') > -1) {
- val = val.replace("{host}", iisHost)
- }
- var vectorLayer = new TileLayer({
- source: new XYZ({
- url: val,
- }),
- });
-
-
-
- this.mapol = new Map({
- target: 'mapView',
- layers: [vectorLayer],
- view: new View({
- center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
- zoom: 4,
- projection: 'EPSG:3857',
- }),
- });
- if (this.$store.state.projeOl != null) {
- this.showPointInMap();
- }
- },
- showPointInMap() {
- var value = this.$store.state.projeOl
- .replace('POINT(', '')
- .replace(')', '');
- var a1 = value.split(' ');
- this.showLoacation(a1)
- var a2 = transform(
- [parseFloat(a1[0]), parseFloat(a1[1])],
- 'EPSG:4326',
- 'EPSG:3857'
- );
- var feature = new Feature({
- geometry: new Point(a2),
- });
- feature.setStyle(
- new Style({
- image: new CircleStyle({
- fill: new Fill({
- color: 'blue',
- }),
- radius: 4,
- }),
- })
- );
- let source = new VectorSource();
- source.addFeature(feature);
- this.drawLayer = new VectorLayer();
- this.drawLayer.setSource(source);
- this.mapol.addLayer(this.drawLayer);
- },
- clearDrawPoint() {
- if (this.drawLayer) {
- this.mapol.removeLayer(this.drawLayer);
- this.drawLayer = null;
- this.$store.state.projeOl = null;
- this.formInline = {
- lon: '',
- lat: '',
- location: '',
- province: '',
- country: ''
- }
- }
- },
-
- drowPoint() {
- const source = new VectorSource({ wrapX: false });
- if (this.drawLayer) {
- this.mapol.removeLayer(this.drawLayer);
- }
- this.drawLayer = new VectorLayer({
- source: source,
- });
- this.mapol.addLayer(this.drawLayer);
- this.draw = new Draw({
- source: source, // 鍜屽浘灞備娇鐢ㄥ悓涓�涓猻ource锛岀敾鐨勫浘褰㈠湪鍥惧眰涓婏紝鍥惧眰鍦ㄥ湴鍥句笂鍗冲彲灞曠ず
- type: 'Point', // 鍙�夋嫨涓夎褰紝澶氳竟褰紝鍦嗗舰绛夊叿浣撹瀹樼綉demo
- freehand: false, // 鐢婚�夎繕鏄偣閫�
- });
- // 娣诲姞浜や簰
- this.mapol.addInteraction(this.draw);
- this.draw.on('drawend', (e) => {
- let feature = e.feature;
- let geom = feature.getGeometry();
- var extent = geom.flatCoordinates;
- var a1 = transform([extent[0], extent[1]], 'EPSG:3857', 'EPSG:4326');
- this.showLoacation(a1)
- this.$store.state.projeOl =
- 'POINT(' + a1[0].toFixed(6) + ' ' + a1[1].toFixed(6) + ')';
- this.mapol.removeInteraction(this.draw);
- });
- },
- async showLoacation(res) {
-
- this.formInline.lon = parseFloat(res[0]).toFixed(6);
- this.formInline.lat = parseFloat(res[1]).toFixed(6);
- const data = await project_selectLocation({
- x: res[0],
- y: res[1],
- });
- if (data.code == 200) {
- for (var i in data.result) {
- var key = data.result[i].key;
- var val = data.result[i].value;
- if (key == "鍥�") {
- this.formInline.country = val;
- } else if (key == "鐪�") {
- this.formInline.province = val;
- } else if (key == "甯�") {
- this.formInline.location = val;
- }
- }
- }
- }
-
-
- },
- mounted() {
- this.initOlMap();
- },
-};
-</script>
-
-<style lang="less" scoped>
-.projectBox {
- width: 100%;
- height: 100%;
- overflow: hidden;
- margin: 0;
- padding: 0;
- /deep/.el-form-item {
- margin-bottom: 0px;
- }
-}
-.Tools {
- position: absolute;
-
- opacity: 0.9;
- z-index: 40;
- padding: 10px;
- width: 95%;
-}
-.primary {
- background: #409eff;
- border: #409eff;
- color: white;
-}
-</style>
+<template>
+ <div
+ id="mapView"
+ class="projectBox"
+ >
+ <div class="Tools box_divm">
+ <el-form
+ :inline="true"
+ :model="formInline"
+ class="demo-form-inline"
+ >
+ <el-form-item :label="$t('dataManage.projectObj.longitude')">
+ {{formInline.lon}}
+ </el-form-item>
+ <el-form-item :label="$t('dataManage.projectObj.latitude')">
+ {{formInline.lat}}
+ </el-form-item>
+ <el-form-item :label="$t('dataManage.projectObj.country')">
+ {{formInline.country}}
+ </el-form-item>
+ <el-form-item :label="$t('dataManage.projectObj.province')">
+ {{formInline.province}}
+ </el-form-item>
+ <el-form-item :label="$t('dataManage.projectObj.county')">
+ {{formInline.location}}
+ </el-form-item>
+
+ <el-form-item>
+ <el-button
+ type="success"
+ icon="el-icon-plus"
+ @click="drowPoint"
+ ></el-button>
+ <el-button
+ type="danger"
+ icon="el-icon-delete"
+ @click="clearDrawPoint"
+ ></el-button>
+ </el-form-item>
+ </el-form>
+
+ </div>
+ </div>
+</template>
+
+<script>
+import TileLayer from 'ol/layer/Tile';
+import XYZ from 'ol/source/XYZ';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import { transform } from 'ol/proj';
+import VectorSource from 'ol/source/Vector';
+import { Vector as VectorLayer, Tile } from 'ol/layer';
+import { Draw } from 'ol/interaction';
+import Feature from 'ol/Feature';
+import { Circle as CircleStyle, Style, Fill, Stroke } from 'ol/style';
+import { Point } from 'ol/geom';
+import { project_selectLocation } from '../api/api.js'
+export default {
+ data() {
+ return {
+ mapol: null,
+ drawLayer: null,
+ draw: null,
+ formInline: {
+ lon: '',
+ lat: '',
+ location: '',
+ province: '',
+ country: ''
+ }
+ };
+ },
+ methods: {
+ initOlMap() {
+
+
+ var val = '{host}/LFData/2d/tiles/img/{z}/{x}/{y}.png';
+ if (val.indexOf('{host}') > -1) {
+ val = val.replace("{host}", iisHost)
+ }
+ var vectorLayer = new TileLayer({
+ source: new XYZ({
+ url: val,
+ }),
+ });
+
+
+
+ this.mapol = new Map({
+ target: 'mapView',
+ layers: [vectorLayer],
+ view: new View({
+ center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
+ zoom: 4,
+ projection: 'EPSG:3857',
+ }),
+ });
+ if (this.$store.state.projeOl != null) {
+ this.showPointInMap();
+ }
+ },
+ showPointInMap() {
+ var value = this.$store.state.projeOl
+ .replace('POINT(', '')
+ .replace(')', '');
+ var a1 = value.split(' ');
+ this.showLoacation(a1)
+ var a2 = transform(
+ [parseFloat(a1[0]), parseFloat(a1[1])],
+ 'EPSG:4326',
+ 'EPSG:3857'
+ );
+ var feature = new Feature({
+ geometry: new Point(a2),
+ });
+ feature.setStyle(
+ new Style({
+ image: new CircleStyle({
+ fill: new Fill({
+ color: 'blue',
+ }),
+ radius: 4,
+ }),
+ })
+ );
+ let source = new VectorSource();
+ source.addFeature(feature);
+ this.drawLayer = new VectorLayer();
+ this.drawLayer.setSource(source);
+ this.mapol.addLayer(this.drawLayer);
+ },
+ clearDrawPoint() {
+ if (this.drawLayer) {
+ this.mapol.removeLayer(this.drawLayer);
+ this.drawLayer = null;
+ this.$store.state.projeOl = null;
+ this.formInline = {
+ lon: '',
+ lat: '',
+ location: '',
+ province: '',
+ country: ''
+ }
+ }
+ },
+
+ drowPoint() {
+ const source = new VectorSource({ wrapX: false });
+ if (this.drawLayer) {
+ this.mapol.removeLayer(this.drawLayer);
+ }
+ this.drawLayer = new VectorLayer({
+ source: source,
+ });
+ this.mapol.addLayer(this.drawLayer);
+ this.draw = new Draw({
+ source: source, // 鍜屽浘灞備娇鐢ㄥ悓涓�涓猻ource锛岀敾鐨勫浘褰㈠湪鍥惧眰涓婏紝鍥惧眰鍦ㄥ湴鍥句笂鍗冲彲灞曠ず
+ type: 'Point', // 鍙�夋嫨涓夎褰紝澶氳竟褰紝鍦嗗舰绛夊叿浣撹瀹樼綉demo
+ freehand: false, // 鐢婚�夎繕鏄偣閫�
+ });
+ // 娣诲姞浜や簰
+ this.mapol.addInteraction(this.draw);
+ this.draw.on('drawend', (e) => {
+ let feature = e.feature;
+ let geom = feature.getGeometry();
+ var extent = geom.flatCoordinates;
+ var a1 = transform([extent[0], extent[1]], 'EPSG:3857', 'EPSG:4326');
+ this.showLoacation(a1)
+ this.$store.state.projeOl =
+ 'POINT(' + a1[0].toFixed(6) + ' ' + a1[1].toFixed(6) + ')';
+ this.mapol.removeInteraction(this.draw);
+ });
+ },
+ async showLoacation(res) {
+
+ this.formInline.lon = parseFloat(res[0]).toFixed(6);
+ this.formInline.lat = parseFloat(res[1]).toFixed(6);
+ const data = await project_selectLocation({
+ x: res[0],
+ y: res[1],
+ });
+ if (data.code == 200) {
+ for (var i in data.result) {
+ var key = data.result[i].key;
+ var val = data.result[i].value;
+ if (key == "鍥�") {
+ this.formInline.country = val;
+ } else if (key == "鐪�") {
+ this.formInline.province = val;
+ } else if (key == "甯�") {
+ this.formInline.location = val;
+ }
+ }
+ }
+ }
+
+
+ },
+ mounted() {
+ this.initOlMap();
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.projectBox {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ /deep/.el-form-item {
+ margin-bottom: 0px;
+ }
+}
+.Tools {
+ position: absolute;
+
+ opacity: 0.9;
+ z-index: 40;
+ padding: 10px;
+ width: 95%;
+}
+.primary {
+ background: #409eff;
+ border: #409eff;
+ color: white;
+}
+</style>
--
Gitblit v1.9.3