高德地图绘制区域的地理围栏

官网示例

https://lbs.amap.com/demo/javascript-api-v2/example/overlayers/polygon-draw/

在这里插入图片描述

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><style>html,body,#container {width: 100%;height: 100%;}</style><title>多边形的绘制和编辑</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><script src="https://a.amap.com/jsapi_demos/static/geojson/shanghai.js"></script><script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script><script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">var map = new AMap.Map("container", {center: [121.045332, 31.19884],zoom: 8.8});function addPolygon(data) {let polygon = new AMap.Polygon({path: data,fillColor: '#ccebc5',strokeOpacity: 1,fillOpacity: 0.5,strokeColor: '#2b8cbe',strokeWeight: 1,strokeStyle: 'dashed',strokeDasharray: [5, 5],});polygon.on('mouseover', () => {polygon.setOptions({fillOpacity: 0.7,fillColor: '#7bccc4'})})polygon.on('mouseout', () => {polygon.setOptions({fillOpacity: 0.5,fillColor: '#ccebc5'})})map.add(polygon);}addPolygon(shanghai);addPolygon(suzhou);addPolygon(wuxi);
</script>
</body>
</html>
import huzhouJsonData from '@/assets/huzhou_division'// 绘制湖州各个区县huzhouJsonData.features.forEach((item) => {this.addPolygon(item.geometry.coordinates[0])})// 绘制地理区域addPolygon(data) {let AMap = this.AMaplet polygon = new AMap.Polygon({path: data,fillColor: 'rgba(62, 173, 255, 0.15)',strokeOpacity: 1,fillOpacity: 0.15,strokeColor: 'rgba(62, 173, 255, 1)',strokeWeight: 1,strokeStyle: 'dashed',strokeDasharray: [5, 5],});polygon.on('mouseover', () => {polygon.setOptions({fillOpacity: 0.15,fillColor: 'rgba(62, 173, 255, 0.15)',})})polygon.on('mouseout', () => {polygon.setOptions({fillOpacity: 0.15,fillColor: 'rgba(62, 173, 255, 0.15)',})})this.map.add(polygon);},

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

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

相关文章

黑马点评06分布式锁 2Redisson

实战篇-17.分布式锁-Redisson功能介绍_哔哩哔哩_bilibili 1.还存在的问题 直接实现很麻烦&#xff0c;借鉴已有的框架。 2.Redisson用法 3.Redisson可重入原理 在获取锁的时候&#xff0c;看看申请的线程和拿锁的线程是否一致&#xff0c;然后计算该线程获取锁的次数。一个方法…

爬虫chrome浏览器抓包说明

chrome浏览器抓包说明 目标&#xff1a;掌握chrome在爬虫中的使用 1. 新建隐身窗口&#xff08;无痕窗口&#xff09; 作用&#xff1a;在打开无痕窗口的时候&#xff0c;第一次请求某个网站是没有携带cookie的&#xff0c;和代码请求一个网站一样&#xff0c;这样就能够尽可…

HashSet集合

目录 1、HashSet集合简介 2、什么情况下使用HashSet集合比使用ArrayList集合更好&#xff1f; 3、如果需要对集合进行频繁的插入和删除操作&#xff0c;应该使用什么集合&#xff1f; 4、遍历集合相关问题 5、遍历集合时的 null 元素处理问题 6、遍历集合时判断某个元素是…

JJJ:python学习笔记2

文章目录 双分支结构 p28多分支结构 p29嵌套if的使用 p30 多个条件的连接 p31Python3.11新特性-模式匹配 p32遍历循环for p33语法结构1&#xff1a;for语法结构2&#xff1a;for...else... 无限循环while p34while结构while...else...结构使用while循环模拟用户登录 p35嵌套循环…

堆与二叉树(上)

本篇主要讲的是一些概念&#xff0c;推论和堆的实现&#xff08;核心在堆的实现这一块&#xff09; 涉及到的一些结论&#xff0c;证明放到最后&#xff0c;可以选择跳过&#xff0c;知识点过多&#xff0c;当复习一用差不多&#xff0c;如果是刚学这一块的&#xff0c;建议打…

爬虫练习-获取imooc课程目录

代码&#xff1a; from bs4 import BeautifulSoup import requests headers{ User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0, }id371 #课程id htmlrequests.get(https://coding.imooc.com/class/chapter/id.html#Anchor,head…

办公桌行业分析:预计2026年中国市场规模将增长到1183亿元

办公桌&#xff0c;是指日常生活工作和社会活动中为工作方便而配备的桌子。办公桌的主要消费人群分为两大类&#xff1a;一是企业的购买;二是政府的采购。但是政府采购所占比重还不够大&#xff0c;在某些环节还不够规范。 良好的办公桌除了应该考虑放置信息产品的空间外&#…

vue中如何刷新子组件,重新加载子组件

三种方法&#xff1a;1.使用 Props 传递数据 2.使用$refs引用子组件 3.给子组件添加key值 1. 使用 Props 传递数据&#xff1a; 在父组件中通过修改 props 的值&#xff0c;传递新的数据给子组件&#xff0c;从而触发子组件的更新。在父组件中&#xff1a; <template>&…

