vue3+高德地图@vuemap/vue-amap矢量图形+ant-design-vue_vue3 用高德地图绘制矢量图形-程序员宅基地

1，安装vuemap/vue-amap和ant-design-vue

2,引入lazyAMapApiLoaderInstance和样式

import '@vuemap/vue-amap/dist/style.css'
import {message} from 'ant-design-vue'
import { lazyAMapApiLoaderInstance } from '@vuemap/vue-amap';

3，调用lazyAMapApiLoaderInstance即可

 lazyAMapApiLoaderInstance.then(() => {
    global.map = new AMap.Map('Amap', {//该处global只是配置的全局变量，'Amap'是地图挂载div的id
    center: new AMap.LngLat(116.3939666748047,39.91763621372857),//中心点
    zoom:13,//地图缩放级别
    viewMode:'3D',//3D地图
  });
  global.map.on('click',mapClick)//给地图绑定点击事件
  //构造点标记
  var marker = new AMap.Marker({
    position: new AMap.LngLat(116.3939666748047,39.91763621372857),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});
// 构造矢量圆形
var circle = new AMap.Circle({
    center: new AMap.LngLat(116.3939666748047,39.91763621372857), // 圆心位置
    radius: '3000',  //半径
    strokeColor: "#F33",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 3,  //线粗细度
    fillColor: "#ee2200",  //填充颜色
    fillOpacity: 0 //填充透明度
});
global.map.add(marker);//将点挂载到地图上
global.map.add(circle);//将圆挂载到地图上
circle.on('click',cirClick)//给圆绑定点击事件
});

初始化后页面展示

点

本文链接：https://blog.csdn.net/wjngx/article/details/126222300

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

前端表格合并单元格技巧_前端table单元格合并-程序员宅基地

文章浏览阅读1.3k次。前端表格合并单元格技巧_前端table单元格合并

python find() 和 index() 方法_python find index-程序员宅基地

