underway-vue.git

riku

2024-03-28 8252f4dbbbdb9867f7f22290619e0fd7f94348e5

将高德JSAPI 1.4版本兼容

已修改6个文件

已添加8个文件

	index.html	12 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/App.vue	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/map/BaseMap.vue	12 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/lib/AMap.js	18131 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main.js	8 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/router/index.js	56 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/utils/map/3dLayer.js	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/utils/map/index_old.js	90 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/LoginPage.vue	9 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/electricitymode/ElectricityMode.vue	9 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/gridmonitor/GridMode.vue	9 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/historymode/HistoryMode.vue	9 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/realtimemode/RealtimeMode.vue	9 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/riskmodel/RiskMode.vue	9 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 index.html

@@ -1,13 +1,17 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.5&key=c55f27799afbfa69dc5a3fad90cafe51&plugin=Map3D,ElasticMarker,AMap.ControlBar"
    ></script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

 src/App.vue

@@ -1,6 +1,5 @@
<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import HomePage from '@/views/HomePage.vue';
import { ref } from 'vue';

const locale = ref(zhCn);
@@ -8,7 +7,7 @@

<template>
  <el-config-provider :locale="locale">
    <HomePage></HomePage>
    <router-view></router-view>
  </el-config-provider>
</template>


 src/components/map/BaseMap.vue

@@ -4,16 +4,10 @@

<script setup>
import { onMounted } from 'vue';

// window._AMapSecurityConfig = {
//   securityJsCode: 'ãæ¨ç³è¯·çå®å¨å¯é¥ã'
// }

import { createMap } from '@/utils/map/index_old';
onMounted(() => {
  // const marker = new AMap.Marker({
  //   position: [116.39, 39.9] //ä½ç½®
  // });
  // map.add(marker); //æ·»å å°å°å¾
  // é«å¾·å°å¾åå§å
  createMap('container');
});
</script>
<style>

 src/lib/AMap.js

¶Ô±ÈÐÂÎÄ¼þ
ÎÄ¼þÌ«´ó

 src/main.js

@@ -2,11 +2,10 @@

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { createMap } from './utils/map/index';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

import App from './App.vue';
// import router from './router'
import router from './router';

const app = createApp(App);

@@ -15,10 +14,7 @@
  app.component(key, component);
}

// é«å¾·å°å¾åå§å
createMap('container');

app.use(createPinia());
// app.use(router)
app.use(router);

app.mount('#app');

 src/router/index.js

@@ -1,8 +1,56 @@
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})
  routes: [
    {
      path: '/',
      redirect: '/index'
    },
    // ç»éé¡µé¢
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/LoginPage.vue')
    },
    {
      path: '/index',
      name: 'index',
      component: () => import('@/views/HomePage.vue'),
      children: [
        // æ±¡ææº¯æº
        {
          path: '/hmode',
          name: 'historyMode',
          component: () => import('@/views/historymode/HistoryMode.vue')
        },
        // èµ°èªçæµ
        {
          path: '/rmode',
          name: 'realtimeMode',
          component: () => import('@/views/realtimemode/RealtimeMode.vue')
        },
        // é£é©æ¨¡å
        {
          path: '/riskmode',
          name: 'riskMode',
          component: () => import('@/views/riskmodel/RiskMode.vue')
        },
        // ç½æ ¼åçæµ
        {
          path: '/gridmonitor',
          name: 'gridMonitor',
          component: () => import('@/views/gridmonitor/GridMode.vue')
        },
        // ç¨çµéçæµ
        {
          path: '/emode',
          name: 'electricityMode',
          component: () => import('@/views/electricitymode/ElectricityMode.vue')
        }
      ]
    }
  ]
});

export default router
export default router;

 src/utils/map/3dLayer.js

@@ -1 +1 @@
import { object3Dlayer } from './index';
import { object3Dlayer } from '../map';

 src/utils/map/index_old.js

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,90 @@
/* eslint-disable no-undef */
// import '@/lib/AMap';

var mapInitDone = false;
var onMapMountedEvents = [];

// å°å¾å¯¹è±¡
var map;
// å«æå¾å±
var satellite;
// é¼ æ ç»å¾
var mouseTool;
// 3Då¾å±
var object3Dlayer;
// å°å¾æå¨ç¶æ
var isDragging = false;

// å°å¾å è½½å®æè§¦å
function onMapMounted(...events) {
  if (mapInitDone) {
    events.forEach((e) => {
      e();
    });
  } else {
    onMapMountedEvents = onMapMountedEvents.concat(events);
  }
}

