搜索页面增加相关交互逻辑
This commit is contained in:
parent
ca9973fd9b
commit
43a2bfaf57
|
|
@ -36,7 +36,8 @@
|
|||
</div>
|
||||
<ul v-show="currenId == item.tsy_id && fold">
|
||||
<li :class="sample.tsy_id == currenSample ? 'bg-color' : ''" class="sample" :id="sample.tsy_id"
|
||||
v-for="(sample, i) in item.sampleArray" :key="i" @click.stop="onSample(sample)">{{ sample.sample_name }}
|
||||
v-for="(sample, i) in item.sampleArray" :key="i" @click.stop="onSample(sample, item.job_type)">{{
|
||||
sample.sample_name }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="left4_list">
|
||||
|
|
@ -237,9 +238,9 @@ import {
|
|||
setImageryViewModels
|
||||
} from '@/utils/common'
|
||||
import Vue from 'vue'
|
||||
import { loadVectorLayer } from '@/utils/vector-layer-utils'
|
||||
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator';
|
||||
import { handleWheel } from "@/utils/mapbox-utils";
|
||||
import { handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
||||
|
||||
const Cesium = window.Cesium
|
||||
export default {
|
||||
|
|
@ -248,6 +249,7 @@ export default {
|
|||
return {
|
||||
show: false,
|
||||
viewer: null,
|
||||
filter: null,
|
||||
color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
|
||||
searchType: [
|
||||
{
|
||||
|
|
@ -643,10 +645,15 @@ export default {
|
|||
let i = 0;
|
||||
const colors = ColorGenerator.generateDivergingColors(arr.length);
|
||||
arr.forEach(item => {
|
||||
// this.addSingleLineImg(item.voyage_name, null)
|
||||
// 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
|
||||
// loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
|
||||
// 添加测线/站位图层
|
||||
if (item.job_type == "测线作业") {
|
||||
loadVectorLayer(`sample_line_${item.dataset_name}`, ["line"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearch", "dsds", "sample_name");
|
||||
} else {
|
||||
loadVectorLayer(`sample_station_${item.dataset_name}`, ["symbol"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearch", "dsds", "sample_name");
|
||||
}
|
||||
i++;
|
||||
|
||||
// this.addSingleLineImg(item.voyage_name, null)
|
||||
// this.dataList[i].show = true;
|
||||
// this.divingImage(item)
|
||||
})
|
||||
|
|
@ -658,17 +665,11 @@ export default {
|
|||
dataset_id: item.tsy_id
|
||||
}).then(res => {
|
||||
item.sampleArray = res.array
|
||||
if (res.array.length) {
|
||||
let i = 0;
|
||||
const colors = ColorGenerator.generateDivergingColors(res.array.length);
|
||||
res.array.forEach(sample => {
|
||||
console.log(sample);
|
||||
// this.sampleLineImage(sample)
|
||||
// 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
|
||||
// loadVectorLayer(sample.sample_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
|
||||
i++;
|
||||
})
|
||||
}
|
||||
// if (res.array.length) {
|
||||
// res.array.forEach(sample => {
|
||||
// this.sampleLineImage(sample)
|
||||
// })
|
||||
// }
|
||||
})
|
||||
}
|
||||
if (item.job_type === '站位作业') {
|
||||
|
|
@ -678,21 +679,15 @@ export default {
|
|||
}).then(res => {
|
||||
item.sampleArray = res.array
|
||||
// 格式化坐标点
|
||||
if (res.array.length) {
|
||||
let i = 0;
|
||||
const colors = ColorGenerator.generateDivergingColors(res.array.length);
|
||||
res.array.forEach(sample => {
|
||||
// this.sampleLineImage(sample)
|
||||
// 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
|
||||
// loadVectorLayer(sample.sample_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
|
||||
i++;
|
||||
})
|
||||
}
|
||||
// if (res.array.length) {
|
||||
// res.array.forEach(sample => {
|
||||
// this.sampleLineImage(sample)
|
||||
// });
|
||||
// }
|
||||
})
|
||||
}
|
||||
})
|
||||
this.dataList = voyageList
|
||||
console.log(this.dataList)
|
||||
},
|
||||
|
||||
// 初始化 mapbox
|
||||
|
|
@ -746,6 +741,10 @@ export default {
|
|||
localIdeographFontFamily: "Microsoft YoHei, 'Noto Sans', 'Noto Sans CJK SC', sans-serif",
|
||||
pitch: 0,
|
||||
bearing: 0,
|
||||
// // 禁用所有旋转和俯仰角控制
|
||||
// dragRotate: false,
|
||||
// touchZoomRotate: false,
|
||||
// pitchWithRotate: false,
|
||||
// maxBounds: [[-180, -90], [180, 90]],// Set the map's geographical boundaries.
|
||||
antialias: true,
|
||||
attributionControl: false,
|
||||
|
|
@ -769,7 +768,9 @@ export default {
|
|||
// });
|
||||
});
|
||||
|
||||
handleWheel("dataSearch");
|
||||
// handleWheel("dataSearch");
|
||||
Vue.config.maps["dataSearch"].scrollZoom.enable();
|
||||
initSprites("dataSearch")
|
||||
|
||||
map.on('load', () => {
|
||||
// 加载海岸线
|
||||
|
|
@ -856,7 +857,7 @@ export default {
|
|||
// 增加6000米等深线
|
||||
const contour6000 = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
||||
url: Vue.config.baseUrl + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
||||
layer: 'ougp:contour6000',
|
||||
style: 'default',
|
||||
format: 'image/png',
|
||||
|
|
@ -918,8 +919,34 @@ export default {
|
|||
}
|
||||
},
|
||||
// 选中样品列表数据
|
||||
onSample(sample) {
|
||||
onSample(sample, job_type) {
|
||||
this.currenSample = sample.tsy_id
|
||||
if (job_type == "测线作业" && (!sample.start_lon || !sample.start_lat || !sample.end_lon || !sample.end_lat) || job_type == "站位作业" && (!sample.sampling_lon || !sample.sampling_lat)) {
|
||||
alert('该样品无坐标信息，无法定位！');
|
||||
return;
|
||||
}
|
||||
let lon = 0;
|
||||
let lat = 0;
|
||||
if (job_type == "测线作业") {
|
||||
// lon = Number(sample.start_lon);
|
||||
// lat = Number(sample.start_lat);
|
||||
lon=(Number(sample.start_lon) + Number(sample.end_lon))/2;
|
||||
lat=(Number(sample.start_lat) + Number(sample.end_lat))/2;
|
||||
}
|
||||
if (job_type == "站位作业") {
|
||||
lon = Number(sample.sampling_lon);
|
||||
lat = Number(sample.sampling_lat);
|
||||
}
|
||||
Vue.config.maps["dataSearch"].setZoom(10);
|
||||
Vue.config.maps["dataSearch"].flyTo({
|
||||
center: [lon, lat],
|
||||
speed: 10
|
||||
});
|
||||
let layerId = `vector-${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}-${job_type == "测线作业" ? "line" : "symbol"}`;
|
||||
let sourceLayerId = `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`;
|
||||
// vector-sample_station_TS-46-1_FDZ377_Slurp_SWYP-symbol、vector-sample_line_TS2-29-1_SY612_GQXJ_PJZP-line
|
||||
// highlightFeaturesByProperty("dataSearch", `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`, layerId, "sample_name", sample.sample_name);
|
||||
triggerLayerClick("dataSearch", sourceLayerId, layerId, [lon, lat], { "sample_name": sample.sample_name });
|
||||
},
|
||||
goHome() {
|
||||
this.$router.push({ name: 'home' })
|
||||
|
|
|
|||
Loading…
Reference in New Issue