<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 v-show="isShow">
|
<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'
|
import LineString from 'ol/geom/LineString';
|
export default {
|
props: {
|
parentData: {
|
type: String,
|
default: '',
|
|
}
|
},
|
data() {
|
return {
|
isShow: true,
|
mapol: null,
|
drawLayer: null,
|
formInline: {
|
lon: '',
|
lat: ''
|
}
|
}
|
},
|
mounted() {
|
this.initOlMap();
|
},
|
methods: {
|
initOlMap() {
|
const baseLayer = mapData.baseLayer;
|
const vecUrl = baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl
|
const geo= config.geoServer;
|
// 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,
|
// }),
|
// });
|
var layer2 = new Image({
|
name: "Wms_Layer",
|
source: new ImageWMS({
|
crossOrigin: "anonymous",
|
url: geo.url + geo.wms,
|
params: {
|
FORMAT: "image/png",
|
VERSION: "1.1.1",
|
LAYERS: geo.layers[0],
|
},
|
}),
|
});
|
this.mapol.addLayer(layer2);
|
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: geo.url + geo.wms,
|
params: {
|
FORMAT: "image/png",
|
VERSION: "1.1.1",
|
LAYERS: geo.layers[1],
|
},
|
}),
|
});
|
this.mapol.addLayer(layer2);
|
if (this.parentData) {
|
if (this.parentData.indexOf('type') > -1) {
|
const data = JSON.parse(this.parentData)[0];
|
this.isShow = data.isShow
|
if (data.type == 'point') {
|
const obj = mapConfig.getWKTParse(data.val.point)
|
this.formInline = {
|
lon: obj.coordinates[0],
|
lat: obj.coordinates[1],
|
}
|
this.addPointData(obj);
|
} else if (data.type == 'line') {
|
const obj = mapConfig.getWKTParse(data.val.f_location)
|
this.formInline = {
|
lon: obj.coordinates[0],
|
lat: obj.coordinates[1],
|
}
|
this.addPointData(obj);
|
const line = mapConfig.getWKTParse(data.val.re_position)
|
this.addLineData(line)
|
}
|
|
} else {
|
const obj = mapConfig.getWKTParse(this.parentData)
|
this.formInline = {
|
lon: obj.coordinates[0],
|
lat: obj.coordinates[1],
|
}
|
this.addPointData(obj);
|
}
|
|
|
}
|
},
|
addLineData(res) {
|
var coord = res.coordinates;
|
var geom = [];
|
coord.filter(i => {
|
geom.push(transform(
|
i,
|
'EPSG:4326',
|
'EPSG:3857'
|
))
|
})
|
var feature = new Feature({
|
type: 'LineString',
|
geometry: new LineString(geom),
|
});
|
feature.setStyle(
|
new Style({
|
stroke: new Stroke({
|
color: 'blue',
|
width: 3,
|
}),
|
|
})
|
);
|
const extent = feature.getGeometry().getExtent()
|
var source = new VectorSource();
|
source.addFeature(feature);
|
// 创建线的矢量图层
|
var vectorLayer = new VectorLayer();
|
vectorLayer.setSource(source);
|
this.mapol.addLayer(vectorLayer);
|
this.mapol.getView().fit(extent, {
|
size: this.mapol.getSize(),
|
padding: [100, 100,200,100], // 四个方向的边距，可选
|
constrainResolution: false, // 是否限制分辨率，可选
|
});
|
},
|
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>
|
