vue-实现高德地图-省级行政区地块显示+悬浮显示+标签显示

在这里插入图片描述

<template><div><div id="container" /><div @click="showFn">显示</div><div @click="removeFn">移除</div></div>
</template><script>
import AMapLoader from '@amap/amap-jsapi-loader'
import chinaData from './provincialData/中华人民共和国.json'
export default {data() {return {map: null,infoWindow: null,markers: [],provincPolygonList: []}},async mounted() {await this.initMap()// 初始完地图后,开始绘制await this.setUpPlotsFn(chinaData)},methods: {/** 1. 初始化地图 **/initMap() {return new Promise((resolve) => {window._AMapSecurityConfig = {securityJsCode: '你的安全密钥' // 自2021年12月02日升级后, key与安全密钥必须一起使用, 否则可能会出现一些API无法使用,如 DistrictSearch}AMapLoader.load({key: '697eb023cbaadfdf68211c7b18165ed7', // 首次调用 load 时必填version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ['AMap.DistrictSearch', // 配置行政区查询服务'AMap.GeoJSON' // 配置行政区查询服务] // 需要使用的的插件列表,如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map('container', {center: [116.30946, 39.937629],zoom: 3})this.map.on('complete', () => {resolve()})}).catch((e) => {console.log(e)})})},// 设置地块setUpPlotsFn(featuresObj) {const { features } = featuresObjfeatures.forEach((item) => {this.addGeoJsonFn(item)})this.map.add(this.provincPolygonList)this.map.add(this.markers)// 地图自适应this.map.setFitView()},// GeoJson数据进行解析addGeoJsonFn(feature) {const geoJSON = {type: 'FeatureCollection',features: [feature]}this.map.plugin('AMap.Geocoder', () => {const polygon = new window.AMap.GeoJSON({geoJSON: geoJSON,getPolygon: function(geojson, lnglats) {// 将解析出来的面 进行绘制return new window.AMap.Polygon({path: lnglats,fillOpacity: 0.4,fillColor: '#80d8ff',strokeColor: '#08B2BD',strokeWeight: 1,map: this.map})}})const { name, centroid } = feature.propertiesconsole.log('🚀 ~ file: MapConnentNewLast.vue:89 ~ this.map.plugin ~  feature.properties:', feature.properties)polygon.on('mouseover', (e) => {// 鼠标移入更改样式polygon.setOptions({fillOpacity: 0.7,fillColor: '#08B2BD'})const info = []info.push(`<div style="font-size: 12px; background-color: #fff;padding: 10px; border-radius: 10px;"><div style="font-weight: 700;">${name}</div>`)info.push('<div style="display: flex; justify-content: space-between;align-items: center;padding: 4px 0;"><span style="color:#666;padding-right: 10px;">聚合资源总量</span> <span style="font-weight: 700;">100MW</span></div>')info.push('<div style="display: flex; justify-content: space-between;align-items: center;padding: 4px 0;"><span style="color:#666;">充电站</span> <span style="font-weight: 700;">100座</span></div>')info.push('<div style="display: flex;justify-content: space-between;align-items: center;padding: 4px 0;"><span style="color:#666;">换电站</span> <span style="font-weight: 700;">100座</span></div>')info.push('<div style="display: flex;justify-content: space-between;align-items: center;padding: 4px 0;"><span style="color:#666;">光伏</span> <span style="font-weight: 700;">100MW</span></div>')info.push('<div style="display: flex; justify-content: space-between;align-items: center;padding: 4px 0;"><span style="color:#666;">储能</span> <span style="font-weight: 700;">100MWH</span></div></div>')this.infoWindow = new window.AMap.InfoWindow({isCustom: true, // 使用自定义窗体content: info.join(''),offset: new window.AMap.Pixel(0, -30)})// 获取点击的位置信息const lnglat = e.lnglat// 在点击的位置上显示信息窗体this.infoWindow.open(this.map, lnglat)})polygon.on('mouseout', () => {// 鼠标移出恢复样式this.infoWindow.close()polygon.setOptions({fillOpacity: 0.5,fillColor: '#80d8ff'})})this.provincPolygonList.push(polygon)const center = this.$turf.centroid(geoJSON).geometry.coordinatesconsole.log('🚀 ~ file: MapConnentNewLast.vue:138 ~ this.map.plugin ~ center:', center)if (name) {this.addMarkerList(centroid || center, name)}})},addMarkerList(center, item) {const markersContent = []markersContent.push(`<div style="display: flex;align-items: center;font-size: 10px;border-radius: 4px;">`)markersContent.push(`<span style="color:#666;background-color: #fff;min-width: 40px;height: 20px;display: flex;align-items: center;justify-content:center">${item}</span>`)markersContent.push(`<span style="color:#fff;background-color: #3AD6C4;min-width: 40px;height: 20px;display: flex;align-items: center;justify-content:center">3213</span>`)markersContent.push(`</div>`)const marker = new window.AMap.Marker({position: center, // 标注点位置content: markersContent.join(''),map: this.map // 将标注点添加到地图上})this.markers.push(marker)},// 隐藏removeFn() {if (this.markers) {this.markers.forEach((item) => item.hide())this.provincPolygonList.forEach((item) => item.hide(item))}},// 隐藏showFn() {if (this.markers) {this.markers.forEach((item) => item.show())this.provincPolygonList.forEach((item) => item.show(item))}}}
}
</script><style scoped lang="scss">
#container {width: 100%;height: 53vh;
}.infoWindow {display: flex;flex-direction: column;font-size: 10px;.title {color: #000;}.info_item {display: flex;justify-content: space-between;align-items: center;&:first-child {span {color: #444;}}}
}.amap-info-content {border-radius: 10px;
}</style>

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

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

相关文章

Spring Boot业务代码中使用@Transactional事务失效总结

1、概述 我们知道 Spring 声明式事务功能提供了极其方便的事务配置方式&#xff0c;配合 Spring Boot 的自动配置&#xff0c;大多数 Spring Boot 项目只需要在方法上标记 Transactional注解&#xff0c;即可一键开启方法的事务性配置。当然后端开发人员对数据库事务这个概念并…

模型评估指标

1.回归模型 回归模型常常使用MSE均方误差&#xff0c;预测值与真实值之间的平均差距 2.分类模型 2.1 Accuracy正确率 分类正确的数目的占比 但在类别不平衡的情况下&#xff0c;模型可能倾向于预测占多数的类别&#xff0c;导致Acc高但对少数类别的预测效果其实比较差的。…

Vue脚手架 Vue CLI安装

目录 0.为什么要安装Vue CLI脚手架 1.配置方法 1.全局安装 (一次) 2.查看Vue版本&#xff08;一次&#xff09; 报错&#xff1a;出现禁止运行脚本 3.创建项目架子&#xff08;可多次&#xff09; 报错npm err! 问题&#xff1a;已知npm换过国内源&#xff0c;且进度条…

go-zero目录结构和说明

. ├── code-of-conduct.md 行为准则 ├── CONTRIBUTING.md 贡献指南 ├── core 框架的核心组件 │ ├── bloom 布隆过滤器&#xff0c;用于检测一个元素是否在一个集合中 │ ├── breaker 熔断器&am…

MicroPython相关教程

WebRepl MicroPython-ESP32之WebRepl-1Z实验室 - 简书 https://www.jianshu.com/p/c2ddd4fd05be ESP32上面webrepl的开启与连接 - 简书 https://www.jianshu.com/p/f4163eae4a05 Esp32安装micropython和配置webrepl记录备忘 - 哔哩哔哩 https://www.bilibili.com/read/cv121…

工资计算_分支结构 C语言xdoj63

问题描述 小明的公司每个月给小明发工资&#xff0c;而小明拿到的工资为交完个人所得税之后的工资。假设他一个月的税前工资为S元&#xff0c;则他应交的个人所得税按如下公式计算&#xff1a; 1&#xff09; 个人所得税起征点为3500元&#xff0c;若S不超过3500&#xff0c;则…

数据挖掘目标(客户价值分析)

import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as snsIn [2]: datapd.read_csv(r../教师文件/air_data.csv)In [3]: data.head()Out[3]: Start_timeEnd_timeFareCityAgeFlight_countAvg_discountFlight_mileage02011/08/182014/0…

android 13.0 app应用安装黑名单

1.概述 在13.0系统rom定制化开发中,客户需求要实现应用安装黑名单功能,在白名单之中的应用可以安装,其他的app不准安装,实现一个 控制app安装的功能,这需要从app安装流程入手就可以实现功能 PMS就是负责管理app安装的,功能就添加在这里就可以了,接下来看具体实现这个功能…

uniapp播放 m3u8格式视频 兼容pc和移动端

支持全自动播放、设置参数 自己摸索出来的,花了一天时间,给点订阅支持下,订阅后,不懂的地方可以私聊我。 代码实现 代码实现 1.安装dplayer组件 npm i dplayer2. static/index.html下引入 hls 引入hls.min.js 可以存放在static项目hls下面<script src="/static…

PyGame图形绘制函数详解

文章目录 五种图形矩形圆形 五种图形 除了直线之外&#xff0c;pygame中提供了多种图形绘制函数&#xff0c;除了必要的绘图窗口、颜色以及放在最后的线条宽度之外&#xff0c;它们的参数如下表所示 函数图形参数/类型rect矩形Rectellipse椭圆Rectarc椭圆弧Rect, st, edcircl…

Pytorch当中的.detach()操作是什么意思

.detach() 是 PyTorch 中用于从计算图中分离张量的方法。当我们在PyTorch中进行张量运算时&#xff0c;操作会构建一个计算图来跟踪计算历史&#xff0c;这个计算图用于自动求导和反向传播来计算梯度。 使用.detach()方法可以将一个张量从当前的计算图中分离出来&#xff0c;使…

如何实现填表后分配序列号、活动抢票抽奖、自助分配座位号?

&#x1f4f1;发布者想要实现让用户在填表后自动分配序列号、座位号&#xff0c;或制作活动抢票抽奖系统&#xff0c;该如何实现&#xff1f; &#x1f4cc;使用教程 &#x1f4d6;案例1&#xff1a;制作活动抽奖系统 使用预置数据分配的随机分配功能&#xff0c;以活动抽奖为例…

《C++新经典设计模式》之第9章 命令模式

《C新经典设计模式》之第9章 命令模式 命令模式.cpp 命令模式.cpp #include <iostream> #include <list> #include <memory> using namespace std;// 5种角色 // Receiver&#xff08;接收者&#xff09;&#xff0c;Cook&#xff0c;提供请求业务的处理接口…

标书整体实施方案

一、标书整体实施方案概述 标书整体实施方案是一种全面、系统的方法&#xff0c;旨在确保标书的顺利完成和成功实施。它涵盖了从项目背景到招标文件分析&#xff0c;再到投标文件编制和投标的全过程。实施方案不仅提供了明确的工作流程和分工&#xff0c;还为整个标书制作团队…

针对网页html中插入动图gif不能循环播放只播放一次的解决方案

针对网页html中插入动图gif不能循环播放只播放一次的解决方案 原因分析解决方案 原因分析 使用图片编辑软件制作的过程中未启用“循环播放”功能&#xff0c;这里以Photoshop为例&#xff0c;演示设置GIF图片循环播放的操作流程&#xff1a;所需材料&#xff1a;PS。第一步&am…

MongoDB——模糊查询的两种方法

方法一&#xff1a;类似于结构性数据库的like db.users.find({fname: /zhangsan/}); 对应mysql的like用法&#xff1a;select * from users where fname like %zhangsan%; &#xff08;1&#xff09;如果要模糊查询以什么开头&#xff0c;方法如下&#xff1a; db.users.fi…

图灵日记之Leetcode删除有序数组中的重复项合并两个有序数组移除链表元素

题目 删除有序数组中的重复项题目入口题目内容思路代码c版本c嘎嘎版本 合并两个有序数组题目链接题目内容思路代码c版本(c嘎嘎版本与c版本内容一样) 移除链表元素题目链接题目内容思路1代码1思路2代码2思路3代码3 删除有序数组中的重复项 题目入口 题目内容 给你一个 非严格…

抖音ip地址切换什么原因

在如今的互联网世界中&#xff0c;抖音已经成为了一个非常受欢迎的应用程序&#xff0c;让人们可以通过短视频来分享生活点滴。然而&#xff0c;有时候我们可能会遇到一些问题&#xff0c;比如在使用抖音时需要进行IP地址切换。那么&#xff0c;为什么要切换IP地址呢&#xff1…

拼多多买家页面批量导出订单excel

拼多多买家页面批量导出订单excel 由于拼多多不支持订单导出excel清算起来很麻烦&#xff0c;就自己写了一个页面批量导出脚本代码。 首先打开拼多多手机端网站&#xff1a;https://mobile.pinduoduo.com/ 登录后点击我的订单打开f12审查元素 在控制台引入jquery&#xff0c;引…

IIC需要外部上拉电阻

由于I2C接口采用Open Drain机制&#xff0c;器件本身只能输出低电平&#xff0c;无法主动输出高电平&#xff0c;只能通过外部上拉电阻RP将信号线拉至高电平。 因此I2C总线上的上拉电阻是必须的&#xff01; 所以开发板上面的IIC如果没有外接上拉电阻&#xff0c;是无法使用该I…