function createMap(id) {
  _initMap(id);
  mapInitDone = true;
  onMapMountedEvents.forEach((e) => {
    e();
  });
  onMapMountedEvents = [];
}

function _initMap(elementId) {
  map = new AMap.Map(elementId, {
    rotateEnable: true,
    pitchEnable: true,
    alwaysRender: false,
    showLabel: true,
    showBuildingBlock: true,
    mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
    features: ['bg', 'road'],
    pitch: 45, // å°å¾ä¿¯ä»°è§åº¦ï¼ææèå´ 0 åº¦- 83 åº¦
    viewMode: '3D', // å°å¾æ¨¡å¼
    resizeEnable: true,
    center: [121.6039283, 31.25295567],
    zooms: [3, 18],
    zoom: 14
  });

  // æ·»å å«æå°å¾
  // satellite = new AMap.TileLayer.Satellite();
  // satellite.show();
  // map.add([satellite]);

  // _initMouseTool();
  _init3DLayer();
  _initDragEvent();
}

// é¼ æ ç»å¾åå§å
function _initMouseTool() {
  mouseTool = new AMap.MouseTool(map);
}

// 3Då¾å±åå§å
function _init3DLayer() {
  object3Dlayer = new AMap.Object3DLayer();
  map.add(object3Dlayer);
}

// è®¾ç½®å°å¾ææ½çå¬äºä»¶
function _initDragEvent() {
  let dragEndEvent;
  map.on('dragstart', () => {
    clearTimeout(dragEndEvent);
    isDragging = true;
  });
  map.on('dragend', function () {
    dragEndEvent = setTimeout(() => {
      isDragging = false;
    }, 8000);
  });
}

export { createMap, onMapMounted, map, mouseTool, object3Dlayer, isDragging };

 src/views/LoginPage.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,9 @@
<template>
  <div>LoginPage</div>
</template>

<script>
export default {
  name: 'LoginPage'
};
</script>

 src/views/electricitymode/ElectricityMode.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,9 @@
<template>
  <div>HomePage</div>
</template>

<script>
export default {
  name: 'HistoryPage',
};
</script>

 src/views/gridmonitor/GridMode.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,9 @@
<template>
  <div>HomePage</div>
</template>

<script>
export default {
  name: 'HistoryPage',
};
</script>

 src/views/historymode/HistoryMode.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,9 @@
<template>
  <div>HomePage</div>
</template>

<script>
export default {
  name: 'HistoryPage',
};
</script>

 src/views/realtimemode/RealtimeMode.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,9 @@
<template>
  <div>HomePage</div>
</template>

<script>
export default {
  name: 'HistoryPage',
};
</script>

 src/views/riskmodel/RiskMode.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,9 @@
<template>
  <div>HomePage</div>
</template>