文章浏览阅读3.8w次，点赞12次，收藏48次。1 find() 方法字符串方法str.find(str, beg=0, end=len(string))检测字符串中是否包含子字符串 str ，如果指定 beg（开始）和 end（结束）范围，则检查是否包含在指定范围内，如果指定范围内如果包含指定索引值，返回的是索引值在字符串中的起始位置。如果不包含索引值，返回-1。a = 'Hello,World'print(a.fi..._python find index

跟Android初学者分享几点经验：该如何自学Android开发？-程序员宅基地

文章浏览阅读656次，点赞22次，收藏26次。很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从哪里入手去学习，对此我整理了一些资料如果你熟练掌握以下列出的知识点，相信将会大大增加你通过前两轮技术面试的几率！这些内容都供大家参考，互相学习。①「Android面试真题解析大全」PDF完整高清版+②「Android面试知识体系」学习思维导图压缩包一个人可以走的很快，但一群人才能走的更远。

Seaborn：一个样式更好看的Python数据可视化库_seaborn库-程序员宅基地

文章浏览阅读1.6k次，点赞48次，收藏23次。Seaborn 是一个基于 Matplotlib 的 Python 数据可视化库，它提供了更高级别的界面和更优雅的默认样式，使得用户能够更轻松地创建各种各样的统计图形。Seaborn 的全名是 “Statistical Data Visualization”，它的目标是使数据可视化更加简单、直观和有效。高度易用：Seaborn 提供了一组高级 API，使得用户可以轻松地创建各种统计图形，而无需关心底层的实现细节。美观的默认样式：Seaborn 提供了一套美观的默认样式，使得生成的图形更具视觉吸引力。_seaborn库

前端代码复用学习笔记:整洁架构与清晰架构_后端复用前端代码-程序员宅基地

文章浏览阅读1.3k次。UI 设计师的最终产出由少部分视觉要素约定 +设计师个人主观设计倾向决定，也就是说，设计师的心情好坏和人员更替会直接影响每次产出设计稿的呈现，这对设计师来说很正常，但对前端工程师来说是致命的基于此，我们需要在工具上。_后端复用前端代码

grib中数据读取并导出到文本文件中_grib格式转换成txt-程序员宅基地

文章浏览阅读1.1w次。最近忙着赶项目加上家里的事比较多，就没有来得及更新博客，今天主要讲解一下grib数据的查看方法和读取方法。grib数据没有找到好的可视化工具打开它，官网提供的一个可视化工具叫Metview，此工具的安装过程相当的复杂，搞了将近3个小时最后还是没有安装成功，由于项目比较紧就果断的先放弃啦。这种方法不行，还可以使用ecCodes提供的自带命令行方式把grib数据中的一条一条的消息导出到一个.txt文件..._grib格式转换成txt

随便推点

计算机导论各章节总结,计算机导论第十三周课后总结(示例代码)-程序员宅基地

文章浏览阅读199次。一．计算机网络定义：将地理位置不同的具有独立功能的多台计算机及其外部设备，通过通信线路连接起来，实现资源共享和信息传递的计算机系统。网络分类：(1) 按网络的地理覆盖范围可分为局域网，城域网和广域网。(2)按照网络传输媒体划分可分为有线网和无线网3.计算机网络的硬件组成(1) 网络传输媒体：双绞线、同轴电缆，光纤及无线通信等。局部使用双绞线、同轴电缆，网速要求比较高的haul，使用光纤，..._计算机导论速成课笔记

Python replace()函数使用详解：字符串的艺术转换-程序员宅基地

文章浏览阅读745次，点赞31次，收藏13次。在本文中，我们将深入探讨Python中replace()函数的用法，探讨如何在字符串操作中灵活运用这一功能，使得字符串转换变得轻而易举。对于想要在Python中进行字符串替换的开发者来说，这将是一个极具价值的指南。替换方法优点缺点基本替换简单易懂，适用于一般场景无法限定替换次数限定替换次数可以精确控制替换的次数，灵活应用对于大规模替换可能略显繁琐链式替换代码简洁，逻辑清晰多次替换可能会降低代码的可读性通过本文的学习，我们深入了解了Python中replace()

PAT 甲级 1001（A+B Format）-程序员宅基地

文章浏览阅读81次。PAT 甲级 1001题目要求翻译代码思路题目要求Calculate a+b and output the sum in standard format – that is, the digits must be separated into groups of three by commas (unless there are less than four digits).Input Sp...

决策树后剪枝算法（一）代价复杂度剪枝CPP-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏36次。剪枝，是一个“用准确性换取简单性”的思想。它允许决策树对训练集过拟合，再通过删除对泛化精度无贡献的子分支，从而修剪出一颗较小的树。_代价复杂度剪枝

268道Go语言面试真题及详解+100例代码实例+DDD实践-程序员宅基地

文章浏览阅读1.2k次。Go最近动静挺大的，刚刚发布的1.18包含以下几大特性：1、泛型2、模糊测试（Fuzzing）3、工作空间（Workspaces）4、20% 性能提升：Apple M1、ARM64 和 PowerPC64 用户开心了！由于 Go 1.17 的寄存器 ABI 调用约定扩展到这些架构，Go 1.18 包括高达 20% 的 CPU 性能改进。没错，过往Go被诟病最多的泛型，现在..._go语言面试题

软考中级软件设计师资料（考点分析+复习笔记+历年真题+电子版课本）_软件设计师中级资料-程序员宅基地

文章浏览阅读3.8w次，点赞755次，收藏1.2k次。软件设计师是软考中级职称，相比高级的难度而言，中级难度较低，每个人花些时间都能顺利通过的，考试分为上午的选择题和下午的综合题，这里跟大家分享一些自己备考时使用的资料和经验一、先对自己进行评估：因为每个人的知识点掌握情况和学校教学内容的不一致，这里以我个人情况进行说明，大家做个参考就行：大家先了解一下软件设计师的考纲：有些同学刚看到考纲会有一些迷茫，感觉很多东西都没学过，没关系，没关系，没学过的也没关系！大家要明白一点，软件设计师考察的内容广度比较高，也就是内容多、杂，但是深度很浅！，也就是没学过_软件设计师中级资料