<template>
|
<div id="mapView" class="olBox">
|
<div class="menuTool">
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item label="经度:">
|
{{ formInline.lon }}
|
</el-form-item>
|
<el-form-item label="纬度:">
|
{{ formInline.lat }}
|
</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, Icon, Text } from 'ol/style';
|
import { Point } from 'ol/geom';
|
import ImageWMS from "ol/source/ImageWMS";
|
import Image from "ol/layer/Image";
|
import mapData from '@/assets/js/mapSdk/mapData.js';
|
import mapConfig from '../../assets/js/mapSdk/mapConfig';
|
import * as turf from '@turf/turf'
|
export default {
|
props: {
|
parentData: {
|
type: String,
|
default: '',
|
|
}
|
},
|
data() {
|
return {
|
mapol: null,
|
drawLayer: null,
|
formInline: {
|
lon: '',
|
lat: ''
|
}
|
}
|
},
|
mounted() {
|
this.initOlMap();
|
},
|
methods: {
|
initOlMap() {
|
const baseLayer = mapData.baseLayer;
|
const vecUrl = baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl
|
var vectorLayer = new TileLayer({
|
source: new XYZ({
|
url: vecUrl + config.tdToken,
|
}),
|
});
|
const cvaUrl = baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl
|
var vectorLayer1 = new TileLayer({
|
source: new XYZ({
|
url: cvaUrl + config.tdToken,
|
}),
|
});
|
this.mapol = new Map({
|
target: 'mapView',
|
layers: [vectorLayer, vectorLayer1],
|
view: new View({
|
center: transform([112.5545931210261, 37.86275646283009], 'EPSG:4326', 'EPSG:3857'),
|
zoom: 12,
|
projection: 'EPSG:3857',
|
}),
|
});
|
|
|
var layer2 = new Image({
|
name: "Wms_Layer",
|
source: new ImageWMS({
|
crossOrigin: "anonymous",
|
url: config.geoServer.url + config.geoServer.wms,
|
params: {
|
FORMAT: "image/png",
|
VERSION: "1.1.1",
|
LAYERS: 'sxpw:sxdwx',
|
},
|
}),
|
});
|
this.mapol.addLayer(layer2);
|
if (this.parentData) {
|
const obj = mapConfig.getWKTParse(this.parentData)
|
this.formInline = {
|
lon: obj.coordinates[0],
|
lat: obj.coordinates[1],
|
}
|
this.addPointData(obj);
|
}
|
},
|
addPointData(res) {
|
const coord = res.coordinates;
|
|
const urlImg = config.sdkImg + 'Workers/image/mark.png';
|
var geom = transform(
|
[parseFloat(coord[0]), parseFloat(coord[1])],
|
'EPSG:4326',
|
'EPSG:3857'
|
);
|
var feature = new Feature({
|
geometry: new Point(geom),
|
});
|
feature.setStyle(
|
new Style({
|
image: new Icon({
|
scale: [0.8, 0.8],
|
src: urlImg
|
}),
|
|
})
|
);
|
|
const source = new VectorSource();
|
source.addFeature(feature);
|
this.drawLayer = new VectorLayer();
|
this.drawLayer.setSource(source);
|
this.mapol.addLayer(this.drawLayer);
|
this.setOlLocal(coord)
|
},
|
setOlLocal(geom) {
|
this.mapol.getView().animate({
|
center: transform(geom, 'EPSG:4326', 'EPSG:3857'), // 中心点
|
zoom: 18, // 缩放级别
|
|
});
|
|
},
|
drowPoint() {
|
const source = new VectorSource({ wrapX: false });
|
this.clearDrawPoint();
|
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.formInline.lon = parseFloat(a1[0]).toFixed(6);
|
this.formInline.lat = parseFloat(a1[1]).toFixed(6);
|
var point = turf.point([this.formInline.lon, this.formInline.lat]);
|
const gPoint= mapConfig.getWKTConvert(point.geometry)
|
this.$emit('childData', gPoint);
|
this.mapol.removeInteraction(this.draw);
|
});
|
},
|
clearDrawPoint() {
|
if (this.drawLayer) {
|
this.mapol.removeLayer(this.drawLayer);
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.olBox {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
padding: 0;
|
|
::v-deep.ol-control {
|
display: none;
|
}
|
|
.menuTool {}
|
}
|
</style>
|