<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, // 和图层使用同一个source，画的图形在图层上，图层在地图上即可展示
|
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>
|
