- <template>
- <div class="mapPage">
- <div id="cesiumContainer"></div>
- </div>
- </template>
- <script>
- import mapStyle from '@/utils/gisCesium/mapStyle.json';
- import bus from '@/bus';
- export default {
- components: {},
- props: {},
- setup(props) {
- const allData = reactive({
- movePosition: '113.934113,30.872118',
- });
- const initeMap = async () => {
- window.newfiberMap = new NewFiberMap('cesiumContainer', {
- terrain: true,
- skyBox: NewFiberMap.Enum.SkyBox.BLUE,
- selectionIndicator: false, //单击是否出现绿色边框
- });
- //加载底图
- newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.ARCGIS_VECTOR_BLUE], [], mapStyle);
- newfiberMap.setView({
- pitch: -25,
- lng: 113.934,
- lat: 30.872,
- zoom: 2300,
- });
- mapMoveEvent();
- };
- //鼠标移动获取经纬度
- const mapMoveEvent = () => {
- newfiberMap.registerMouseMove(point => {
- allData.movePosition = `${point[0].toFixed(6)},${point[1].toFixed(6)}`;
- });
- };
- onMounted(() => {
- nextTick(() => {
- initeMap();
- });
- });
- onBeforeUnmount(() => {
- if (newfiberMap) {
- let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
- newfiberMap.getMap().destroy();
- if (_originalGLContext) {
- _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
- _originalGLContext = null;
- }
- newfiberMap.baseMap.map = null;
- newfiberMap = null;
- }
- });
- return {
- ...toRefs(allData),
- initeMap,
- };
- },
- };
- </script>
- <style lang="scss">
- .mapPage {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0px;
- top: 0px;
- z-index: 10;
- background: lavender;
- #cesiumContainer {
- width: 100%;
- height: 100%;
- position: absolute;
- }
- .coordinateContainer {
- position: absolute;
- left: 20px;
- bottom: 30px;
- }
- }
- </style>