当前位置: 首页 > news >正文

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.lryc.cn/news/261270.html

相关文章:

  • flutter ‘Gradle Libs‘ was added by build file ‘app/build.gradle‘
  • Java中的链式编程风格与应用案例
  • MTK Android P Sensor架构(一)
  • 低代码开发与传统软件开发:未来趋势与竞争格局
  • leetcode 股票问题全序列
  • SpringBoot中日志的使用log4j2
  • 机械设备企业网站建设的效果如何
  • 设计模式之结构型设计模式(二):工厂模式 抽象工厂模式 建造者模式
  • 算法模板之单链表图文讲解
  • 【强化学习-读书笔记】表格型问题的 Model-Free 方法
  • 【手撕算法系列】k-means
  • D33|动态规划!启程!
  • C语言----文件操作(二)
  • oracle 10046事件跟踪
  • 微软自带浏览器Edge,无法关闭“保存历史记录网站的屏幕截图”解决方案
  • 讲座 | 颠覆传统摄像方式乃至计算机视觉的“脉冲视觉”
  • uniGUI学习之UniHTMLMemo1富文本编辑器
  • 详细教程 - 从零开发 鸿蒙harmonyOS应用 第四节 (鸿蒙Stage模型 登录页面 ArkTS版 推荐使用)
  • uniapp怎么实现授权登录
  • 从零开始:前端架构师的基础建设和架构设计之路
  • 椋鸟C语言笔记#26:数据在内存中的存储(大小端字节序)、浮点数的存储(IEEE754)
  • 设计模式——组合模式(结构型)
  • 鸿蒙小车之多任务调度实验
  • 【报错栏】(vue)Module not found: Error: Can‘t resolve ‘element-ui‘ in xxx
  • seaborn库图形进行数据分析(基于tips数据集)
  • AC843. n皇后问题--60
  • Js WebSocket类,收发Json,带心跳,断线重连
  • VBA技术资料MF96:单字段多条件高级筛选
  • 电子取证中Chrome各版本解密Cookies、LoginData账号密码、历史记录
  • Axure元件基本介绍进阶