【高德地图】根据经纬度多边形的绘制(可绘制区域以及任意图形)

news2024/11/28 16:34:52

在这里插入图片描述

官方示例

https://lbs.amap.com/demo/jsapi-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>
    function addPolygon(data) {
            let polygon = new AMap.Polygon({
              path: data,
              // 内部填充样式
              fillColor: '#0B5783',
              strokeOpacity: 1,
              fillOpacity: 0.5,
              // 线
              strokeColor: '#69B9DF',
              strokeWeight: 3,
              strokeStyle: 'solid',
              strokeDasharray: [5, 5],
            });
            window.map.add(polygon);
          }
     addPolygon(polyList);
     // polyList需要绘制的经纬度集合坐标

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

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

相关文章

数据结构-图-最短路径算法(迪杰斯特拉算法,弗洛伊德算法)

dijkstra算法 视频推荐链接 弗洛伊德算法 视频链接推荐

『SpringBoot 源码分析』run() 方法执行流程:(4)刷新应用上下文-处理 @Import 注解

『SpringBoot 源码分析』run() 方法执行流程&#xff1a;&#xff08;4&#xff09;刷新应用上下文-处理 Import 注解 基于 2.2.9.RELEASE问题&#xff1a;当方法进行了注释标记之后&#xff0c;springboot 又是怎么注入到容器中并创建类呢&#xff1f; 首先创建测试主程序 …

1.5 空间中的平面与直线

空间中的平面和直线 知识点1 平面方程 1.平面的法向量与法式 定义1 若向量n 垂直与平面N&#xff0c;则称向量n为平面N的法向量。 设一平面通过一直点 M 0 ( x 0 , y 0 , z 0 ) M_0(x_0,y_0,z_0) M0​(x0​,y0​,z0​)求垂直于非零向量 n ⃗ \vec{n} n (A,B,C),求改平面N的…

geohash学习

