大屏地图区域显示、复选框多选打点,自定义窗体信息(vue3+TS)

效果图:

NPM 安装 Loader:
npm i @amap/amap-jsapi-loader --save

并设置 key 和安全密钥:

import AMapLoader from '@amap/amap-jsapi-loader';//引入高德地图window._AMapSecurityConfig = {securityJsCode: "「你申请的安全密钥」",};AMapLoader.load({key: "替换为你申请的 key", //申请好的 Web 端开发 Key,首次调用 load 时必填version: "2.0", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15plugins: ["AMap.Scale"], //需要使用的的插件列表,如比例尺'AMap.Scale',支持添加多个如:['AMap.Scale','...','...']AMapUI: {//是否加载 AMapUI,缺省不加载version: "1.1", //AMapUI 版本plugins: ["overlay/SimpleMarker"], //需要加载的 AMapUI ui 插件},Loca: {//是否加载 Loca, 缺省不加载version: "2.0", //Loca 版本},}).then((AMap) => {var map = new AMap.Map("container"); //"container"为 <div> 容器的 idmap.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上}).catch((e) => {console.error(e); //加载错误提示});
完整代码:
<template><div id="map-chart"></div><a-checkbox-group v-model:value="value" @change="changeCheckbox"><a-checkbox value="loc">坐标打点</a-checkbox><a-checkbox value="text">文字打点</a-checkbox></a-checkbox-group>
</template><script lang="ts" setup>
import AMapLoader from '@amap/amap-jsapi-loader';//引入高德地图
import { onMounted, ref, onUnmounted } from 'vue';// 声明全局变量 _AMapSecurityConfig
declare global {interface Window {_AMapSecurityConfig: {securityJsCode: string;};}
}
// 高德地图安全码
window._AMapSecurityConfig = {securityJsCode: '2bd59df65eacf33784ed68fbaa369b45',
}
let map;const value = ref([]);
const locList = [[108.034657, 32.06777], [107.511763, 31.196079],
[107.931884, 31.354703]
];
const textList = [{name: '通川区',position: [107.504962, 31.214231],contant: '通川区人杰地灵'},{name: '大竹县',position: [107.20742, 30.736122],contant: '大竹县人杰地灵'},{name: '渠县',position: [106.970746, 30.836348],contant: '渠县人杰地灵'}
];
const countyList = [{ name: '通川区', position: [107.42, 31.15], scaleLevel: 10.5 },{ name: '达川区', position: [107.47763, 31.35], scaleLevel: 11 },{ name: '大竹县', position: [107.26742, 30.668], scaleLevel: 10.5 },{ name: '渠县', position: [106.970746, 30.96348], scaleLevel: 10.5 },{ name: '开江县', position: [107.868609, 31.012945], scaleLevel: 11 },{ name: '宣汉县', position: [107.931884, 31.544703], scaleLevel: 10 },{ name: '万源市', position: [108.034657, 32.00777], scaleLevel: 10 }
]
var triMarkers = new Array();
var textMarkers = new Array();
var countyMarkers = new Array();//存放县级行政区划名称标识
var infoWindow;//信息窗口
let addLocMark = () => { };
let addTextMark = () => { };
let delLocMark = () => { };
let delTextMark = () => { };
function changeCheckbox(e) {if (e.includes('loc')) {addLocMark();}if (e.includes('text')) {addTextMark();}if (!e.includes('loc')) {delLocMark();}if (!e.includes('text')) {delTextMark();}
}onMounted(async () => {// 加载高德地图AMapLoader.load({key: "c0be00cd6badf373c1f9fd9a8f0114af", // 申请好的Web端开发者Key,首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ['AMap.DistrictSearch'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等}).then((AMap) => {//加载成功map = new AMap.Map("map-chart", {  //设置地图容器idzoom: 8.9,           //初始化地图级别center: [107.56778, 31.309278], //初始化地图中心点位置});map.setMapStyle("amap://styles/darkblue");//设置地图样式//加载行政区划插件,用于绘制行政区划边界,区域面等功能AMap.plugin('AMap.DistrictSearch', function () {// 创建行政区查询对象var district = new AMap.DistrictSearch({// 返回行政区边界坐标等具体信息extensions: 'all',// 设置查询行政区级别为 市level: 'city'})// 调用 DrawSection 函数,参数为城市名、行政区划对象和是否搜索下一级标志DrawSection('达州市', district, true);// 绘制行政区划function DrawSection(cityName, district, isSearchNextLevel) {// 使用 district 对象的 search 方法查询指定的城市名district.search(cityName, function (status, result) {// 从查询结果中提取边界信息const bounds = result.districtList[0].boundaries;// 如果边界信息存在,则开始绘制if (bounds) {// 遍历所有边界for (let i = 0; i < bounds.length; i += 1) {if (isSearchNextLevel) {// 如果是搜索下一级(这里是市的级别),则绘制市的板块new AMap.Polygon({map, // 设置地图实例path: bounds[i], // 设置多边形路径strokeColor: '#1ee7e7', // 设置线条颜色fillColor: '#003c70', // 设置填充颜色fillOpacity: 0.5 // 设置填充透明度});} else {// 如果不是搜索下一级(这里是县的级别),则绘制县的边界线new AMap.Polyline({path: bounds[i], // 设置折线路径strokeColor: '#1ee7e7', // 设置线条颜色map // 设置地图实例});}}// 如果需要搜索下一级,并且有下一级行政区划信息if (isSearchNextLevel) {const districtList = result.districtList[0].districtList;// 遍历下一级行政区划列表for (let i = 0; i < districtList.length; i += 1) {// 递归调用 DrawSection,绘制下一级行政区划DrawSection(districtList[i].name, district, false);}}}});}// 隐藏其他地图添加遮罩层new AMap.DistrictSearch({extensions: 'all',subdistrict: 0}).search('达州市', function (status, result) {var outer = [// 外多边形坐标数组和内多边形坐标数组new AMap.LngLat(-360, 90, true),new AMap.LngLat(-360, -90, true),new AMap.LngLat(360, -90, true),new AMap.LngLat(360, 90, true)]var holes = result.districtList[0].boundariesvar pathArray = [outer]pathArray.push.apply(pathArray, holes)//将holes数组中的元素添加到pathArray数组中var polygon = new AMap.Polygon({pathL: pathArray,strokeColor: '#1ee7e7',//线颜色strokeWeight: 3,fillColor: '#05143e',//填充色fillOpacity: 0.8,})polygon.setPath(pathArray)map.add(polygon)})});//添加县级行政区划名称标识,可点击放大countyList.forEach((item) => {var countyMarker = new AMap.Marker({position: item.position,content: `<div style="color:#44f3fb;font-size:16px">${item.name}</div>`,offset: new AMap.Pixel(-20, -20)});map.add(countyMarker);countyMarkers.push(countyMarker);countyMarker.on('click', function (e) {map.setZoomAndCenter(item.scaleLevel, item.position);});});addLocMark = () => {locList.forEach((item) => {var marker = new AMap.Marker({position: item,});map.add(marker);triMarkers.push(marker);});};delLocMark = () => {map.remove(triMarkers);};addTextMark = () => {textList.forEach((item) => {var marker = new AMap.Marker({position: item.position,content: `<div class="text-mark">${item.name}</div>`,offset: new AMap.Pixel(-20, -20)});marker.on('click', function (e) {infoWindow = new AMap.InfoWindow({content: `<p style="color:#44f3fb;font-size:16px">标题:${item.name}</p><div class="text-info">${item.contant}</div>`,offset: new AMap.Pixel(0, -30)});infoWindow.open(map, e.target.getPosition());});map.add(marker);textMarkers.push(marker);});};delTextMark = () => {map.remove(textMarkers);infoWindow.close();};}).catch(e => {console.error(e);});
});onUnmounted(() => {map.destroy();
});
</script><style scoped lang="less">
#map-chart {width: 952px;height: 96%;
}.ant-checkbox-wrapper {margin: 0;color: aliceblue;font-size: 16px;
}.ant-checkbox-group {display: grid;gap: 10px;position: absolute;top: 150px;left: 520px;padding: 10px;background: rgba(33, 254, 254, 0.15);border-radius: 4%;
}
</style>
<style type="text/css">
.amap-logo {display: none;opacity: 0 !important;
}.amap-copyright {opacity: 0;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/420184.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu 22.04 安装增强功能失败

安装的时候&#xff0c;总是失败&#xff0c;然后根据提示查看 log 猜测可能需要安装g12 ubuntu22.04.2 目前(until 23.6.25) gcc 的默认版本是 11.3.0, 有些 c 的特性无法享用.Launchpad toolchain test buildsLanchpad toolchain build 将 Lanchpad 上的 PPA 加入到 apt 搜…

使用Selenium与WebDriver实现跨浏览器自动化数据抓取

背景/引言 在数据驱动的时代&#xff0c;网络爬虫成为了收集和分析海量数据的关键工具。为了应对不同浏览器环境下的兼容性问题&#xff0c;Selenium与WebDriver成为了开发者实现跨浏览器自动化数据抓取的首选工具。本文将深入探讨如何利用Selenium和WebDriver实现跨浏览器的数…

Redis主从数据同步过程:命令传播、部分重同步、复制偏移量等

请记住胡广一句话&#xff0c;所有的中间件所有的框架都是建立在基础之上&#xff0c;数据结构&#xff0c;计算机网络&#xff0c;计算机原理大伙一定得看透&#xff01;&#xff01;~ 1. Redis数据同步 1.1 数据同步过程 大家有没想过为什么Redis多机要进行数据同步&#…

视频监控管理平台LntonAIServer视频智能分析抖动检测算法应用场景

在视频监控系统中&#xff0c;视频画面的稳定性对于确保监控效果至关重要。抖动现象是指视频画面中存在不稳定或频繁晃动的情况&#xff0c;这可能会影响视频的清晰度和可读性。LntonAIServer通过引入抖动检测功能&#xff0c;帮助用户及时发现并解决视频流中的抖动问题&#x…

计算机网络练级第一级————认识网络

目录 网络搁哪&#xff1f; 网络的发展史&#xff08;了解&#xff09; 独立模式&#xff1a; 网络互联&#xff1a; 局域网时期&#xff1a; 广域网时期&#xff1a; 什么是协议 TCP/IP五层/四层模型 用官话来说&#xff1a; 我自己的话来说 第一层应用层&#xff1…

erlang学习: Mnesia Erlang数据库

创建Mnesia数据库 mnesia:create_schema([node()]).在shell里输入该行代码即可创建一个mnesia数据库于当前文件夹下 编译器文件路径下同样也有 数据库表定义创建 之后是数据库表定义&#xff0c;打开数据库创建完成后&#xff0c;启动数据库&#xff0c;添加一些表定义&…

多路转接之poll(接口介绍,struct pollfd介绍,实现原理,实现非阻塞网络通信代码)

目录 poll 引入 介绍 函数原型 fds struct pollfd 特点 nfds timeout 取值 返回值 原理 如何实现关注多个fd? 如何确定哪个fd上有事件就绪? 如何区分事件类型? 判断某事件是否就绪的方法 代码 示例 总结 为什么说它解决了fd上限问题? 缺点 poll 引入…

大模型RAG实战|构建知识库:文档和网页的加载、转换、索引与存储

我们要开发一个生产级的系统&#xff0c;还需要对LlamaIndex的各个组件和技术进行深度的理解、运用和调优。本系列将会聚焦在如何让系统实用上&#xff0c;包括&#xff1a;知识库的管理&#xff0c;检索和查询效果的提升&#xff0c;使用本地化部署的模型等主题。我将会讲解相…

故障诊断迁移学习项目DDC(保姆教程)

本项目从零开始搭建深度领域混淆&#xff08;Deep Domain Confusion&#xff0c;DDC&#xff09;算法。项目包括加载CWRU轴承原始信号&#xff0c;信号处理、数据集制作&#xff0c;模型搭建&#xff0c;DDC域混淆算法设计、特征可视化&#xff0c;混淆矩阵等流程来帮助读者学习…

超级帐本(Hyperledger)

1. Hyperledger 项目 Hyperledger 下有两类项目:第一类是区块链框架项目;第二类是支持这些区块链的相关工具或模块。 在 Hyperledger 框架下&#xff0c;目前有 5 个区块链框架项目&#xff1a;Fabric、Sawtooth Lake、Iroha、Burrow 和 Indy。 在模块类下&#xff0c;则有 Hyp…

Spring Boot 集成 Redisson 实现消息队列

包含组件内容 RedisQueue&#xff1a;消息队列监听标识RedisQueueInit&#xff1a;Redis队列监听器RedisQueueListener&#xff1a;Redis消息队列监听实现RedisQueueService&#xff1a;Redis消息队列服务工具 代码实现 RedisQueue import java.lang.annotation.ElementTyp…

原生 iOS 引入 Flutter 报错 kernel_blob.bin 找不到

情况 在一次原生 iOS 项目中引入 Flutter 的过程中&#xff0c;在模拟器中运行出现报错&#xff1a; 未能打开文件“kernel_blob.bin”&#xff0c;因为它不存在。 如下图&#xff1a; 模拟器中一片黑 原因&解决方案 这个是因为 Flutter 的打包 iOS framework 命令中…

OCR技术视角:智能文档管理中的票据自动化识别与处理

在数字化转型的浪潮中&#xff0c;企业对于高效、自动化的文档管理需求日益增长。票据作为企业运营中不可或缺的部分&#xff0c;其识别与管理的智能化成为了提升工作效率的关键。本文将深入探讨智能文档系统中票据识别功能的原理、技术优势以及在不同行业中的应用实践&#xf…

Java、python、php、node.js版 铁路售票自动选座系统 高铁购票系统 火车订票平台(源码、调试、LW、开题、PPT)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…

Mac无法安装软件怎么解决?mac安装软件提示无法验证开发者怎么办

在使用 macOS 系统时&#xff0c;你可能会遇到一个常见的问题&#xff1a;当你尝试安装或打开某些应用程序时&#xff0c;系统会弹出一个警告&#xff0c;提示“无法验证开发者”。出现这个提示导致自己无法去进行程序安装&#xff0c;接下来我们就来看看如何解决此问题的方法吧…

云计算实训43——部署k8s基础环境、配置内核模块、基本组件安装

一、前期系统环境准备 1、关闭防火墙与selinux [rootk8s-master ~]# systemctl stop firewalld[rootk8s-master ~]# systemctl disable firewalldRemoved symlink /etc/systemd/system/multi-user.target.wants/firewalld.service. Removed symlink /etc/systemd/system/dbus…

VuePress搭建个人博客(一键安装)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

【第26章】Spring Cloud之Sentinel适配API Gateway

文章目录 前言一、准备1. 引入库2. 注册过滤器3. 添加配置4. 效果展示 二、基于网关的流控1. 新增流控规则2. 测试准备3. 测试结果 总结 前言 Sentinel从1.6.0 版本开始&#xff0c;Sentinel 提供了 Spring Cloud Gateway 的适配模块&#xff0c;可以提供两种资源维度的限流&a…

Django + websocket 连不上

看了网上的几个简单例子&#xff0c;一步一步做&#xff0c;但无一成功。都连不上websocket。 后来按一个视频教程的操作步骤来做&#xff0c;成功了。差别在于视频教程中加了 pip install daphne 和setting.py中 连不上的表现&#xff1a; 前端报错&#xff1a; WebSock…

Linux网络协议栈的实现

网络协议栈是操作系统核心的一个重要组成部分&#xff0c;负责管理网络通信中的数据包处理。在 Linux 操作系统中&#xff0c;网络协议栈&#xff08;Network Stack&#xff09;负责实现 TCP/IP 协议簇&#xff0c;处理应用程序发起的网络请求并与底层的网络硬件进行交互。本文…