|
|
@@ -22,12 +22,10 @@ import { defaults, ScaleLine } from 'ol/control';
|
|
|
import Vector from 'ol/layer/Vector';
|
|
|
import SourceVector from 'ol/source/Vector';
|
|
|
import GeoJSON from 'ol/format/GeoJSON';
|
|
|
-import { fromLonLat } from 'ol/proj';
|
|
|
import axios from 'axios';
|
|
|
import { fromExtent } from 'ol/geom/Polygon';
|
|
|
import { LinearRing, LineString, Polygon } from 'ol/geom';
|
|
|
import { Graticule } from 'ol/layer';
|
|
|
-import { getPointsCenter, mergeGeoJsonPolygons } from '@/utils/gisUtils';
|
|
|
import { Cluster } from 'ol/source';
|
|
|
import CircleStyle from 'ol/style/Circle';
|
|
|
import Overlay from 'ol/Overlay';
|
|
|
@@ -41,6 +39,7 @@ import { nanoid } from 'nanoid';
|
|
|
import carImg from '@/assets/images/car.png';
|
|
|
import { globalHeaders } from '@/utils/request';
|
|
|
import { iconList } from '@/views/globalMap/data/mapData';
|
|
|
+import gdJson from '@/assets/json/gd.json';
|
|
|
|
|
|
const tk = 'a8df87f1695d224d2679aa805c1268d9';
|
|
|
const commonUrl = import.meta.env.VITE_APP_BASE_API2 + 'api/oneShare/proxyHandler/gd/';
|
|
|
@@ -96,7 +95,6 @@ export class olMap {
|
|
|
private traceFeature;
|
|
|
// 自定义绘制结束调用方法
|
|
|
private drawEndMethod;
|
|
|
- private selectedFeature;
|
|
|
private drawing;
|
|
|
private path;
|
|
|
private anyLine;
|
|
|
@@ -161,10 +159,9 @@ export class olMap {
|
|
|
const feature = event.selected[0]; // 获取被选中的要素集合
|
|
|
const extData = feature.get('extData');
|
|
|
if (!!feature) {
|
|
|
- this.clickMarker = feature;
|
|
|
- if (this.selectedFeature) {
|
|
|
- const selectData = this.selectedFeature.get('extData');
|
|
|
- this.selectedFeature.setStyle(
|
|
|
+ if (this.clickMarker) {
|
|
|
+ const selectData = this.clickMarker.get('extData');
|
|
|
+ this.clickMarker.setStyle(
|
|
|
new Style({
|
|
|
image: new Icon({
|
|
|
src: selectData.image,
|
|
|
@@ -178,8 +175,8 @@ export class olMap {
|
|
|
}
|
|
|
if (['1', '2'].includes(extData.type)) {
|
|
|
// 多点位 单点
|
|
|
- if (this.selectedFeature !== feature) {
|
|
|
- this.selectedFeature = feature;
|
|
|
+ if (this.clickMarker !== feature) {
|
|
|
+ this.clickMarker = feature;
|
|
|
feature.setStyle(
|
|
|
new Style({
|
|
|
image: new Icon({
|
|
|
@@ -195,7 +192,7 @@ export class olMap {
|
|
|
}
|
|
|
} else if (extData.type === '3') {
|
|
|
// 聚合要素
|
|
|
- this.select.getFeatures().clear();
|
|
|
+ // this.select.getFeatures().clear();
|
|
|
const currentZoom = this.map.getView().getZoom();
|
|
|
this.map.getView().setZoom(currentZoom + 1);
|
|
|
this.map.getView().setCenter([Number(extData.longitude), Number(extData.latitude)]);
|
|
|
@@ -208,7 +205,11 @@ export class olMap {
|
|
|
// 添加新的图层
|
|
|
if (Array.isArray(options.id)) {
|
|
|
for (const layer of options.id) {
|
|
|
- await this.formatXml(layer);
|
|
|
+ if (layer.layerType === 'JSON') {
|
|
|
+ await this.createJsonLayer(layer);
|
|
|
+ } else {
|
|
|
+ await this.formatXml(layer);
|
|
|
+ }
|
|
|
}
|
|
|
} else if (options.id === 'tianditu') {
|
|
|
await this.formatXml2();
|
|
|
@@ -253,28 +254,40 @@ export class olMap {
|
|
|
}
|
|
|
formatXml(options) {
|
|
|
const xml = new WMTSCapabilities();
|
|
|
- return this.getCapabilities(options.code).then((res) => {
|
|
|
- const geoJson = xml.read(res.data);
|
|
|
- const data = geoJson.Contents.Layer[0];
|
|
|
- const layerParam = {
|
|
|
- layerName: data.Abstract,
|
|
|
- styleName: data.Identifier,
|
|
|
- tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
|
|
|
- format: data.Format[0]
|
|
|
- };
|
|
|
- this.createWmsLayer(options, layerParam);
|
|
|
+ return this.getCapabilities(options.code, options.layerType).then((res) => {
|
|
|
+ if (options.layerType === 'WMTS') {
|
|
|
+ const geoJson = xml.read(res.data);
|
|
|
+ const data = geoJson.Contents.Layer[0];
|
|
|
+ const layerParam = {
|
|
|
+ layerName: data.Abstract,
|
|
|
+ styleName: data.Identifier,
|
|
|
+ tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
|
|
|
+ format: data.Format[0]
|
|
|
+ };
|
|
|
+ this.createWmtsLayer(options, layerParam);
|
|
|
+ } else if (options.layerType === 'WFS') {
|
|
|
+ const parser = new DOMParser();
|
|
|
+ const xmlDoc = parser.parseFromString(res.data, 'text/xml');
|
|
|
+ const featureType = xmlDoc.getElementsByTagName('FeatureType')[0];
|
|
|
+ const layerParam = {
|
|
|
+ layerName: featureType.getElementsByTagName('Title')[0].textContent,
|
|
|
+ typeName: featureType.getElementsByTagName('Name')[0].textContent,
|
|
|
+ srsName: featureType.getElementsByTagName('SRS')[0].textContent
|
|
|
+ };
|
|
|
+ this.createWfsLayer(options, layerParam);
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 请求接口获取地图信息
|
|
|
- getCapabilities(code) {
|
|
|
- return axios.get(commonUrl + code + '?SERVICE=WMTS&REQUEST=GetCapabilities', {
|
|
|
+ getCapabilities(code, service) {
|
|
|
+ return axios.get(commonUrl + code + '?SERVICE=' + service + '&REQUEST=GetCapabilities', {
|
|
|
headers: globalHeaders()
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- // 请求地图图片加载图层
|
|
|
- createWmsLayer(options, layerParam) {
|
|
|
+ // 请求WMTS地图图片加载图层
|
|
|
+ createWmtsLayer(options, layerParam) {
|
|
|
const source = new WMTS({
|
|
|
url: commonUrl + options.code,
|
|
|
crossOrigin: 'Anonymous',
|
|
|
@@ -323,7 +336,50 @@ export class olMap {
|
|
|
layer.set('id', options.code);
|
|
|
this.map.addLayer(layer);
|
|
|
}
|
|
|
+ //
|
|
|
+ createWfsLayer(options, layerParam) {
|
|
|
+ const source = new VectorSource({
|
|
|
+ format: new GeoJSON(),
|
|
|
+ url: `${commonUrl}${options.code}?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&typeName=流域:GEO_BAS_POLYGON&outputFormat=application/json& srsName=EPSG:4490`
|
|
|
+ });
|
|
|
+
|
|
|
+ const vectorLayer = new VectorLayer({
|
|
|
+ source: source,
|
|
|
+ style: new Style({
|
|
|
+ fill: new Fill({
|
|
|
+ color: 'rgba(255, 255, 255, 0.6)'
|
|
|
+ }),
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: '#319FD3',
|
|
|
+ width: 1
|
|
|
+ })
|
|
|
+ })
|
|
|
+ });
|
|
|
|
|
|
+ this.map.addLayer(vectorLayer);
|
|
|
+ }
|
|
|
+ // 加载json图层
|
|
|
+ createJsonLayer(layer) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const geojsonParser = new GeoJSON();
|
|
|
+ console.log(this.map.getView().getProjection());
|
|
|
+ const features = geojsonParser.readFeatures(gdJson, {
|
|
|
+ dataProjection: 'EPSG:4326',
|
|
|
+ featureProjection: this.map.getView().getProjection()
|
|
|
+ });
|
|
|
+ const jsonLayer = new VectorLayer({
|
|
|
+ source: new VectorSource({ features }),
|
|
|
+ style: new Style({
|
|
|
+ // 必须设置样式才能显示
|
|
|
+ fill: new Fill({ color: '#ffffff' }),
|
|
|
+ stroke: new Stroke({ color: 'rgba(0,0,0, 1)', width: 1 })
|
|
|
+ }),
|
|
|
+ zIndex: layer.zIndex ? layer.zIndex : -99
|
|
|
+ });
|
|
|
+ this.map.addLayer(jsonLayer);
|
|
|
+ resolve({});
|
|
|
+ });
|
|
|
+ }
|
|
|
// 初始化绘画工具
|
|
|
initMouseTool(options) {
|
|
|
this.drawOptions = {
|
|
|
@@ -754,7 +810,7 @@ export class olMap {
|
|
|
const name = key === 'search' ? 'search' : 'point';
|
|
|
if (this.clickMarker) {
|
|
|
const extData = this.clickMarker.get('extData');
|
|
|
- if (data.id === extData.id) {
|
|
|
+ if (data.id === extData.id && data.dataType === extData.dataType) {
|
|
|
hideInfoFlag = false;
|
|
|
data.isHover = true;
|
|
|
}
|
|
|
@@ -834,12 +890,13 @@ export class olMap {
|
|
|
})
|
|
|
);
|
|
|
this.plotLayers[name].getSource().addFeature(feature);
|
|
|
+ if (data.isHover) {
|
|
|
+ this.clickMarker = feature;
|
|
|
+ this.options.onMarkerClick(data);
|
|
|
+ }
|
|
|
};
|
|
|
img.src = data.image; // 设置图片的 URL，触发加载
|
|
|
this.markers.push(data);
|
|
|
- if (data.isHover) {
|
|
|
- this.options.onMarkerClick(data);
|
|
|
- }
|
|
|
}
|
|
|
});
|
|
|
if (hideInfoFlag) {
|
|
|
@@ -907,22 +964,20 @@ export class olMap {
|
|
|
hideInfo(flag?: boolean) {
|
|
|
this.map.removeOverlay(this.infoWindow);
|
|
|
this.infoWindow = null;
|
|
|
- if (!!flag && this.select) {
|
|
|
- this.select.getFeatures().clear();
|
|
|
- if (this.selectedFeature) {
|
|
|
- const selectData = this.selectedFeature.get('extData');
|
|
|
- this.selectedFeature.setStyle(
|
|
|
- new Style({
|
|
|
- image: new Icon({
|
|
|
- src: selectData.image,
|
|
|
- scale: selectData.scale,
|
|
|
- anchor: [0.5, 0.5],
|
|
|
- anchorXUnits: 'fraction',
|
|
|
- anchorYUnits: 'fraction'
|
|
|
- })
|
|
|
+ if (!!flag && this.clickMarker) {
|
|
|
+ const selectData = this.clickMarker.get('extData');
|
|
|
+ this.clickMarker.setStyle(
|
|
|
+ new Style({
|
|
|
+ image: new Icon({
|
|
|
+ src: selectData.image,
|
|
|
+ scale: selectData.scale,
|
|
|
+ anchor: [0.5, 0.5],
|
|
|
+ anchorXUnits: 'fraction',
|
|
|
+ anchorYUnits: 'fraction'
|
|
|
})
|
|
|
- );
|
|
|
- }
|
|
|
+ })
|
|
|
+ );
|
|
|
+ this.clickMarker = null;
|
|
|
}
|
|
|
}
|
|
|
/**
|
