项目搭建

0d1608f9 · 张伯涛 · 0d1608f9 · 0d1608f9 · 0d1608f9 · 0d1608f9
Commit 0d1608f9 authored Sep 11, 2024 by 张伯涛
25 changed files
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/README.md
+++ b/README.md
+# Map
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
--- a/index.html
+++ b/index.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">
+    <title>Vite App</title>
+      <style>
+          body {
+              margin: 0;
+          }
+      </style>
+  </head>
+  <body>
+    <div id="app" style="padding: 0; margin: 0"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "map",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@turf/turf": "^7.1.0",
+    "element-plus": "^2.8.2",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.29",
+    "vue-router": "^4.3.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "vite": "^5.3.1"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
+<script setup>
+
+</script>
+
+<template>
+    <RouterView />
+</template>
+
+<style scoped>
+
+
+</style>
--- a/src/assets/base.css
+++ b/src/assets/base.css
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/main.css
+++ b/src/assets/main.css
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
--- a/src/main.js
+++ b/src/main.js
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(ElementPlus)
+
+
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+import Map02 from "@/views/Map02.vue";
+import Map03_max from "@/views/Map03_max.vue";
+import Map04 from "@/views/Map04_SH.vue";
+import Map05_GZ from "@/views/Map05_GZ.vue";
+import Map06_NK from "@/views/Map06_NK.vue";
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/map2',
+      name: 'map2',
+      component: Map02
+    },
+    {
+      path: '/map3',
+      name: 'map3',
+      component: Map03_max
+    },
+    {
+      path: '/map4',
+      name: 'map4',
+      component: Map04
+    },
+    {
+      path: '/map5',
+      name: 'map5',
+      component: Map05_GZ
+    },
+    {
+      path: '/map6',
+      name: 'map6',
+      component: Map06_NK
+    }
+
+  ]
+})
+
+export default router
--- a/src/stores/counter.js
+++ b/src/stores/counter.js
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
--- a/src/utils/draw.js
+++ b/src/utils/draw.js
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+export function allBoundary(map, level, area) {
+    //实例化
+    let opts = {
+        subdistrict: 0,   //获取边界不需要返回下级行政区
+        extensions: 'all',  //返回行政区边界坐标组等具体信息
+        level: level  //查询行政级别
+    }
+    let district = new AMap.DistrictSearch(opts);
+
+    district.search(area, function (status, result) {
+        
+    })
+
+
+
+}
\ No newline at end of file
--- a/src/utils/map04.js
+++ b/src/utils/map04.js
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+//与map05.js一致
+
+//栅格生成
+export function drawGe( gsize, paths, polygons, map) {
+    // 拿到四角坐标
+    let bounds = map.getBounds();
+    console.log(bounds.northEast.toString());
+    console.log(bounds.southWest.toString());
+
+    let mSWLat = bounds.southWest.getLat(); //西南角的纬度 num 下
+    let mSWLng = bounds.southWest.getLng(); //西南角的经度 num 左
+    let mNELat = bounds.northEast.getLat(); //东北角的纬度 num 上
+    let mNELng = bounds.northEast.getLng(); //东北角的经度 num 右
+
+    let data = [
+        new AMap.LngLat(mSWLng, mSWLat), //西南角
+        new AMap.LngLat(mSWLng, mNELat), //西北角
+        new AMap.LngLat(mNELng, mNELat), //东北角
+        new AMap.LngLat(mNELng, mSWLat), //东南角
+
+    ]
+    addPolygon(data);
+
+    //划分网格
+    //纬度差
+    let DeltaLat = mNELat - mSWLat;
+    //经度差
+    let DeltaLng = mNELng - mSWLng;
+    //跨度值
+    let spanLat = DeltaLat / gsize.value; //纬度(上下
+    let spanLng = DeltaLng / gsize.value; //经度(左右
+
+    //瓦片四角坐标
+    //结束后paths会有多少个瓦片的信息（每个瓦片包含四个角经纬坐标
+    for (let row = 0; row < gsize.value; row++) {
+        for (let col = 0; col < gsize.value; col++) {
+            let SWLng = mSWLng + col * spanLng; //西南角经度
+            let SWLat = mSWLat + row * spanLat; //西南角纬度
+            let NELng = SWLng + spanLng; //东北角经度
+            let NELat = SWLat + spanLat; //东北角纬度
+
+            let data = [
+                new AMap.LngLat(SWLng, SWLat), //西南角
+                new AMap.LngLat(SWLng, NELat), //西北角
+                new AMap.LngLat(NELng, NELat), //东北角
+                new AMap.LngLat(NELng, SWLat), //东南角
+            ];
+
+            addPolygon(data, polygons, map);
+
+            paths.push(data);
+
+        }
+    }
+
+}
+
+export function addPolygon(path, polygons, map) {
+    let polygon = new AMap.Polygon({
+        path: path,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.2,
+        strokeColor: '#2b8cbe',
+        strokeWeight: 1,
+        strokeStyle: 'dashed',
+        strokeDasharray: [5, 5],
+    });
+    polygon.on('click', () => { //触发poi查询
+        polygon.setOptions({
+            fillOpacity: 0.7,
+            fillColor: '#7bccc4'
+        });
+        poiSearch(polygon);
+
+    })
+    polygon.on('mouseout', () => {
+        polygon.setOptions({
+            fillOpacity: 0.5,
+            fillColor: '#ccebc5'
+
+        })
+    })
+
+    //设置完成添加到数组
+    polygons.push(polygon);
+
+    map.add(polygon);
+}
+
+/**
+ * 边缘poi
+ * @param polygonArr
+ * @param key
+ * @returns {*}
+ */
+export function searchByKeyInBounds(polygonArr,key) {
+    return AMap.plugin("AMap.PlaceSearch", function () {
+        let placeSearch = new AMap.PlaceSearch({
+            //city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
+            city: "上海",
+        });
+        //多边形范围坐标数组
+
+        console.log(polygonArr);
+
+        placeSearch.searchInBounds(key, polygonArr, function (status, result) {
+            console.log(result);
+            let pois = 0
+            //查询成功时，result 即对应匹配的 POI 信息
+            if (result.info === 'OK') {
+                pois = result.poiList.pois;
+            }
+            return pois
+        });
+    })
+}
+
+export function drawCity(map) {
+    AMap.plugin("AMap.DistrictSearch", function () {
+        let district = new AMap.DistrictSearch({
+            extensions: "all", //返回行政区边界坐标等具体信息
+            level: "province", //设置查询行政区级别为区
+        });
+        district.search("上海市", function (status, result) {
+            let bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
+            if (bounds) {
+                for (let i = 0; i < bounds.length; i++) {
+                    //生成行政区划 polygon
+                    let polygon = new AMap.Polygon({
+                        map: map, //显示该覆盖物的地图对象
+                        strokeWeight: 1, //轮廓线宽度
+                        path: bounds[i], //多边形轮廓线的节点坐标数组
+                        fillOpacity: 0.7, //多边形填充透明度
+                        fillColor: "#CCF3FF", //多边形填充颜色
+                        strokeColor: "#CC66CC", //线条颜色
+                    });
+
+                }
+                map.setFitView(); //将覆盖物调整到合适视野
+            }
+        });
+    });
+}
\ No newline at end of file
--- a/src/utils/map05.js
+++ b/src/utils/map05.js
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+//栅格生成
+export function drawGe( gsize, paths, polygons, map) {
+    // 拿到四角坐标
+    let bounds = map.getBounds();
+    console.log(bounds.northEast.toString());
+    console.log(bounds.southWest.toString());
+
+    let mSWLat = bounds.southWest.getLat(); //西南角的纬度 num 下
+    let mSWLng = bounds.southWest.getLng(); //西南角的经度 num 左
+    let mNELat = bounds.northEast.getLat(); //东北角的纬度 num 上
+    let mNELng = bounds.northEast.getLng(); //东北角的经度 num 右
+
+    let data = [
+        new AMap.LngLat(mSWLng, mSWLat), //西南角
+        new AMap.LngLat(mSWLng, mNELat), //西北角
+        new AMap.LngLat(mNELng, mNELat), //东北角
+        new AMap.LngLat(mNELng, mSWLat), //东南角
+
+    ]
+    addPolygon(data);
+
+    //划分网格
+    //纬度差
+    let DeltaLat = mNELat - mSWLat;
+    //经度差
+    let DeltaLng = mNELng - mSWLng;
+    //跨度值
+    let spanLat = DeltaLat / gsize.value; //纬度(上下
+    let spanLng = DeltaLng / gsize.value; //经度(左右
+
+    //瓦片四角坐标
+    //结束后paths会有多少个瓦片的信息（每个瓦片包含四个角经纬坐标
+    for (let row = 0; row < gsize.value; row++) {
+        for (let col = 0; col < gsize.value; col++) {
+            let SWLng = mSWLng + col * spanLng; //西南角经度
+            let SWLat = mSWLat + row * spanLat; //西南角纬度
+            let NELng = SWLng + spanLng; //东北角经度
+            let NELat = SWLat + spanLat; //东北角纬度
+
+            let data = [
+                new AMap.LngLat(SWLng, SWLat), //西南角
+                new AMap.LngLat(SWLng, NELat), //西北角
+                new AMap.LngLat(NELng, NELat), //东北角
+                new AMap.LngLat(NELng, SWLat), //东南角
+            ];
+
+            addPolygon(data, polygons, map);
+
+            paths.push(data);
+
+        }
+    }
+
+}
+
+//单独生成多边形，只是传入参数不一样
+export function addPolygon(path, polygons, map) {
+    let polygon = new AMap.Polygon({
+        path: path,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.2,
+        strokeColor: '#2b8cbe',
+        strokeWeight: 1,
+        strokeStyle: 'dashed',
+        strokeDasharray: [5, 5],
+    });
+    polygon.on('click', () => { //触发poi查询
+        polygon.setOptions({
+            fillOpacity: 0.7,
+            fillColor: '#7bccc4'
+        });
+        poiSearch(polygon);
+
+    })
+    polygon.on('mouseout', () => {
+        polygon.setOptions({
+            fillOpacity: 0.5,
+            fillColor: '#ccebc5'
+
+        })
+    })
+
+    //设置完成添加到数组
+    polygons.push(polygon);
+
+    map.add(polygon);
+}
+
+/**
+ * 边缘poi
+ * @param polygonArr
+ * @param key
+ * @returns {*}
+ */
+// 当时遇到一个异步问题，以及打算写成方便调用的形式，就单独拿出来了。但好像没咋用
+export function searchByKeyInBounds(polygonArr,key) {
+    return AMap.plugin("AMap.PlaceSearch", function () {
+        let placeSearch = new AMap.PlaceSearch({
+            //city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
+            city: "上海",
+        });
+        //多边形范围坐标数组
+
+        console.log(polygonArr);
+
+        placeSearch.searchInBounds(key, polygonArr, function (status, result) {
+            console.log(result);
+            let pois = 0
+            //查询成功时，result 即对应匹配的 POI 信息
+            if (result.info === 'OK') {
+                pois = result.poiList.pois;
+            }
+            return pois
+        });
+    })
+}
+
+// 绘制某个行政区的边缘
+export function drawCity(map) {
+    AMap.plugin("AMap.DistrictSearch", function () {
+        let district = new AMap.DistrictSearch({
+            extensions: "all", //返回行政区边界坐标等具体信息
+            level: "province", //设置查询行政区级别为区
+        });
+        //调整第一个参数即可。
+        district.search("梅州市", function (status, result) {
+            let bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
+            if (bounds) {
+                for (let i = 0; i < bounds.length; i++) {
+                    //生成行政区划 polygon
+                    let polygon = new AMap.Polygon({
+                        map: map, //显示该覆盖物的地图对象
+                        strokeWeight: 1, //轮廓线宽度
+                        path: bounds[i], //多边形轮廓线的节点坐标数组
+                        fillOpacity: 0.7, //多边形填充透明度
+                        fillColor: "#CCF3FF", //多边形填充颜色
+                        strokeColor: "#CC66CC", //线条颜色
+                    });
+
+                }
+                map.setFitView(); //将覆盖物调整到合适视野
+            }
+        });
+    });
+}
\ No newline at end of file
--- a/src/utils/map06.js
+++ b/src/utils/map06.js
+//自定义多边形
+
+
+//生成单个多边形。用于显示自定义多边形
+//与2的区分在于传递的参数不同，以及这个没有设置鼠标事件，只显示多边形
+export function addPolygon(path, map) {
+    let polygon = new AMap.Polygon({
+        path: path,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.2,
+        strokeColor: '#2b8cbe',
+        strokeWeight: 1,
+        strokeStyle: 'dashed',
+        strokeDasharray: [5, 5],
+    });
+
+    map.add(polygon)
+
+    return polygon
+}
+
+//随机生成五位混合字母和数字的字符串
+export function randomKey() {
+    var length = 5; // 定义字符串长度
+    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    var result = '';
+    for (var i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+
+
+// 查找poi，返回结果中的第一个值
+export async function poiSearchOne(path) {
+    let polygonArr = path;
+
+    console.log('polygonArr', polygonArr);
+
+    return new Promise((resolve) => {
+        AMap.plugin("AMap.PlaceSearch", function () {
+            let placeSearch = new AMap.PlaceSearch({
+                city: "天津市",
+            });
+
+            placeSearch.searchInBounds("教育机构", polygonArr, function (status, result) {
+                console.log('教育机构res：', result);
+                if (status === 'complete' && result.info === 'OK' && result.poiList.pois.length > 0) {
+                    console.log('result.poiList.pois[0].name', result.poiList.pois[0].name);
+                    resolve(result.poiList.pois[0].name); // 使用resolve返回结果
+                } else {
+                    resolve('无此类建筑')
+                }
+            });
+        });
+    });
+}
+
+// 踩坑后做判断用。
+// 判断交集的方法有时会报错，说传入的参数是不合法的图形。当时用这个函数判断了一下
+// 后来发现是构造的时候出现问题
+// turf的多边形构造和高德的不一样。
+// 1.turf用的是[...[经度，纬度]]，高德用的是他自己封装的坐标对。
+// 2.turf的path必须是第一个坐标和最后一个坐标相同，即【绘制路线是封口的。图形是封闭图形】。但是高德的开口也可以，默认最后一个点会链接到第一个点去
+// 3.接2，中间的其他坐标有连续相同的不影响。
+export function isGeometry(obj) {
+    const geometryTypes = [
+        'Point',
+        'LineString',
+        'Polygon',
+        'MultiPoint',
+        'MultiLineString',
+        'MultiPolygon',
+        'GeometryCollection'
+    ];
+
+    // 检查是否为对象，并且具有type属性
+    if (typeof obj === 'object' && obj !== null && 'type' in obj) {
+        // 检查type属性是否为Geometry类型
+        return geometryTypes.includes(obj.type);
+    }
+
+    // 如果不满足条件，则不是Geometry
+    return false;
+}
+
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
+<script setup>
+import {onMounted, onUnmounted, ref, watch} from "vue";
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+let map = null;
+
+// 存每一个路径的四角坐标
+// 每个path包含四个latlng
+let paths = [];
+
+//拆分网格用
+//最终拆的格数=gsize ** 2
+let gsize = ref(5)
+
+/**
+ * 网格绘制
+ * 步骤：
+ * 1.销毁原有的网格（保证缩放/移动后重新读取界面四角，生成新网格。不销毁会叠在一起
+ * 2.先拿窗口的四角坐标（经度，纬度），画整个窗口的矩形
+ * 3.计算窗口上下和左右的差值，然后除以gsize得到步长，用于后续移动绘制点
+ * 4.画其余的小矩形（即每个小方格）方法是通过绘制点+步长算出小方格的四角坐标，然后用path作为参数生成多边形
+ */
+function drawLayer() {
+
+  destroyAll();
+  // 拿到四角坐标
+  let bounds = map.getBounds();
+  console.log(bounds.northEast.toString());
+  console.log(bounds.southWest.toString());
+
+  let mSWLat = bounds.southWest.getLat(); //西南角的纬度 num 下
+  let mSWLng = bounds.southWest.getLng(); //西南角的经度 num 左
+  let mNELat = bounds.northEast.getLat(); //东北角的纬度 num 上
+  let mNELng = bounds.northEast.getLng(); //东北角的经度 num 右
+
+  let data = [
+    new AMap.LngLat(mSWLng, mSWLat), //西南角
+    new AMap.LngLat(mSWLng, mNELat), //西北角
+    new AMap.LngLat(mNELng, mNELat), //东北角
+    new AMap.LngLat(mNELng, mSWLat), //东南角
+
+  ]
+
+  //绘制底层的大矩形（其实好像不画也行。为什么有这句是因为当时在试api
+  addPolygon(data);
+
+
+  //计算步长的过程如下：
+
+  //划分网格
+  //纬度差
+  let DeltaLat = mNELat - mSWLat;
+  //经度差
+  let DeltaLng = mNELng - mSWLng;
+  //跨度值
+  let spanLat = DeltaLat / gsize.value; //纬度(上下
+  let spanLng = DeltaLng / gsize.value; //经度(左右
+
+  //瓦片四角坐标
+  //结束后paths会有16个瓦片的信息（每个瓦片包含四个角经纬坐标
+  //采取的是 得到一个四角坐标画一个方格
+  for (let row=0; row<gsize.value; row++) {
+    for (let col=0; col<gsize.value; col++) {
+      let SWLng = mSWLng + col * spanLng; //西南角经度
+      let SWLat = mSWLat + row * spanLat; //西南角纬度
+      let NELng = SWLng + spanLng; //东北角经度
+      let NELat = SWLat + spanLat; //东北角纬度
+
+      let data = [
+        new AMap.LngLat(SWLng,SWLat), //西南角
+        new AMap.LngLat(SWLng,NELat), //西北角
+        new AMap.LngLat(NELng, NELat), //东北角
+        new AMap.LngLat(NELng,SWLat), //东南角
+      ];
+
+      //绘制小方格，同时绑定方格的鼠标点击事件和移开鼠标事件
+      addPolygon(data);
+
+      //绘制结束把path推到paths中
+      paths.push(data);
+
+    }
+  }
+
+}
+
+
+let polygons = [];
+
+//绘制小方格，同时绑定方格的鼠标点击事件和移开鼠标事件
+// 绘制网格（对单独瓦片
+function addPolygon(data) {
+  //设置多边形属性
+  let polygon = new AMap.Polygon({
+    path: data,
+    fillColor: '#ccebc5',
+    strokeOpacity: 1,
+    fillOpacity: 0.2,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+  });
+  //设置点击事件
+  polygon.on('click', () => { //触发poi查询
+    //样式改变
+    polygon.setOptions({
+      fillOpacity: 0.7,
+      fillColor: '#7bccc4'
+    });
+    //触发搜索，参数是多边形对象
+    poiSearch(polygon);
+
+  })
+  //鼠标移开 设置样式改变
+  polygon.on('mouseout', () => {
+    polygon.setOptions({
+      fillOpacity: 0.5,
+      fillColor: '#ccebc5'
+
+    })
+  })
+
+  //设置完成添加到数组
+  polygons.push(polygon);
+
+  //把多边形挂载到map上
+  map.add(polygon);
+}
+
+//销毁全部网格（刷新用
+function destroyAll() {
+  //polygons中存了全部多边形对象，对对象使用destroy()方法可销毁单一多边形
+  for(let item of polygons) {
+    item.destroy();
+  }
+}
+
+//存储三个表格的返回结果
+let res1 = ref();
+let res2 = ref();
+let res3 = ref();
+
+//调用POI查询
+function poiSearch(polygon) {
+  //拿取当前方格的四角坐标自己手动组成path
+  //实际上直接对多边形用getPath()即可
+  let sw = polygon.getBounds().getSouthWest().toArray();
+  let se = polygon.getBounds().getSouthEast().toArray();
+  let nw = polygon.getBounds().getNorthWest().toArray();
+  let ne = polygon.getBounds().getNorthEast().toArray();
+
+  let polygonArr = [sw,se,nw,ne];
+  console.log(polygonArr);
+
+
+  //引入搜索插件
+  AMap.plugin("AMap.PlaceSearch", function () {
+    // 创建新对象
+    let placeSearch = new AMap.PlaceSearch({
+      //city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
+      city: "全国",
+    });
+    //多边形范围坐标数组
+
+    //设置结果为每页25条
+    placeSearch.setPageSize(25);
+
+    console.log(polygonArr);
+
+    placeSearch.searchInBounds("公交站", polygonArr, function (status, result) {
+      console.log(result);
+      // 查询成功时，result 即对应匹配的 POI 信息
+      if(result.info === 'OK') {
+        res1.value = result.poiList.pois; // 存table值
+        console.log('res1:',res1.value);
+      }
+    });
+
+    placeSearch.searchInBounds("教育机构", polygonArr, function (status, result) {
+      console.log(result);
+      //查询成功时，result 即对应匹配的 POI 信息
+      if(result.info === 'OK') {
+        res2.value = result.poiList.pois;
+      }
+
+    });
+
+    placeSearch.searchInBounds("政府机构", polygonArr, function (status, result) {
+      console.log(result);
+      //查询成功时，result 即对应匹配的 POI 信息
+      if(result.info === 'OK') {
+        res3.value = result.poiList.pois;
+      }
+
+    });
+  });
+
+}
+
+
+onMounted(() => {
+  // 地图初始化，参考高德官方文档即可。创建key对应的绑定服务是Web端
+  window._AMapSecurityConfig = {
+    securityJsCode: "5458077db302f10c5c97d06df9b3f72e",
+  };
+  AMapLoader.load({
+    key: "8d55c96e705080426e1a7184a7097520", // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+  })
+      .then((AMap) => {
+        map = new AMap.Map("container", {
+          // 设置地图容器id
+          viewMode: "2D", // 是否为3D地图模式
+          zoom: 16, // 初始化地图级别
+          center: [117.156255, 39.105977], // 初始化地图中心点位置
+        });
+
+        // 初始化网格
+        drawLayer();
+
+        // 可设置option调整gsize，改变网格中的方格数量
+        watch(gsize,()=> {
+          drawLayer();
+        })
+
+        //绑定地图移动与缩放事件
+        map.on('moveend', drawLayer);
+        map.on('zoomend', drawLayer);
+
+
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+});
+
+onUnmounted(() => {
+  map?.destroy();
+});
+
+
+</script>
+
+<template>
+    <div class="main">
+      <div class="left">
+        <div id="container"></div>
+      </div>
+      <div class="right">
+        <div style="display: flex;flex-direction: column;align-items: center;padding-top: 20px">
+<!--          <div>-->
+<!--            格子-->
+<!--            <el-radio-group v-model="gsize">-->
+<!--              <el-radio :value="4" size="default">大</el-radio>-->
+<!--              <el-radio :value="5" size="default">中</el-radio>-->
+<!--              <el-radio :value="6" size="default">小</el-radio>-->
+<!--            </el-radio-group>-->
+<!--          </div>-->
+          <div class="scroll-text">
+            <el-table :data="res1" style="width: 100%;height: 100%">
+              <el-table-column prop="name" label="公交站" width="180" />
+              <el-table-column prop="address" label="班车" width="180"></el-table-column>
+            </el-table>
+          </div>
+          <div class="scroll-text">
+            <el-table :data="res2" style="width: 100%;height: 100%">
+              <el-table-column prop="name" label="教育机构" width="370" />
+            </el-table>
+
+          </div>
+          <div class="scroll-text">
+            <el-table :data="res3" style="width: 100%;height: 100%">
+              <el-table-column prop="name" label="政府机构" width="370" />
+            </el-table>
+
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+
+</template>
+
+<style>
+
+
+#container {
+  width: 100%;
+  height: 100%;
+}
+
+.main {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+}
+
+.left {
+  flex: 2;
+}
+
+.right {
+  flex: 1;
+}
+
+.scroll-text {
+  width: 400px;
+  height: 150px;
+  overflow: auto;
+  border: 1px solid #ccc;
+  padding: 10px;  margin-top: 18px ;
+
+
+}
+</style>
--- a/src/views/Map02.vue
+++ b/src/views/Map02.vue
+<script setup>
+
+import {onMounted, onUnmounted, watch} from "vue";
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+let map = null;
+
+onMounted(() => {
+  window._AMapSecurityConfig = {
+    securityJsCode: "5458077db302f10c5c97d06df9b3f72e",
+  };
+  AMapLoader.load({
+    key: "8d55c96e705080426e1a7184a7097520", // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+  })
+      .then((AMap) => {
+        map = new AMap.Map("container", {
+          // 设置地图容器id
+          viewMode: "2D", // 是否为3D地图模式
+          zoom: 10, // 初始化地图级别
+          center: [117.1951073, 39.0856735], // 初始化地图中心点位置
+        });
+
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+});
+
+onUnmounted(() => {
+  map?.destroy();
+});
+
+</script>
+
+<template>
+<div class="main">
+  <div class="left">
+    <div id="container"></div>
+  </div>
+  <div class="right">
+
+  </div>
+
+</div>
+
+</template>
+
+<style scoped>
+#container {
+  width: 100%;
+  height: 100%;
+}
+
+.main {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+}
+
+.left {
+  flex: 2;
+}
+
+.right {
+  flex: 1;
+}
+
+
+</style>
\ No newline at end of file
--- a/src/views/Map03_max.vue
+++ b/src/views/Map03_max.vue
--- a/src/views/Map04_SH.vue
+++ b/src/views/Map04_SH.vue
--- a/src/views/Map05_GZ.vue
+++ b/src/views/Map05_GZ.vue
--- a/src/views/Map06_NK.vue
+++ b/src/views/Map06_NK.vue
--- a/vite.config.js
+++ b/vite.config.js
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})