- <template>
- <!-- 海绵综合一张图地图cesium -->
- <div class="mapContainerMF" id="mapContainerMF" v-show="popupShow">
- <cesiumPopup></cesiumPopup>
- </div>
- </template>
-
- <script setup>
- import blue_vector from './mapStyle.js';
- import cesiumPopup from '@/views/sponeScreen/gisMF/cesiumPopup.vue';
- import NewFiberMapUtils from '@/utils/gis/NewFiberMapUtils';
- import bus from '@/bus/index';
- const { proxy } = getCurrentInstance();
- const dataList = ref({});
- const popupShow = ref(false);
- //创建地图实例
- const createIniteMap = () => {
- window.newfiberMap = new NewFiberMap('mapContainerMF', {
- terrain: false,
- selectionIndicator: false, //单击是否出现绿色边框
- });
- // newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.TC_BLACK]);
- // changeMapStyle.mapSetImageStyle(newfiberMap);
- var layer = new NewFiberMap.Layer.MVTImageryProvider({
- style: blue_vector,
- tileSize: 1024,
- });
- layer.newfiberId = 'blackMap';
- newfiberMap.getMap().scene.globe.baseColor = Cesium.Color.fromCssColorString('rgba(8,27,54,1)');
- newfiberMap.getMap().imageryLayers.addImageryProvider(layer);
- newfiberMap.setView({
- lng: 114.312,
- lat: 34.502,
- heading: 2.281299097855777,
- zoom: 16358.12942752382,
- pitch: -25.2508969308367,
- roll: 0.005453465256790101,
- });
- newfiberMap.registerLeftClickEvt(async (position, point, feature) => {
- if (!feature) return;
- if (
- feature.key == 'YSBZ' ||
- feature.key == 'WSBZ' ||
- feature.key == 'combineBengZhan' ||
- feature.key == 'sewageFactory' ||
- feature.key == 'waterLoging' ||
- feature.key == 'rainStation'
- ) {
- let properties = feature.properties.getValue();
- console.log('properties--', properties);
- dataList.value = properties;
- console.log('初始化弹窗--', window.PopupInfo);
- if (!!!window.PopupInfo) {
- window.PopupInfo = newfiberMap.createPopup({
- id: 'cesiumPopupID',
- position: [...point].concat(0),
- map: newfiberMap.getMap(),
- maxHeight: 130000,
- });
- } else {
- window.PopupInfo.position = Cesium.Cartesian3.fromDegrees(...point.concat(0));
- }
- bus.emit('popupcontent', {
- popupShow: true,
- popupInfo: properties,
- });
- }
- });
- NewFiberMapUtils.weatherToMap(newfiberMap);
- };
-
- onMounted(() => {
- createIniteMap();
- bus.on('closeCesiumPopup', () => {
- popupShow.value = false;
- window.PopupInfo && window.PopupInfo.hide();
- window.PopupInfo = null;
- });
- });
- </script>
-
- <style lang="scss" scoped>
- .mapContainerMF {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0px;
- left: 0px;
- z-index: 100;
- .psPopup {
- width: 500px;
- height: 300px;
- padding: 10px;
- background: rgba(0, 49, 78, 0.5);
- border: 1px solid #094065;
- z-index: 111;
- .title {
- display: flex;
- align-items: center;
- justify-content: space-between;
- .titleName {
- display: flex;
- align-items: center;
- height: 22px;
- font-size: 14px;
- font-family: PingFang SC;
- font-weight: 400;
- color: #ccf1ff;
- line-height: 22px;
- margin: 5px;
- width: 330px;
- &:before {
- display: block;
- content: '';
- width: 3px;
- height: 16px;
- background: #00d1ff;
- margin-right: 10px;
- }
- }
- .closePopup {
- position: absolute;
- margin-left: 450px;
- height: 22px;
- z-index: 9999;
- cursor: pointer;
- }
- }
-
- .basicContent {
- position: absolute;
- top: 60px;
- left: -30px;
- .contentInfo {
- display: flex;
- align-items: center;
- margin-left: 50px;
- .contentName {
- margin: 3px;
- // height: 20px;
- width: 100px;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- color: #00d1ff;
- }
- .contentName1 {
- margin: 3px;
- // height: 20px;
- width: 185px;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- color: #00d1ff;
- }
- .contentValue {
- margin: 3px;
- // height: 20px;
- width: 100px;
- font-size: 14px;
- font-weight: 400;
- // line-height: 20px;
- color: #00d1ff;
- // overflow: hidden;
- word-wrap: break-word;
- // white-space: nowrap;
- // text-overflow: ellipsis;
- }
- }
- }
- }
- }
- </style>