<template>
<!-- cesium模型底图-水科院 -->
<div class="modalMapIndex">
<div ref="viewerContainer" class="demo-viewer">
<vc-viewer
:scene3DOnly="true">
<!-- 白模型 -->
<!-- <vc-primitive-tileset ref="primitive"
url="http://10.254.12.218:8082/whsw/baimo/tileset.json"
@ready="onReady" @click="onClicked" @all-tiles-loaded="allTilesLoaded">
</vc-primitive-tileset> -->
<!-- 堤防形变 -->
<!-- <vc-primitive-tileset ref="primitive"
url="http://10.254.12.218:8088/light3d_wh/insar_ps/files/1688614514784/1262/tileset.json?serviceId=94"
@ready="onReady" @click="onClicked" @all-tiles-loaded="allTilesLoaded">
</vc-primitive-tileset> -->
<!-- 黄机流域倾斜（1110工作站发布） -->
<!-- <vc-primitive-tileset ref="primitive" url="http://192.168.21.131:8083/swj/qingxie/tileset.json" @ready="onReady"
@click="onClicked" @all-tiles-loaded="allTilesLoaded">
</vc-primitive-tileset> -->
<!-- 黄机流域倾斜 -->
<!-- <vc-primitive-tileset
:maximumScreenSpaceError="1"
ref="primitive"
url="http://192.168.10.50:8863/local-static/Productions/%E5%87%8C%E4%BA%91%E5%B0%8F%E5%AD%A6%E9%97%B8/Scene/Production_1.json"
@ready="onReady"
@click="onClicked" @all-tiles-loaded="allTilesLoaded">
</vc-primitive-tileset> -->
<template v-for="item in layers">
<vc-primitive-tileset
:maximumScreenSpaceError="1"
:ref="item[0]"
:url="item[1]"
@ready="onReady"
@click="onClicked" @all-tiles-loaded="allTilesLoaded">
</vc-primitive-tileset>
</template>
<!-- <vc-primitive-tileset
:maximumScreenSpaceError="1"
ref="primitive"
url="http://192.168.10.50:8863/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E9%BB%84%E5%AD%9D%E6%B2%B3CSO/tileset.json"
@ready="onReady"
@click="onClicked" @all-tiles-loaded="allTilesLoaded">
</vc-primitive-tileset> -->
<!-- <vc-imagery-provider-wmts ref="provider"
url="http://10.254.12.218:8088/geoserver/gwc/service/wmts/rest/e905613d5b9644f6a2345cc14fa0a592:fafa7a08361b4d3584746c9b0fceb624/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image%2Fpng&ms=1702868406582"
layer="fafa7a08361b4d3584746c9b0fceb624" format="image/png" wmtsStyle="default"
tileMatrixSetID="EPSG:900913"></vc-imagery-provider-wmts> -->
<!-- 注记层 -->
<!-- <vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast" :sort-order="20">
<vc-imagery-provider-tianditu map-style="cva_c"
token="436ce7e50d27eede2f2929307e6b33c0"></vc-imagery-provider-tianditu>
</vc-layer-imagery>
<vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast" :sort-order="10">
<vc-imagery-provider-tianditu :map-style="mapStyle" token="436ce7e50d27eede2f2929307e6b33c0"
ref="provider"></vc-imagery-provider-tianditu>
</vc-layer-imagery> -->
<!-- <vc-layer-imagery >
<vc-imagery-provider-wms
ref="provider"
url="http://172.16.238.80/geoserver/huangjiliuyu/wms?service=WMS&version=1.1.0&request=GetMap&layers=huangjiliuyu:huangjibianjie&styles=&format=application/openlayers"
srs="EPSG:4326"
:parameters="{ transparent: true, format: 'image/png' }"
></vc-imagery-provider-wms>
</vc-layer-imagery> -->
<vc-layer-imagery >
<vc-imagery-provider-mapbox
ref="provider"
url="https://api.mapbox.com/styles/v1"
username="hn4930"
style-id="cl09awv74002c15mwp8cqzs20"
access-token="pk.eyJ1IjoiaG40OTMwIiwiYSI6ImNrb2JlaWF1bDBnazUydW4yaXNiNWhvdmkifQ.8VlXzUcV_ilQY1Sa0q654g"
></vc-imagery-provider-mapbox>
</vc-layer-imagery>
</vc-viewer>
<div class="demo-toolbar">
<div type="danger" round @click="unload">销毁</div>
<div type="danger" round @click="load">加载</div>
<div type="danger" round @click="reload">重载</div>
<div v-for="item in layers" type="danger" round @click="positionLayer(item)">定位{{item[0]}}</div>
</div>
<!-- <div class="demo-toolbar">
<div>
<div type="danger" round @click="unload">销毁</div>
<div type="danger" round @click="load">加载</div>
<div type="danger" round @click="reload">重载</div>
</div>
<div>
<el-col>
<div class="block">
<span class="demonstration">透明度</span>
<el-slider v-model="alpha" :min="0" :max="1" :step="0.01"></el-slider>
<span class="demonstration">亮度</span>
<el-slider v-model="brightness" :min="0" :max="5" :step="0.01"></el-slider>
<span class="demonstration">对比度</span>
<el-slider v-model="contrast" :min="0" :max="5" :step="0.01"></el-slider>
<span class="demonstration">切换风格</span>
<el-select v-model="mapStyle" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</el-col>
</div>
</div> -->
</div>
</div>
</template>
<script>
import { createApp, nextTick, onBeforeUnmount, onMounted,getCurrentInstance, reactive, ref, toRefs } from 'vue';
import bus from '@/utils/util';
// import blue_vector from './modal/mapboxStyle.js';
import NewFiberMapUtils from '@/utils/gis/NewfiberMap.js';
// import Popup from './Popup.vue';
import axios from 'axios';
export default {
name: 'Mapbox',
components: { },
setup(props) {
// state
const instance = getCurrentInstance()
const provider = ref(null)
const alpha = ref(1)
const brightness = ref(1)
const contrast = ref(1)
const options = [
{
value: 'img_c',
label: '全球影像地图服务(经纬度)'
},
{
value: 'img_w',
label: '全球影像地图服务(墨卡托)'
},
{
value: 'vec_c',
label: '全球矢量地图服务(经纬度)'
},
{
value: 'vec_w',
label: '全球矢量地图服务(墨卡托)'
},
{
value: 'ter_c',
label: '全球地形晕渲服务(经纬度)'
},
{
value: 'ter_w',
label: '全球地形晕渲服务(墨卡托)'
},
{
value: 'ibo_c',
label: '全球境界(经纬度)'
},
{
value: 'ibo_w',
label: '全球境界(墨卡托)'
}
]
const mapStyle = ref('img_c')
// methods
const unload = () => {
debugger;
provider.value.unload()
}
const reload = () => {
debugger;
provider.value.reload()
}
const load = () => {
debugger;
provider.value.load()
}
function onReady({ cesiumObject: tileset, viewer }) {
window.viewer = viewer;
const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height)
const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0)
const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
viewer.zoomTo(tileset)
};
function onClicked(e) {
console.log(e)
};
function allTilesLoaded(e) {
console.log('allTilesLoaded')
};
function positionLayer([refName, url]) {
viewer.zoomTo(instance.refs[refName][0].cesiumObject)
}
onMounted(() => {
// initMap();
});
onBeforeUnmount(() => {});
return {
onReady,
provider,
unload,
reload,
load,
alpha,
brightness,
contrast,
options,
mapStyle,
onClicked,
allTilesLoaded,
positionLayer,
layers: [
['东渠钢坝闸', 'http://192.168.10.50:8863/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E4%B8%9C%E6%B8%A0%E9%92%A2%E5%9D%9D%E9%97%B8/tileset.json'],
['常青花园调蓄池', 'http://192.168.10.50:8863/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E5%B8%B8%E9%9D%92%E8%8A%B1%E5%9B%AD%E8%B0%83%E8%93%84%E6%B1%A0/tileset.json'],
['常青路泵站', 'http://192.168.10.50:8863/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E5%B8%B8%E9%9D%92%E8%B7%AF%E6%B3%B5%E7%AB%99/tileset.json'],
['西渠钢坝闸', 'http://192.168.10.50:8863/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E8%A5%BF%E6%B8%A0%E9%92%A2%E5%9D%9D%E9%97%B8/tileset.json'],
['铁路桥泵站', 'http://192.168.10.50:8863/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E9%93%81%E8%B7%AF%E6%A1%A5%E6%B3%B5%E7%AB%99/tileset.json'],
['黄孝河CSO', 'http://192.168.10.50:8863/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E9%BB%84%E5%AD%9D%E6%B2%B3CSO/tileset.json'],
['黄孝河强化处理设施', 'http://192.168.10.50:8863/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E9%BB%84%E5%AD%9D%E6%B2%B3%E5%BC%BA%E5%8C%96%E5%A4%84%E7%90%86%E8%AE%BE%E6%96%BD/tileset.json'],
['黄孝河钢坝闸', 'http://192.168.10.50:8863/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E9%BB%84%E5%AD%9D%E6%B2%B3%E9%92%A2%E5%9D%9D%E9%97%B8/tileset.json'],
['黄孝河钢坝闸——out', 'http://192.168.10.50:8863/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E9%BB%84%E5%AD%9D%E6%B2%B3%E9%92%A2%E5%9D%9D%E9%97%B8%E2%80%94%E2%80%94out/tileset.json'],
['CQLTXC', '/3dtiles/与数公基平台对接3dtiles/东渠钢坝闸/tileset.json'],
['CQLBZ', '/3dtiles/与数公基平台对接3dtiles/常青花园调蓄池/tileset.json'],
['XQGBZ', '/3dtiles/与数公基平台对接3dtiles/西渠钢坝闸/tileset.json'],
['TLQBZ', '/3dtiles/与数公基平台对接3dtiles/常青路泵站/tileset.json'],
['HXHCSO', '/3dtiles/与数公基平台对接3dtiles/黄孝河CSO/tileset.json'],
['HXHQHCLSS', '/3dtiles/与数公基平台对接3dtiles/黄孝河强化处理设施/tileset.json'],
['HXHGBZ', '/3dtiles/与数公基平台对接3dtiles/黄孝河钢坝闸/tileset.json'],
['HXHGBZOUT', '/3dtiles/与数公基平台对接3dtiles/黄孝河钢坝闸——out/tileset.json']
]
};
},
};
</script>
<style lang="less" scoped>
.modalMapIndex {
width: 100%;
height: 100%;
#mapContainer {
width: 10%;
height: 10%;
}
}
::v-deep(.mapboxgl-ctrl-logo) {
display: none !important;
}
.demo-viewer .el-row:last-child {
margin-bottom: 0;
}
.demo-viewer .el-row {
border-radius: 100px;
align-items: baseline;
}
.demo-viewer .demo-toolbar {
position: absolute;
left: 1%;
top: 1%;
min-width: 185px;
z-index: 100;
color: #fff;
background-color: rgba(0, 0, 0, .2);
}
.demo-vc-viewer .el-switch:first-child {
margin-left: 20px;
}
.demo-vc-viewer .el-switch {
margin: 20px 20px 20px 0;
}
.demo-vc-datasource-custom {
.el-switch__label.is-active {
color: #409eff;
}
}
.block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #eff2f6;
&:last-child {
border-bottom: none;
}
}
.el-row {
border-radius: 100px;
align-items: baseline;
&:last-child {
margin-bottom: 0;
}
}
.el-button {
margin: 10px 10px 10px 0;
&:first-child {
margin-left: 20px;
}
}
.el-switch {
margin: 20px 20px 20px 0;
&:first-child {
margin-left: 20px;
}
}
.el-switch__label {
color: white;
}
.demo-viewer2 .el-row:last-child {
margin-bottom: 0;
}
.demo-viewer2 .el-row {
border-radius: 100px;
align-items: baseline;
}
.demo-viewer2 .demo-toolbar {
position: absolute;
left: 1%;
top: 1%;
min-width: 185px;
z-index: 100;
color: #fff;
background-color: rgba(0, 0, 0, .2);
}
.demo-vc-viewer2 .el-switch:first-child {
margin-left: 20px;
}
.demo-vc-viewer2 .el-switch {
margin: 20px 20px 20px 0;
}
.demo-vc-datasource-custom {
.el-switch__label.is-active {
color: #409eff;
}
}
.block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #eff2f6;
&:last-child {
border-bottom: none;
}
}
.el-row {
border-radius: 100px;
align-items: baseline;
&:last-child {
margin-bottom: 0;
}
}
.el-button {
margin: 10px 10px 10px 0;
&:first-child {
margin-left: 20px;
}
}
.el-switch {
margin: 20px 20px 20px 0;
&:first-child {
margin-left: 20px;
}
}
.el-switch__label {
color: white;
}
</style>