<script>
export default {
  name: 'HistoryPage',
};
</script>

			@@ -1,13 +1,17 @@
			<!DOCTYPE html>
			<!doctype html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<link rel="icon" href="/favicon.ico">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<meta charset="UTF-8" />
			<link rel="icon" href="/favicon.ico" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>Vite App</title>
			</head>
			<body>
			<div id="app"></div>
			<script
			type="text/javascript"
			src="https://webapi.amap.com/maps?v=1.4.5&key=c55f27799afbfa69dc5a3fad90cafe51&plugin=Map3D,ElasticMarker,AMap.ControlBar"
			></script>
			<script type="module" src="/src/main.js"></script>
			</body>
			</html>

			@@ -1,6 +1,5 @@
			<script setup>
			import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
			import HomePage from '@/views/HomePage.vue';
			import { ref } from 'vue';

			const locale = ref(zhCn);
			@@ -8,7 +7,7 @@

			<template>
			<el-config-provider :locale="locale">
			<HomePage></HomePage>
			<router-view></router-view>
			</el-config-provider>
			</template>

			@@ -4,16 +4,10 @@

			<script setup>
			import { onMounted } from 'vue';

			// window._AMapSecurityConfig = {
			// securityJsCode: 'ãæ¨ç³è¯·çå®å¨å¯é¥ã'
			// }

			import { createMap } from '@/utils/map/index_old';
			onMounted(() => {
			// const marker = new AMap.Marker({
			// position: [116.39, 39.9] //ä½ç½®
			// });
			// map.add(marker); //æ·»å å°å°å¾
			// é«å¾·å°å¾åå§å
			createMap('container');
			});
			</script>
			<style>

			@@ -2,11 +2,10 @@

			import { createApp } from 'vue';
			import { createPinia } from 'pinia';
			import { createMap } from './utils/map/index';
			import * as ElementPlusIconsVue from '@element-plus/icons-vue';

			import App from './App.vue';
			// import router from './router'
			import router from './router';

			const app = createApp(App);

			@@ -15,10 +14,7 @@
			app.component(key, component);
			}

			// é«å¾·å°å¾åå§å
			createMap('container');

			app.use(createPinia());
			// app.use(router)
			app.use(router);

			app.mount('#app');

			@@ -1,8 +1,56 @@
			import { createRouter, createWebHistory } from 'vue-router'
			import { createRouter, createWebHistory } from 'vue-router';

			const router = createRouter({
			history: createWebHistory(import.meta.env.BASE_URL),
			routes: []
			})
			routes: [
			{
			path: '/',
			redirect: '/index'
			},
			// ç»éé¡µé¢
			{
			path: '/login',
			name: 'login',
			component: () => import('@/views/LoginPage.vue')
			},
			{
			path: '/index',
			name: 'index',
			component: () => import('@/views/HomePage.vue'),
			children: [
			// æ±¡ææº¯æº
			{
			path: '/hmode',
			name: 'historyMode',
			component: () => import('@/views/historymode/HistoryMode.vue')
			},
			// èµ°èªçæµ
			{
			path: '/rmode',
			name: 'realtimeMode',
			component: () => import('@/views/realtimemode/RealtimeMode.vue')
			},
			// é£é©æ¨¡å
			{
			path: '/riskmode',
			name: 'riskMode',
			component: () => import('@/views/riskmodel/RiskMode.vue')
			},
			// ç½æ ¼åçæµ
			{
			path: '/gridmonitor',
			name: 'gridMonitor',
			component: () => import('@/views/gridmonitor/GridMode.vue')
			},
			// ç¨çµéçæµ
			{
			path: '/emode',
			name: 'electricityMode',
			component: () => import('@/views/electricitymode/ElectricityMode.vue')
			}
			]
			}
			]
			});

			export default router
			export default router;

			@@ -1 +1 @@
			import { object3Dlayer } from './index';
			import { object3Dlayer } from '../map';

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,90 @@
			/* eslint-disable no-undef */
			// import '@/lib/AMap';

			var mapInitDone = false;
			var onMapMountedEvents = [];

			// å°å¾å¯¹è±¡
			var map;
			// å«æå¾å±
			var satellite;
			// é¼ æ ç»å¾
			var mouseTool;
			// 3Då¾å±
			var object3Dlayer;
			// å°å¾æå¨ç¶æ
			var isDragging = false;

			// å°å¾å è½½å®æè§¦å
			function onMapMounted(...events) {
			if (mapInitDone) {
			events.forEach((e) => {
			e();
			});
			} else {
			onMapMountedEvents = onMapMountedEvents.concat(events);
			}
			}

			function createMap(id) {
			_initMap(id);
			mapInitDone = true;
			onMapMountedEvents.forEach((e) => {
			e();
			});
			onMapMountedEvents = [];
			}

			function _initMap(elementId) {
			map = new AMap.Map(elementId, {
			rotateEnable: true,
			pitchEnable: true,
			alwaysRender: false,
			showLabel: true,
			showBuildingBlock: true,
			mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
			features: ['bg', 'road'],
			pitch: 45, // å°å¾ä¿¯ä»°è§åº¦ï¼ææèå´ 0 åº¦- 83 åº¦
			viewMode: '3D', // å°å¾æ¨¡å¼
			resizeEnable: true,
			center: [121.6039283, 31.25295567],
			zooms: [3, 18],
			zoom: 14
			});

			// æ·»å å«æå°å¾
			// satellite = new AMap.TileLayer.Satellite();
			// satellite.show();
			// map.add([satellite]);

			// _initMouseTool();
			_init3DLayer();
			_initDragEvent();
			}

			// é¼ æ ç»å¾åå§å
			function _initMouseTool() {
			mouseTool = new AMap.MouseTool(map);
			}

			// 3Då¾å±åå§å
			function _init3DLayer() {
			object3Dlayer = new AMap.Object3DLayer();
			map.add(object3Dlayer);
			}

			// è®¾ç½®å°å¾ææ½çå¬äºä»¶
			function _initDragEvent() {
			let dragEndEvent;
			map.on('dragstart', () => {
			clearTimeout(dragEndEvent);
			isDragging = true;
			});
			map.on('dragend', function () {
			dragEndEvent = setTimeout(() => {
			isDragging = false;
			}, 8000);
			});
			}

			export { createMap, onMapMounted, map, mouseTool, object3Dlayer, isDragging };

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,9 @@
			<template>
			<div>LoginPage</div>
			</template>

			<script>
			export default {
			name: 'LoginPage'
			};
			</script>