Skip to content

M
map
Commit 0d1608f9 authored by 张伯涛's avatar 张伯涛
Browse files
Options

项目搭建

parents
Hide whitespace changes
Inline Side-by-side
Showing with 3086 additions and 0 deletions
.gitignore 0 → 100644
View file @ 0d1608f9
# 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
README.md 0 → 100644
View file @ 0d1608f9
# 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
```
index.html 0 → 100644
View file @ 0d1608f9
<!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>
jsconfig.json 0 → 100644
View file @ 0d1608f9
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
package-lock.json 0 → 100644
View file @ 0d1608f9
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 0d1608f9
{
"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"
}
}
src/App.vue 0 → 100644
View file @ 0d1608f9
<script setup>
</script>
<template>
<RouterView />
</template>
<style scoped>
</style>
src/assets/base.css 0 → 100644
View file @ 0d1608f9
/* 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;
}
src/assets/logo.svg 0 → 100644
View file @ 0d1608f9
<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>
src/assets/main.css 0 → 100644
View file @ 0d1608f9
@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;
}
}
src/main.js 0 → 100644
View file @ 0d1608f9
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')
src/router/index.js 0 → 100644
View file @ 0d1608f9
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
src/stores/counter.js 0 → 100644
View file @ 0d1608f9
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 }
})
src/utils/draw.js 0 → 100644
View file @ 0d1608f9
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
src/utils/map04.js 0 → 100644
View file @ 0d1608f9
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
src/utils/map05.js 0 → 100644
View file @ 0d1608f9
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
src/utils/map06.js 0 → 100644
View file @ 0d1608f9
//自定义多边形
//生成单个多边形。用于显示自定义多边形
//与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;
}
src/views/HomeView.vue 0 → 100644
View file @ 0d1608f9
<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>
src/views/Map02.vue 0 → 100644
View file @ 0d1608f9
<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
src/views/Map03_max.vue 0 → 100644
View file @ 0d1608f9
<script setup>
// 单次调取最大值测试
import {onMounted, onUnmounted, ref} from "vue";
import AMapLoader from '@amap/amap-jsapi-loader';
let map = null;
// 存每一个路径的四角坐标
// 每个path包含四个latlng
let paths = [];
let gsize = ref(5)
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), //东南角
]
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);
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.add(polygon);
}
//销毁全部网格（刷新用
function destroyAll() {
for(let item of polygons) {
item.destroy();
}
}
let res1 = ref({
data: [],
total: 0,
loading: false
});
let res2 = ref({
data: [],
key: '小区',
total: 0,
loading: false
});
let res3 = ref({
data: [],
total: 0,
loading: false
});
//调用POI查询
function poiSearch(polygon) {
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: "天津",
});
//多边形范围坐标数组
console.log(polygonArr);
placeSearch.searchInBounds("公交站", polygonArr, function (status, result) {
console.log(result);
//查询成功时，result 即对应匹配的 POI 信息
if(result.info === 'OK') {
res1.value = result.poiList.pois;
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;
}
});
});
}
function drawCity() {
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", //线条颜色
});
polygon.on('click', () => { //触发poi查询
polygon.setOptions({
fillOpacity: 0.7,
fillColor: '#7bccc4'
});
searchInCity(polygon)
})
polygon.on('mouseout', () => {
polygon.setOptions({
fillOpacity: 0.5,
fillColor: '#ccebc5'
})
})
}
map.setFitView(); //将覆盖物调整到合适视野
}
});
});
}
async function searchInCity(polygon) {
res1.value.loading = true;
res2.value.loading = true;
res3.value.loading = true;
let polygonArr = polygon.getPath();
console.log(polygonArr);
res2.value.data = await searchByKeyInBounds(polygonArr, res2.value.key);
if(res2.value.data){
res2.value.total = res2.value.data.length;
}
// AMap.plugin("AMap.PlaceSearch", function () {
// let placeSearch = new AMap.PlaceSearch({
// //city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
// city: "全国",
// });
// //多边形范围坐标数组
//
// console.log(polygonArr);
//
// placeSearch.searchInBounds("公交站", polygonArr, function (status, result) {
// console.log(result);
// //查询成功时，result 即对应匹配的 POI 信息
// if(result.info === 'OK') {
// res1.value = result.poiList.pois;
// console.log('res1:',res1.value);
// }
// });
//
// placeSearch.searchInBounds("小区", polygonArr, function (status, result) {
// console.log(result);
// //查询成功时，result 即对应匹配的 POI 信息
// if(result.info === 'OK') {
// res2.value.data = result.poiList.pois;
// res2.value.loading = false;
// }
//
// });
//
// placeSearch.searchInBounds("政府机构", polygonArr, function (status, result) {
// console.log(result);
// //查询成功时，result 即对应匹配的 POI 信息
// if(result.info === 'OK') {
// res3.value = result.poiList.pois;
// }
//
// });
// });
res1.value.loading = false;
res2.value.loading = false;
res3.value.loading = false;
}
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
});
})
}
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], // 初始化地图中心点位置
});
drawCity();
// drawLayer();
//
// 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.data" style="width: 100%;height: 100%" v-loading="res1.loading">
<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.data" style="width: 100%;height: 100%" v-loading="res2.loading">
<el-table-column prop="name" label="小区" width="370" />
</el-table>
</div>
<div class="scroll-text">
<el-table :data="res3.data" style="width: 100%;height: 100%" v-loading="res3.loading">
<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>
src/views/Map04_SH.vue 0 → 100644
View file @ 0d1608f9
<script setup>
//计算栅格
import {onMounted, onUnmounted, ref, watch} from "vue";
import AMapLoader from '@amap/amap-jsapi-loader';
import {drawCity, searchByKeyInBounds} from "@/utils/map04.js";
let map = null;
let zoom = ref();
// 存每一个路径的四角坐标
// 每个path包含四个latlng
let paths = [];
let gsize = ref(5)
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), //东南角
]
addPolygon(data);
drawGe(mNELat,mSWLat,mNELng,mSWLng)
}
function drawGe(mNELat,mSWLat,mNELng,mSWLng) {
//划分网格
//纬度差
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);
paths.push(data);
}
}
}
let polygons = [];
let cachePolygon = ref();
let dataS = ref({
shanghaiS: 6340.5,
geS: 0,
bi: 0,
num: 0,
zoom: 0
})
const options = [
{
value: '11.8',
label: '11.8',
},
{
value: '12.0',
label: '12.0',
},
{
value: '12.2',
label: '12.2',
},
{
value: '12.4',
label: '12.4',
},
{
value: '12.6',
label: '12.6',
},
{
value: '12.8',
label: '12.8',
},
{
value: '13.0',
label: '13.0',
},
]
// 绘制网格（对单独瓦片
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'
});
cachePolygon.value = polygon;
dataS.value.geS = AMap.GeometryUtil.ringArea(polygon.getPath()) / 1000000;//平方千米
console.log('ge:',dataS.value.geS);
dataS.value.bi = dataS.value.geS / dataS.value.shanghaiS;
dataS.value.num = dataS.value.shanghaiS / dataS.value.geS;
dataS.value.zoom = map.getZoom();
poiSearch(cachePolygon.value);
})
polygon.on('mouseout', () => {
polygon.setOptions({
fillOpacity: 0.5,
fillColor: '#ccebc5'
})
})
//设置完成添加到数组
polygons.push(polygon);
map.add(polygon);
}
//销毁全部网格（刷新用
function destroyAll() {
for (let item of polygons) {
item.destroy();
}
}
let pageControl = ref({
rows: 100,
page: 1,
loading: false
})
let res1 = ref({
count: 0,
pois: []
});
let res2 = ref({
count: 0,
pois: []
});
let res3 = ref({
count: 0,
pois: []
});
//调用POI查询
async function poiSearch() {
pageControl.value.loading = true;
let polygonArr = cachePolygon.value.getPath();
console.log(polygonArr);
await AMap.plugin("AMap.PlaceSearch", function () {
let placeSearch = new AMap.PlaceSearch({
//city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
city: "上海",
});
placeSearch.setPageSize(pageControl.value.rows);
placeSearch.setPageIndex(pageControl.value.page);
placeSearch.searchInBounds("公交站", polygonArr, function (status, result) {
console.log('公交站res：', result);
//查询成功时，result 即对应匹配的 POI 信息
if (result.info === 'OK') {
res1.value.pois = result.poiList.pois;
res1.value.count = result.poiList.count;
}
});
placeSearch.searchInBounds("教育机构", polygonArr, function (status, result) {
console.log('教育机构res：', result);
//查询成功时，result 即对应匹配的 POI 信息
if (result.info === 'OK') {
res2.value.pois = result.poiList.pois;
res2.value.count = result.poiList.count;
}
});
placeSearch.searchInBounds("政府机构", polygonArr, function (status, result) {
console.log('政府机构res：', result);
//查询成功时，result 即对应匹配的 POI 信息
if (result.info === 'OK') {
res3.value.pois = result.poiList.pois;
res3.value.count = result.poiList.count;
}
});
});
pageControl.value.loading = false;
}
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: [121.4737, 31.2304], // 初始化地图中心点位置
});
watch(gsize, () => {
drawLayer();
})
watch(zoom, () => {
map.setZoom(zoom.value)
})
drawCity(map);
//绑定地图移动与缩放事件
map.on('moveend', () => {
let zoom = map.getZoom();
console.log(zoom);
if((zoom >= 11) && (zoom <= 17)) {
map.clearMap()
drawLayer()
} else {
destroyAll()
}
});
map.on('zoomend', () => {
let zoom = map.getZoom();
dataS.value.zoom = zoom;
if((zoom >= 12) && (zoom <= 17)) {
map.clearMap()
drawLayer()
} else {
destroyAll()
}
});
})
.catch((e) => {
console.log(e);
});
});
onUnmounted(() => {
map?.destroy();
});
</script>
<template>
<div class="main">
<div class="left">
<div id="container"></div>
</div>
<div class="right">
<el-scrollbar height="100vh" style="margin-left: 10px">
<el-row>
<el-col :span="16">
<el-form-item label="zoom选择">
<el-select
v-model="zoom"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="当前zoom">
<el-input :value="dataS.zoom" disabled />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="当前方格面积">
<el-input :value="dataS.geS" disabled />
（平方千米）
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="在上海占比">
<el-input :value="dataS.bi" disabled />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="需要块数">
<el-input :value="dataS.num" disabled />
</el-form-item>
</el-col>
</el-row>
<div style="display: flex;flex-direction: column;align-items: center;padding-top: 20px">
<div class="scroll-text">
<el-table :data="res1.pois" style="width: 100%;height: 100%">
<el-table-column type="index" width="56" label="序号"/>
<el-table-column prop="name" label="公交站" width="370"/>
</el-table>
</div>
<el-pagination
layout="total, prev, pager, next"
:total="res1.count"
:limit.sync="pageControl.rows"
v-model:current-page="pageControl.page"
@current-change="poiSearch()"
/>
<div class="scroll-text">
<el-table :data="res2.pois" style="width: 100%;height: 100%">
<el-table-column type="index" width="56" label="序号"/>
<el-table-column prop="name" label="教育机构" width="370"/>
</el-table>
</div>
<el-pagination
layout="total, prev, pager, next"
:total="res2.count"
:limit.sync="pageControl.rows"
v-model:current-page="pageControl.page"
@current-change="poiSearch()"
/>
<div class="scroll-text">
<el-table :data="res3.pois" style="width: 100%;height: 100%">
<el-table-column type="index" width="56" label="序号"/>
<el-table-column prop="name" label="政府机构" width="370"/>
</el-table>
</div>
<el-pagination
layout="total, prev, pager, next"
:total="res3.count"
:limit.sync="pageControl.rows"
v-model:current-page="pageControl.page"
@current-change="poiSearch()"
/>
</div>
</el-scrollbar>
</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: 300px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
margin-top: 18px;
}
</style>
src/views/Map05_GZ.vue 0 → 100644
View file @ 0d1608f9
<script setup>
//计算栅格
import {onMounted, onUnmounted, ref, watch} from "vue";
import AMapLoader from '@amap/amap-jsapi-loader';
import {drawCity, searchByKeyInBounds} from "@/utils/map05.js";
let map = null;
let zoom = ref();
// 存每一个路径的四角坐标
// 每个path包含四个latlng
let paths = [];
let gsize = ref(5)
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), //东南角
]
addPolygon(data);
drawGe(mNELat,mSWLat,mNELng,mSWLng)
}
function drawGe(mNELat,mSWLat,mNELng,mSWLng) {
//划分网格
//纬度差
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);
paths.push(data);
}
}
}
let polygons = [];
let cachePolygon = ref();
let dataS = ref({
shanghaiS: 15864.51,
geS: 0,
bi: 0,
num: 0,
zoom: 0
})
const options = [
{
value: '11.8',
label: '11.8',
},
{
value: '12.0',
label: '12.0',
},
{
value: '12.2',
label: '12.2',
},
{
value: '12.4',
label: '12.4',
},
{
value: '12.6',
label: '12.6',
},
{
value: '12.8',
label: '12.8',
},
{
value: '13.0',
label: '13.0',
},
]
// 绘制网格（对单独瓦片
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'
});
cachePolygon.value = polygon;
dataS.value.geS = AMap.GeometryUtil.ringArea(polygon.getPath()) / 1000000;//平方千米
console.log('ge:',dataS.value.geS);
dataS.value.bi = dataS.value.geS / dataS.value.shanghaiS;
dataS.value.num = dataS.value.shanghaiS / dataS.value.geS;
dataS.value.zoom = map.getZoom();
poiSearch(cachePolygon.value);
})
polygon.on('mouseout', () => {
polygon.setOptions({
fillOpacity: 0.5,
fillColor: '#ccebc5'
})
})
//设置完成添加到数组
polygons.push(polygon);
map.add(polygon);
}
//销毁全部网格（刷新用
function destroyAll() {
for (let item of polygons) {
item.destroy();
}
}
let pageControl = ref({
rows: 25,
page: 1,
loading: false
})
let res1 = ref({
count: 0,
pois: []
});
let res2 = ref({
count: 0,
pois: []
});
let res3 = ref({
count: 0,
pois: []
});
//调用POI查询
async function poiSearch() {
pageControl.value.loading = true;
let polygonArr = cachePolygon.value.getPath();
console.log(polygonArr);
await AMap.plugin("AMap.PlaceSearch", function () {
let placeSearch = new AMap.PlaceSearch({
//city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
city: "梅州市",
});
placeSearch.setPageSize(pageControl.value.rows);
placeSearch.setPageIndex(pageControl.value.page);
placeSearch.searchInBounds("公交站", polygonArr, function (status, result) {
console.log('公交站res：', result);
//查询成功时，result 即对应匹配的 POI 信息
if (result.info === 'OK') {
res1.value.pois = result.poiList.pois;
res1.value.count = result.poiList.count;
}
});
placeSearch.searchInBounds("教育机构", polygonArr, function (status, result) {
console.log('教育机构res：', result);
//查询成功时，result 即对应匹配的 POI 信息
if (result.info === 'OK') {
res2.value.pois = result.poiList.pois;
res2.value.count = result.poiList.count;
}
});
placeSearch.searchInBounds("政府机构", polygonArr, function (status, result) {
console.log('政府机构res：', result);
//查询成功时，result 即对应匹配的 POI 信息
if (result.info === 'OK') {
res3.value.pois = result.poiList.pois;
res3.value.count = result.poiList.count;
}
});
});
pageControl.value.loading = false;
}
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: [116.12, 24.55], // 初始化地图中心点位置
});
watch(gsize, () => {
drawLayer();
})
watch(zoom, () => {
map.setZoom(zoom.value)
})
drawCity(map);
//绑定地图移动与缩放事件
map.on('moveend', () => {
let zoom = map.getZoom();
console.log(zoom);
if((zoom >= 11) && (zoom <= 17)) {
map.clearMap()
drawLayer()
} else {
destroyAll()
}
});
map.on('zoomend', () => {
let zoom = map.getZoom();
dataS.value.zoom = zoom;
if((zoom >= 12) && (zoom <= 17)) {
map.clearMap()
drawLayer()
} else {
destroyAll()
}
});
})
.catch((e) => {
console.log(e);
});
});
onUnmounted(() => {
map?.destroy();
});
</script>
<template>
<div class="main">
<div class="left">
<div id="container"></div>
</div>
<div class="right">
<el-scrollbar height="100vh" style="margin-left: 10px">
<el-row>
<el-col :span="16">
<el-form-item label="zoom选择">
<el-select
v-model="zoom"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="当前zoom">
<el-input :value="dataS.zoom" disabled />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="当前方格面积">
<el-input :value="dataS.geS" disabled />
（平方千米）
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="在梅州市占比">
<el-input :value="dataS.bi" disabled />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="需要块数">
<el-input :value="dataS.num" disabled />
</el-form-item>
</el-col>
</el-row>
<div style="display: flex;flex-direction: column;align-items: center;padding-top: 20px">
<div class="scroll-text">
<el-table :data="res1.pois" style="width: 100%;height: 100%">
<el-table-column type="index" width="56" label="序号"/>
<el-table-column prop="name" label="公交站" width="370"/>
</el-table>
</div>
<el-pagination
layout="total, prev, pager, next"
:total="res1.count"
:limit.sync="pageControl.rows"
v-model:current-page="pageControl.page"
@current-change="poiSearch()"
/>
<div class="scroll-text">
<el-table :data="res2.pois" style="width: 100%;height: 100%">
<el-table-column type="index" width="56" label="序号"/>
<el-table-column prop="name" label="教育机构" width="370"/>
</el-table>
</div>
<el-pagination
layout="total, prev, pager, next"
:total="res2.count"
:limit.sync="pageControl.rows"
v-model:current-page="pageControl.page"
@current-change="poiSearch()"
/>
<div class="scroll-text">
<el-table :data="res3.pois" style="width: 100%;height: 100%">
<el-table-column type="index" width="56" label="序号"/>
<el-table-column prop="name" label="政府机构" width="370"/>
</el-table>
</div>
<el-pagination
layout="total, prev, pager, next"
:total="res3.count"
:limit.sync="pageControl.rows"
v-model:current-page="pageControl.page"
@current-change="poiSearch()"
/>
</div>
</el-scrollbar>
</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: 300px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
margin-top: 18px;
}
</style>
src/views/Map06_NK.vue 0 → 100644
View file @ 0d1608f9
<script setup>
import {onMounted, onUnmounted, reactive, ref, watch} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {addPolygon, poiSearchOne, randomKey} from "@/utils/map06.js";
import * as turf from '@turf/turf'
//turf的使用
//npm引入后，局部引用即可
//地图
let map = null
//调整zoom的响应值
let zoomOp = ref()
// zoom的当前值监控和下拉option
let zoom = ref({
cur: 13.8,
option: [
{
value: '13.4',
label: '13.4',
},
{
value: '13.6',
label: '13.6',
},
{
value: '13.8',
label: '13.8',
},
{
value: '14.0',
label: '14.0',
},
{
value: '14.2',
label: '14.2',
},
{
value: '14.4',
label: '14.4',
},
{
value: '14.6',
label: '14.6',
},
]
});
// 栅格
let gsize = ref(5)
let paths = [] // 存当前网格中的所有小格的path
let polygons = [] // 所有小格对应的多边形
//自定义多边形绘制的缓存，用于生成表格
let polygonCache = ref({
table: {
data: [],
loading: false,
total: 0
}
})
// 控制自定义多边形的显示与隐藏
// 显示就添加进来，隐藏就通过随机数生成的key查找到当前的多边形然后删除
// key：row.kid, value：polygon
let polygonShow = ref(new Map())
//分页控制 - 自定义多边形table用（当时想集成一下，分页相关都放这里，但是有点问题
let pageControl = ref({
polygons: {
page: 1,
rows: 10
}
})
//分页控制 - 查找结果table的分页控制
let poisPageControl = ref({
page: 1,
rows: 25
})
// 查找结果table
let poiControl = ref({
table: {
data: [],
loading: false,
total: 0
}
})
// 多边形创建表单
let form = reactive({
nameP: '', //当时为了区分poi的返回值中的地名name，加了个P
polygonPath: null // 存储当前绘制的多边形的path，之后再生成/显示多边形直接用path即可
})
//鼠标绘制
let mouseTool = null; // 把生命周期中定义的对象在外面引用(因为一个绘制对象对应一次绘制事件，需要对一个tool进行开关操作
//查找
let placeSearch = null; // 搜索其实可以单写出来，一个placeSearch对象可以对应多次查找，一次查找对应一个关键词。
//开始绘制按钮绑定事件
function startDraw() {
console.log('绘制开始')
// 禁用map的缩放和拖拽防止鼠标误触
map.setStatus({
zoomEnable: false,
dragEnable: false
})
//清除当前地图上的所有多边形方便绘制
map.clearMap()
//设置绘制中的多边形的样式
mouseTool.polygon({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Polygon的Option设置
});
}
//自定义多边形绘制结束后的表单提交
const onSubmit = async () => {
// 恢复地图的缩放和拖拽
map.setStatus({
zoomEnable: true,
dragEnable: true
})
//更新自定义多边形table的数据
polygonCache.value.table.loading = true
console.log('form.polygonPath:',form.polygonPath)
//下面这句其实没有用。作用：查找自定义多边形范围内的某类建筑，返回第一个值（可以用来看圈的地中真实的建筑都包含什么，返回值改成全部即可
let name = await poiSearchOne(form.polygonPath)
//移入到table数据中
polygonCache.value.table.total++
polygonCache.value.table.data.push({
kid: randomKey(), // 后续使用map实现自定义多边形的显示和隐藏时，用kid查找操作的多边形
nameP: form.nameP, // 自定义多边形的名称
name: name, // 废弃了其实。当时的本来想法是行内内嵌一个新表，存当前自定义多边形内的某类建筑名称
path: form.polygonPath, // 当前这个自定义多边形的path
flag: false // 当前多边形显示/隐藏的控制开关
})
console.log('成功创建多边形', form.polygonPath)
//关闭鼠标绘制工具，并且删除这个工具内的多边形数据（true是删除，false是保留。见参考手册）
mouseTool.close(true)
//刷新table表格
polygonCache.value.table.loading = false
}
// 清除表单中的数据
const cancel = () => { // 全回到最开始的情况
mouseTool.close(true)
form.nameP = ''
form.polygonPath = null
}
// 挂载自定义多边形(显示/隐藏)
const mountPoly = (row) => {
if(row.flag) {
//创建多边形
console.log('挂载poly')
console.log(row.path)
let polygon = addPolygon(row.path, map)
polygonShow.value.set(row.kid, polygon) // 放到map中
} else {
//卸载多边形
console.log('卸载poly1')
if (polygonShow.value.has(row.kid)) {
console.log('卸载poly2',polygonShow.value.get(row.kid))
const polygon = polygonShow.value.get(row.kid) // 根据kid拿到要隐藏的自定义多边形的polygon对象
polygon.destroy() // 销毁多边形（但是path还在所以还能生成） bug：移动才能响应
polygonShow.value.delete(row.kid) //移出map
}
}
}
//生成栅格
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), //东南角
]
//绘制矩形整体（窗口覆盖
addPolygon2(data);
// 绘制网格中的小格
drawGe(mNELat,mSWLat,mNELng,mSWLng)
}
function drawGe(mNELat,mSWLat,mNELng,mSWLng) {
//划分网格
//纬度差
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), //东南角
];
addPolygon2(data);
paths.push(data);
}
}
}
//生成栅格用的单个多边形生成
function addPolygon2(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'
});
//缓存一下当前多边形，后面在poi查找过程中，调用判定方格与自定义多边形的交集的函数，参数会用到这个值来传递当前点击的方格的数据
cachePolygon.value = polygon;
poiSearch();
})
//单个多边形对应的鼠标移出事件
polygon.on('mouseout', () => {
polygon.setOptions({
fillOpacity: 0.5,
fillColor: '#ccebc5'
})
})
//设置完成添加到数组
polygons.push(polygon);
//挂载到map上
map.add(polygon);
}
//销毁网格
function destroyAll() {
for (let item of polygons) {
item.destroy();
}
}
// 缓存判断交集时的点击的方格用
let cachePolygon = ref();
//查找
async function poiSearch() {
//结果置空防止重复放入
poiControl.value.table.loading = true
poiControl.value.table.data = []
poiControl.value.table.total = 0
//拿到当前方格对应的多边形的path
let polygonArr = cachePolygon.value.getPath();
console.log(polygonArr);
console.log('page:',poisPageControl.value.page)
//如果查找的是第一页的数据，放入自定义多边形与当前方格的交集结果
if(poisPageControl.value.page === 1) {
//input： 当前方格的path
judgeIntersection(polygonArr)
}
//poi
await AMap.plugin("AMap.PlaceSearch", function () {
let placeSearch = new AMap.PlaceSearch({
//city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
city: "天津市",
});
//分页查找有点问题。但是set方法没错
//这里设置查找的页数和条数
placeSearch.setPageSize(poisPageControl.value.rows);
placeSearch.setPageIndex(poisPageControl.value.page);
console.log('page',poisPageControl.value.page)
//使用关键字在边界内查找
//第二参数为path
placeSearch.searchInBounds("公共交通", polygonArr, function (status, result) {
console.log('公共交通res：', result);
//查询成功时，result 即对应匹配的 POI 信息
if (result.info === 'OK') { //查找有结果则依次放入
result.poiList.pois.forEach((item) => {
poiControl.value.table.data.push({name: item.name});
})
// count为建议结果值（检索的全部结果），不准确。无关查找结果的多与少。数量很少也会存在缺少现象
poiControl.value.table.total += result.poiList.count;
}
});
});
poiControl.value.table.loading = false
}
//判断交界-另一个方法。没用上
//高德工单问了有没有自带的判断交集的方法，给了一个判断两个边界是否有交点的方法
//如下：
//您好，JSAPI中可以使用doesRingRingIntersect判断经纬度路径和经纬度面是否交叉，参考以下文档哈
//https://lbs.amap.com/api/javascript-api-v2/documentation#geometryutildoesringringintersect
let custom = ref([])
// 缓存当前所有的自定义多边形（存的是生成的多边形+自定义多边形名称
let Upoly = ref([])
function judgeIntersection(path0) {
//首先缓存置空防止重复查找
Upoly.value = []
let path1 = [...path0, path0[0]]; // 复制path0并添加第一个点作为闭环
let path = path1.map(item => [item.lng, item.lat]); // 假设item是{lng: ..., lat: ...}
let poly = turf.polygon([path]); // 创建一个turf多边形
//如果有自定义多边形就开始生成对应的多边形群，没有就直接跳过
if(polygonCache.value.table.data) {
for (let item of polygonCache.value.table.data) {
let pathCache = [...item.path, item.path[0]]; // 复制item.path并添加第一个点作为闭环
pathCache = pathCache.map(item => [item.lng, item.lat]); // 同样地，转换坐标格式
let poly0 = turf.polygon([pathCache]); // 创建turf多边形
//turf的自定义多边形放进缓存中
Upoly.value.push({
polygon: poly0,
nameP: item.nameP
});
}
//遍历turf自定义多边形，是否与方格有交集，有就把多边形对应的名称放进查找的总结果列表中
for (let item of Upoly.value) {
//判断是否有交集
//参数写法参考文档。turf版本7与6不一样。这里是7的写法。返回一个布尔值
let intersection = turf.intersect(turf.featureCollection([poly, item.polygon]));
if (intersection) {
console.log('有交集', item.nameP);
poiControl.value.table.data.push({name: item.nameP});
poiControl.value.table.total ++;
console.log(poiControl.value.table.data)
}
}
}
}
//废弃了
// function judgeIntersection(path0) {
//
// let path1 = path0
// path1.push(path1[0])
//
// let path = []
//
// path1.forEach((item) => {
// path.push(item.toArray())
// })
// console.log('path',path)
//
// let poly = turf.polygon([path])
//
// if(polygonCache.value.table.data) {
// for (let item of polygonCache.value.table.data) {
// console.log('item.path',item.path)
//
// let pathCache = []
//
// item.path.push(item.path[0])
// item.path.forEach((item) => {
// pathCache.push(item.toArray())
// })
//
// let poly0 = turf.polygon([pathCache])
// Upoly.value.push({
// polygon: poly0,
// nameP: item.nameP
// })
// }
//
// for (let item of Upoly.value) {
// console.log('poly.geometry', poly.geometry)
// console.log('item.polygon.geometry', item.polygon.geometry)
// let intersection = turf.intersect(poly.geometry, item.polygon.geometry);
// if (intersection) {
// console.log('有交集',item.nameP)
// custom.value.push({nameP: item.nameP});
// }
// }
// }
//
//
// }
//生成地图
onMounted(() => {
window._AMapSecurityConfig = {
securityJsCode: "5458077db302f10c5c97d06df9b3f72e",
};
AMapLoader.load({
key: "8d55c96e705080426e1a7184a7097520", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale", "AMap.MouseTool", "AMap.PlaceSearch"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
})
.then((AMap) => {
map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "2D", // 是否为3D地图模式
zoom: 13.8, // 初始化地图级别
center: [117.156255, 39.105977], // 初始化地图中心点位置
});
//初始化一个网格
drawLayer()
//绑定地图移动与缩放事件
map.on('moveend', () => {
let zoom0 = map.getZoom();
console.log(zoom0);
//当zoom在12-17之间才会生成网格
if((zoom0 >= 12) && (zoom0 <= 17)) {
map.clearMap()
drawLayer()
} else {
destroyAll()
}
});
map.on('zoomend', () => {
let zoom0 = map.getZoom();
zoom.value.cur = zoom0;
//当zoom在12-17之间才会生成网格
if((zoom0 >= 12) && (zoom0 <= 17)) {
map.clearMap()
drawLayer()
} else {
destroyAll()
}
});
// 响应调整地图当前zoom值
watch(zoomOp, () => {
map.setZoom(zoomOp.value)
})
//新建一个鼠标绘制工具对象
map.plugin(["AMap.PolygonEditor"], function () {
mouseTool = new AMap.MouseTool(map);
});
//绑定事件draw
//可以拿取当前绘制的多边形数据
mouseTool.on('draw',function(e){
console.log(e.obj.getPath())
form.polygonPath = e.obj.getPath()
})
AMap.plugin("AMap.PlaceSearch", function () {
var PlaceSearchOptions = { //设置PlaceSearch属性
city: "天津", //城市
};
placeSearch = new AMap.PlaceSearch(PlaceSearchOptions);
});
})
.catch((e) => {
console.log(e);
});
});
onUnmounted(() => {
map?.destroy();
});
</script>
<template>
<div class="main">
<div class="left">
<div id="container"></div>
</div>
<div class="right">
<el-scrollbar height="100vh" style="margin-left: 10px">
<div style="display: flex;flex-direction: column;align-items: center;">
<div class="scroll-text" style="height: 200px">
<el-row>
<el-col :span="16">
<el-form-item label="zoom选择">
<el-select
v-model="zoomOp"
>
<el-option
v-for="item in zoom.option"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="当前zoom">
<el-input :value="zoom.cur" disabled />
</el-form-item>
</el-col>
</el-row>
<el-form :model="form">
<el-form-item label="多边形名称">
<el-input v-model="form.nameP" />
</el-form-item>
<el-form-item label="绘制">
<template #default>
<el-button @click="startDraw">
开始绘制
</el-button>
<el-button disabled>
双击结束绘制
</el-button>
</template>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button @click="cancel">Cancel</el-button>
</el-form-item>
</el-form>
</div>
<div class="scroll-text" style="height: 160px">
<el-table :data="polygonCache.table.data" style="width: 100%;height: 100%">
<el-table-column type="index" width="56" label="序号"/>
<el-table-column prop="nameP" label="已创建多边形名称" width="170"/>
<!-- <el-table-column prop="name" label="多边形内建筑" width="180"/>-->
<el-table-column fixed="right" label="操作" min-width="100">
<template #default="{row}">
<el-switch
v-model="row.flag"
@change="mountPoly(row)"
/>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination
layout="total, prev, pager, next"
:total="polygonCache.table.total"
v-model:page-size="pageControl.polygons.rows"
v-model:current-page="pageControl.polygons.page"
@current-change=""
/>
<div class="scroll-text">
<el-table :data="poiControl.table.data" style="width: 100%;height: 100%">
<el-table-column type="index" width="56" label="序号"/>
<el-table-column prop="name" label="教育机构" width="220"/>
</el-table>
</div>
<el-pagination
layout="total, prev, pager, next"
:total="poiControl.table.total"
:limit.sync="poisPageControl.rows"
v-model:current-page="poisPageControl.page"
@current-change="poiSearch()"
/>
</div>
</el-scrollbar>
</div>
</div>
</template>
<style scoped>
#container {
width: 100%;
height: 100%;
}
.main {
display: flex;
width: 100vw;
height: 100vh;
}
.left {
flex: 2;
}
.right {
flex: 1;
}
.scroll-text {
width: 400px;
height: 300px;
overflow: auto;
border: 1px solid #ccc;
padding: 10px;
margin-top: 18px;
}
</style>
\ No newline at end of file
vite.config.js 0 → 100644
View file @ 0d1608f9
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))
}
}
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment