<template>
<!-- cesium模型底图-水科院 -->
<div class="modalMapIndex">
<div style="width:1px;height:1px;">
<vc-viewer @cesiumReady="initMap"></vc-viewer>
</div>
<!-- 加载地图 -->
<div id="mapContainer">
<Popup></Popup>
</div>
</div>
</template>
<script>
import { createApp, nextTick, onBeforeUnmount, onMounted, 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: { Popup },
setup(props) {
const allData = reactive({});
function loadJs(){
function PolylineTrailLinkMaterialProperty(color, trailImage, duration) {
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._colorSubscription = undefined;
this.color = color;
this.duration = duration;
this.trailImage = trailImage;
this._time = new Date().getTime();
}
function _getPolylineShader() {
var materail =
'czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
czm_material material = czm_getDefaultMaterial(materialInput);\n\
vec2 st = materialInput.st;\n\
vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
material.alpha = colorImage.a * color.a;\n\
material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
return material;\n\
}';
return materail;
}
Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
isConstant: {
get: function () {
return false;
},
},
definitionChanged: {
get: function () {
return this._definitionChanged;
},
},
color: Cesium.createPropertyDescriptor('color'),
});
var MaterialType = 'polylineType' + parseInt(Math.random() * 1000);
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
return MaterialType;
};
PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
if (!Cesium.defined(result)) {
result = {};
}
result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
result.image = this.trailImage;
result.time = ((new Date().getTime() - this._time) % this.duration) / this.duration;
return result;
};
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
return (
this === other ||
(other instanceof PolylineTrailLinkMaterialProperty &&
Cesium.Property.equals(this._color, other._color) &&
Cesium.Property.equals(this._image, other._image))
);
};
Cesium.Material._materialCache.addMaterial(MaterialType, {
fabric: {
type: MaterialType,
uniforms: {
color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
image: Cesium.Material.DefaultImageId,
time: -20,
},
source: _getPolylineShader(),
},
translucent: function (material) {
return true;
},
});
Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
function Spriteline1MaterialProperty(duration, image) {
this._definitionChanged = new Cesium.Event();
this.duration = duration;
this.image = image;
this._time = performance.now();
}
Object.defineProperties(Spriteline1MaterialProperty.prototype, {
isConstant: {
get: function () {
return false;
},
},
definitionChanged: {
get: function () {
return this._definitionChanged;
},
},
color: Cesium.createPropertyDescriptor('color'),
duration: Cesium.createPropertyDescriptor('duration'),
});
Spriteline1MaterialProperty.prototype.getType = function (time) {
return 'Spriteline1';
};
Spriteline1MaterialProperty.prototype.getValue = function (time, result) {
if (!Cesium.defined(result)) {
result = {};
}
result.image = this.image;
result.time = ((performance.now() - this._time) % this.duration) / this.duration;
return result;
};
Spriteline1MaterialProperty.prototype.equals = function (e) {
return this === e || (e instanceof Spriteline1MaterialProperty && this.duration === e.duration);
};
Cesium.Spriteline1MaterialProperty = Spriteline1MaterialProperty;
Cesium.Material.Spriteline1Type = 'Spriteline1';
Cesium.Material.Spriteline1Source = `
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
vec4 colorImage = texture2D(image, vec2(fract(st.s*10.0-time), st.t));
material.alpha = colorImage.a ;
material.diffuse = colorImage.rgb * 1.5 ;
return material;
}
`;
// st :二维纹理坐标
// czm_material：保存可用于照明的材质信息
Cesium.Material._materialCache.addMaterial(Cesium.Material.Spriteline1Type, {
fabric: {
type: Cesium.Material.Spriteline1Type,
uniforms: {
color: new Cesium.Color(1, 0, 0, 0.5),
image: '',
transparent: true,
time: 20,
},
source: Cesium.Material.Spriteline1Source,
},
translucent: function (material) {
return true;
},
});
}
// 地图初始化
function initMap() {
loadJs();
Cesium.RequestScheduler.maximumRequests = 200;
Cesium.RequestScheduler.maximumRequestsPerServer = 200;
//let interVal = setInterval(() => {
let mapDom = document.getElementById('mapContainer');
//if (!!!window.NewFiberMap || !!!mapDom) return;
//clearInterval(interVal);
//window.newfiberMap = new NewFiberMap('mapContainer');
window.newfiberMap = new NewFiberMapUtils({
container: 'mapContainer',
});
newfiberMap.map.scene.screenSpaceCameraController.minimumZoomDistance = 2500;
newfiberMap.map.scene.screenSpaceCameraController.maximumZoomDistance = 100000;
// //设置视窗位置
newfiberMap.setView({
lon: 114.264596,
lat: 30.500028,
heading: 2.281299097855777,
zoom: 5358.12942752382,
pitch: -25.2508969308367,
roll: 0.005453465256790101,
});
newfiberMap.addMVTImageryProvider({
style: blue_vector,
});
/* // 建筑模型文件加载
newfiberMap.loadCesium3DTileSet({
id: 'jianzhu5',
url: '/models-rest/rest/models/preview/CIM3-5/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'jianzhu7',
url: '/models-rest/rest/models/preview/CIM3-7/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'jianzhu8',
url: '/models-rest/rest/models/preview/CIM3-8/tileset.json',
});*/
//厂站模型加载
newfiberMap.loadCesium3DTileSet({
id: 'CQLTXC',
url: '/3dtiles/与数公基平台对接3dtiles/东渠钢坝闸/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'CQLBZ',
url: '/3dtiles/与数公基平台对接3dtiles/常青花园调蓄池/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'XQGBZ',
url: '/3dtiles/与数公基平台对接3dtiles/西渠钢坝闸/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'TLQBZ',
url: '/3dtiles/与数公基平台对接3dtiles/常青路泵站/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'HXHCSO',
url: '/3dtiles/与数公基平台对接3dtiles/黄孝河CSO/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'HXHQHCLSS',
url: '/3dtiles/与数公基平台对接3dtiles/黄孝河强化处理设施/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'HXHGBZ',
url: '/3dtiles/与数公基平台对接3dtiles/黄孝河钢坝闸/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'HXHGBZOUT',
url: '/3dtiles/与数公基平台对接3dtiles/黄孝河钢坝闸——out/tileset.json',
});
}
onMounted(() => {
// initMap();
});
onBeforeUnmount(() => {});
return {
...toRefs(allData),
initMap
};
},
};
</script>
<style lang="less" scoped>
.modalMapIndex {
width: 100%;
height: 100%;
#mapContainer {
width: 100%;
height: 100%;
}
}
::v-deep(.mapboxgl-ctrl-logo) {
display: none !important;
}
</style>