geohash编解码 import ("github.com/mmcloughlin/geohash" )func Test_Demo(t *testing.T) {// 编码经纬度到 geohash 字符串lat, lon : 40.7128, -74.0060 // 纽约市的位置geoHash : geohash.Encode(lat, lon) // geohash 字符串fmt.Println(geoHash) …

浅谈Http协议、TCP协议(转载)

TCP标志位,有6种标示&#xff1a;SYN(synchronous建立联机) &#xff0c;ACK(acknowledgement 确认) &#xff0c;PSH(push传送)&#xff0c;FIN(finish结束) &#xff0c;RST(reset重置)&#xff0c; URG(urgent紧急) Sequence number(顺序号码) &#xff0c;Acknowledge num…

202330读书笔记|《中国百年文学经典桥梁书(全8册)》——故乡,匆匆,春,背影,白鹅,百草园

202330读书笔记|《中国百年文学经典桥梁书&#xff08;全8册&#xff09;》——故乡&#xff0c;匆匆&#xff0c;春&#xff0c;背影&#xff0c;白鹅&#xff0c;百草园 《中国百年文学经典桥梁书&#xff08;全8册&#xff09;》作者朱自清&#xff0c;鲁迅等。很多都是小学…

文生图模型进化简史和生成能力比较——艺术肖像篇

很久没有更新文章&#xff0c;最近真的太忙啦&#xff0c;在T2I领域&#xff0c;学习速度真的赶不上进化速度&#xff01;每天都有无数新模型、新插件、新玩法涌现。玩得太上瘾啦。 上月初我去参加我硕士专业的夏季烧烤大趴&#xff0c;跟我的论文导师重逢&#xff08;好多年没…

Java 中如何实现序列化?

什么是序列化&#xff1f;Java 中如何实现序列化&#xff1f; 在 Java 编程中&#xff0c;序列化是一种将对象转换为字节流的过程&#xff0c;可以将对象在网络中传输或者保存到磁盘中。序列化可以将对象的状态保存下来&#xff0c;以便在需要时重新创建对象。Java 中提供了一…

9.9|day 2|整数拆分|不同的二叉搜索树

整数拆分&#xff1a; class Solution {public int integerBreak(int n) {int[] dp new int[n1];dp[2] 1;for(int i 3;i<n;i){for(int j 1;j<i-j;j){dp[i] Math.max(dp[i],Math.max(j*dp[i-j],j*(i-j)));}}//这里感觉要注意的就是j是我们要拆分的数&#xff0c;所…

提升敲代码效率:SublimeLinter+iverilog实现代码语法检查

前言 SublimeLinter是sublime的语法检查框架&#xff0c;安装这个插件是实现语法检查的前提&#xff0c;在安装了这个插件后&#xff0c;我们才可以安装使用特定语言的语法检查插件&#xff0c;比如对于verilog而言&#xff0c;有如下几种语法检查插件&#xff1a; SublimeLi…

如何预防CSRF攻击

CSRF 攻击的防范措施 CSRF&#xff08;Cross-Site Request Forgery&#xff09;攻击是一种常见的 Web 攻击&#xff0c;即攻击者在用户不知情的情况下&#xff0c;利用用户已登录的身份&#xff0c;向目标网站发送恶意请求&#xff0c;从而实现攻击目的。本文将介绍 CSRF 攻击…

5. 状态

一、状态是什么 由一个任务维护&#xff0c;并且用来计算某个结果的所有数据&#xff0c;都属于这个任务的状态可以认为状态就是一个本地变量&#xff0c;可以被任务的业务逻辑访问Flink 会进行状态管理&#xff0c;包括状态一致性、故障处理以及高效存储和访问&#xff0c;以…

go通过pprof定位groutine泄漏

日常开发中除了会出现Panic、ErrorInfo等通过日志很容易捕捉到的错误&#xff0c;还会出现内存泄漏、CPU激增等日志难以捕捉的问题。今天小老虎就给大家介绍下如何使用pprof去捕捉内存、CPU这些日志难以排查到的问题。 pprof的访问 pprof是Golang的性能分析工具&#xff0c;可…

Inno Setup 打包的文件以管理员权限运行

在 Inno Setup 安装目录中找到文件 SetupLdr.e32&#xff0c;用软件 ResourceHacker 打开。如下图&#xff0c;点开清单&#xff0c;找到 <requestedExecutionLevel level"asInvoker" uiAccess"false"/></requestedPrivileges>改为 <requ…

Nomad系列-Nomad网络模式

系列文章 Nomad 系列文章 概述 Nomad 的网络和 Docker 的也有很大不同, 和 K8s 的有很大不同. 另外, Nomad 不同版本(Nomad 1.3 版本前后)或是否集成 Consul 及 CNI 等不同组件也会导致网络模式各不相同. 本文详细梳理一下 Nomad 的主要几种网络模式 在Nomad 1.3发布之前&a…

CSS_文字渐变

/* 定义渐变背景样式 */ .gradient-text {background-image: linear-gradient(to right, #ff0000, #00ff00); /* 渐变色范围 */background-clip: text; /* 应用渐变背景到文本 */-webkit-background-clip: text; /* Safari 和 Chrome 的前缀 */color: transparent; /* 将文本颜…

ADS1115 模拟IIC

ADS1115是16位ADC&#xff0c;基准源内部可选&#xff0c;PGA 可提供从 256mV 到 6.144V 的输入范围。 地址可由ADDR引脚决定&#xff0c;一般接地&#xff0c;地址为0x90 写寄存器地址为0x90&#xff0c;读寄存器地址为0x91 ADS1115有4个控制寄存器&#xff0c;0x00,0x01,0x0…

debian apt安装mysqlodbc

mysql的deb包下载地址 下载后上传到linux后&#xff0c; #安装deb包 apt install ./mysql-apt-config_0.8.26-1_all.deb #更新源 apt-get update #搜索包 apt search odbc #安装包 apt-get install mysql-connector-odbc

3. 自定义datasource

一、自定义DataSource ​ 自定义DataSource有两大类&#xff1a;单线程的DataSource和多线程的DataSource 单线程&#xff1a;继承 SourceFunction 多线程&#xff1a;继承 ParallelSourceFunction&#xff0c;继承 RichParallelSourceFunction&#xff08;可以有其他的很多操…

origin中optimal cluster安装报错解决

1.在安装之后程序运行出错&#xff0c;报错信息为缺少numpy包。解决办法&#xff1a;打开窗口-脚本窗口&#xff0c;用pip安装numpy&#xff0c;其他缺少的包可用同样方法解决。 2.有的包在外部python中才有&#xff0c;通过origin无法下载。解决办法&#xff1a;在连接-python…