Pandas 中级教程——数据清理与处理

Python Pandas 中级教程&#xff1a;数据清理与处理 Pandas 是一个强大的数据分析库&#xff0c;它提供了广泛的功能来处理、清理和分析数据。在实际数据分析项目中&#xff0c;数据清理是至关重要的一步。在这篇博客中&#xff0c;我们将深入介绍 Pandas 中的一些中级数据清理…

实验三 MapReduce编程

实验目的&#xff1a; 1.掌握MapReduce的基本编程流程&#xff1b; 2.掌握MapReduce序列化的使用&#xff1b; 实验内容&#xff1a; 一、在本地创建名为MapReduceTest的Maven工程&#xff0c;在pom.xml中引入相关依赖包&#xff0c;配置log4j.properties文件&#xff0c;搭…

软信天成:产品信息管理(PIM)对零售行业有何意义?

产品信息管理&#xff08;PIM&#xff09;&#xff0c;通过快速收集、管理和共享横跨整个企业、合作伙伴和供应商的产品信息&#xff0c;整合分散在不同系统或部门的数据信息&#xff0c;创建实时、可信的产品数据源&#xff0c;及时获取整个企业详细、准确和一致的产品信息&am…

前端做表格导出

下面来介绍一下方法 在vue页面里写调用方法 //表头数据格式 column: [{ key: Photo, width: 70, height: 50, colWidth: 100, title: 图片, type: image },{ key: Name, colWidth: , title: 名称, type: text },{ key: Phone, colWidth: , title: 手机号, type: text },{key:…

使用Log4j与log4j2配置mybatisplus打印sql日志

环境&#xff1a;项目非完全spring项目&#xff0c;没有spring的配置文件。执行sql时老是不打印sql语句。因此进行修改&#xff0c;过程比较坎坷&#xff0c;记录一下。 我尝试使用log4j和log4j2进行配置 最终把这两种全部配置记录上 Log4j配置 如果项目用的是log4j需要进行配置…

【✅如何针对大Excel做文件读取?】

✅如何针对大Excel做文件读取&#xff1f; &#x1f7e9;如何针对大Excel做文件读取&#x1f7e9;XSSFWorkbook文件读取&#x1f7e9;EasyExcel文件读取 ✅扩展知识&#x1f7e9; EasyExcel简介&#x1f7e9;EasyExcel 为什么内存占用小&#xff1f; &#x1f7e9;如何针对大Ex…

搜维尔科技:台湾东森新闻来京专访,我司展示Xsesn动作捕捉技术

搜维尔科技&#xff1a;台湾东森新闻来京专访&#xff0c;我司展示Xsesn动作捕捉技术 搜维尔科技&#xff1a;电视台采访科技公司&#xff0c;我司展示xsens动作捕捉技术&#xff01;

欧盟健身单车出口BS EN ISO 20957安全报告测试

固定的训练器材.第10部分:带固定轮或无自由飞轮的训练自行车.附加特定安全要求和试验方法 作为欧洲固定式健身器材&#xff08;儿童用固定式健身器材不在此范围&#xff09;通用安全要求和测试方法的标准&#xff0c;涉及固定式健身器材精度、使用场所分类定义、稳定性、安全间…

Amazon CodeWhisperer 体验

文章作者&#xff1a;jiangbei 1. CodeWhisperer 安装 1.1 先安装 IDEA&#xff0c;如下图&#xff0c;IDEA2022 安装为例&#xff1a; 亚马逊云科技开发者社区为开发者们提供全球的开发技术资源。这里有技术文档、开发案例、技术专栏、培训视频、活动与竞赛等。帮助中国开发者…

我的创作纪念日-IT从业者张某某

机缘 勿忘初心&#xff0c;牢记使命&#xff0c;我成为创作者的初心是什么呢&#xff1f;时间有些久了&#xff0c;回头看下自己的第一篇博客&#xff0c;还是略显青涩的&#xff0c;有种不忍直视的感觉。 我的第一篇博客&#xff0c;应该是想记录下工作中的一个演示项目&…

[Bond的杂货铺] CERTIFIED KUBERNETES ADMINISTRATOR 到货咯

Its been a long time. Mr. K8s. 既然接触了这么多年&#xff0c;2018年在1.11版就认识了&#xff0c;如今都到了1.28&#xff0c;拖到连与docker都分手了。所以&#xff0c;考一个&#xff0c;很合理吧。 分数是88&#xff0c;隐约感觉是因为有几处因为实在不想把光标移来移…

挑战内网安全难题,迅软DSE如何以管控之力助您一臂之力?

随着信息化程度的提高&#xff0c;政企单位面临更加复杂和不可控的内网安全问题。由于缺乏有效技术手段和完善的管理机制&#xff0c;企业内网管理长期处于被动状态&#xff0c;而在发生数据安全事件后的快速处置能力也相对薄弱。 迅软DSE桌面管理系统成为解决方案&#xff0c…