Newer
Older
KaiFengPC / src / views / gisMapPage / gisMapCommonPage.vue
@zhangdeliang zhangdeliang on 23 May 1 KB 初始化项目
  1. <template>
  2. <div class="mapPage">
  3. <div id="cesiumContainer"></div>
  4. </div>
  5. </template>
  6. <script>
  7. import mapStyle from '@/utils/gisCesium/mapStyle.json';
  8. import bus from '@/bus';
  9. export default {
  10. components: {},
  11. props: {},
  12. setup(props) {
  13. const allData = reactive({
  14. movePosition: '113.934113,30.872118',
  15. });
  16. const initeMap = async () => {
  17. window.newfiberMap = new NewFiberMap('cesiumContainer', {
  18. terrain: true,
  19. skyBox: NewFiberMap.Enum.SkyBox.BLUE,
  20. selectionIndicator: false, //单击是否出现绿色边框
  21. });
  22. //加载底图
  23. newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.ARCGIS_VECTOR_BLUE], [], mapStyle);
  24. newfiberMap.setView({
  25. pitch: -25,
  26. lng: 113.934,
  27. lat: 30.872,
  28. zoom: 2300,
  29. });
  30. mapMoveEvent();
  31. };
  32. //鼠标移动获取经纬度
  33. const mapMoveEvent = () => {
  34. newfiberMap.registerMouseMove(point => {
  35. allData.movePosition = `${point[0].toFixed(6)},${point[1].toFixed(6)}`;
  36. });
  37. };
  38. onMounted(() => {
  39. nextTick(() => {
  40. initeMap();
  41. });
  42. });
  43. onBeforeUnmount(() => {
  44. if (newfiberMap) {
  45. let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
  46. newfiberMap.getMap().destroy();
  47. if (_originalGLContext) {
  48. _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
  49. _originalGLContext = null;
  50. }
  51. newfiberMap.baseMap.map = null;
  52. newfiberMap = null;
  53. }
  54. });
  55. return {
  56. ...toRefs(allData),
  57. initeMap,
  58. };
  59. },
  60. };
  61. </script>
  62. <style lang="scss">
  63. .mapPage {
  64. width: 100%;
  65. height: 100%;
  66. position: absolute;
  67. left: 0px;
  68. top: 0px;
  69. z-index: 10;
  70. background: lavender;
  71. #cesiumContainer {
  72. width: 100%;
  73. height: 100%;
  74. position: absolute;
  75. }
  76. .coordinateContainer {
  77. position: absolute;
  78. left: 20px;
  79. bottom: 30px;
  80. }
  81. }
  82. </style>