openlayers动态添加自定义div图层 具有筛选功能 和浮窗

2023-05-16

openlayers动态加自定义div图层 并且具有筛选功能 和浮窗效果,代码拿过去就可以用

联系方式:45664741@qq.com
个人博客: flot.top

效果图:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      crossorigin="anonymous"
      integrity="sha384-iYkPgcf1wF1oXt3CosKxNMQJgQUC60vjUJM+HANnq9ULJXg8DLX/ywPXMZHto90Q"
      href="https://lib.baomitu.com/ol3/4.6.5/ol.css"
      rel="stylesheet"
    />
    <script
      crossorigin="anonymous"
      integrity="sha384-207r7vJ98mMvHGcgRttnhkJLl6RU+DuD+ttp1G5k4ShCtw03LfZIIDNNWDGU8m2F"
      src="https://lib.baomitu.com/ol3/4.6.5/ol.js"
    ></script>
    <script
      crossorigin="anonymous"
      integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM"
      src="https://lib.baomitu.com/jquery/1.11.3/jquery.min.js"
    ></script>
    <style>
      #map {
        width: 1200px;
        height: 700px;
        position: absolute;
      }
      .my-map-overlay {
        width: 100px;
        height: 100px;
        /* border: 1px solid; */
      }
      .my-map-overlay-tag {
        width: 100px;
        height: 100px;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAABkCAYAAAHfzFbhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ZGFiNjMzMi0zY2Q3LTkwNGQtODY0Yi04ZTE0ZDk3MGY0NjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTU0RDcyNzlGNUI2MTFFQjgxNjhBRDJGM0UyRTEwOTgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTU0RDcyNzhGNUI2MTFFQjgxNjhBRDJGM0UyRTEwOTgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdkYWI2MzMyLTNjZDctOTA0ZC04NjRiLThlMTRkOTcwZjQ2MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3ZGFiNjMzMi0zY2Q3LTkwNGQtODY0Yi04ZTE0ZDk3MGY0NjIiLz4gPC9y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")
          no-repeat;
        animation: identifier steps(4) 1s infinite;
      }

      #map-overlay-info {
        background: #fff;
        position: absolute;
        border-radius: 4px;
        display: none;
        padding: 10px;
        z-index: 1;
      }
      #map-overlay-info .info-shape {
        position: absolute;
        top: 0.5em;
        border: 1px solid #fff;
        height: 0;
        width: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid #fff;
        border-top: 3px solid transparent;
        border-bottom: 3px solid #fff;
        left: -8px;
      }

      @keyframes identifier {
        0% {
          background-position: 0px 0;
        }
        100% {
          background-position: -400px 0;
        }
      }
    </style>
  </head>
  <body>
    <input type="text" id="myInput" oninput="handleInput()" />根据名称筛选
    <div id="map"></div>
    <script>
      var option = {
        map: null,
        overlayItem: {},
        list: [],
        // 初始化地图
        initMap() {
          const osm = new ol.layer.Tile({
            source: new ol.source.OSM(),
          });
          // 切片方式加载地图
          const tiled = new ol.layer.Tile({
            // visible: false,
            source: new ol.source.TileWMS({
              url: "https://ahocevar.com/geoserver/wms",
              params: { LAYERS: "topp:states", TILED: true },
              serverType: "geoserver",
              // Countries have transparency, so do not fade tiles:
              transition: 0,
            }),
          });

          const map = new ol.Map({
            target: "map",
            layers: [osm, tiled],
            view: new ol.View({
              center: [-10997148, 4569099],
              zoom: 4,
            }),
          });
          this.map = map;
        },
        // 新增自定义图层
        mapAddOverlay() {
          // 创建div的函数
          function createDiv({ id, status, statusType }, index) {
            // 创建一个div元素
            var elementDiv = document.createElement("div");
            elementDiv.className = "my-map-overlay";
            elementDiv.innerHTML = `
                  <div class='my-map-overlay-tag ${formatInfoClass(status)}'>
                    <span class='my-map-overlay-status'>${
                      status === "故障" ? statusType : status
                    }${id}</span>
                  </div>
                  `;
            // 设置div元素的cid属性
            elementDiv.setAttribute("myid", id);
            return elementDiv;
          }
          // 根据状态 加载对应的类名
          function formatInfoClass(status) {
            var className = "";
            switch (status) {
              case "工作中":
                className = "green";
                break;
              case "未使用":
                className = "gray";
                break;
              case "故障":
                className = "red";
                break;
            }
            return className;
          }
          // 循环创建循环覆盖层
          this.list.forEach((item, index) => {
            // 新建一个覆盖层
            var newMarker = new ol.Overlay({
              // 设置位置为当前节点的坐标
              position: [item.lon, item.lat],
              // 设置覆盖层与位置之间的匹配方式
              positioning: "bottom-left",
              // 偏移量  默认值是 [0, 0] 正值分别向右和向下偏移
              // offset: [-50, 20],
              // 覆盖层元素
              element: createDiv(item, index),
              // 事件传播到地图视点的时候是否应该停止
              stopEvent: false,
            });
            this.map.addOverlay(newMarker);
          });

          // 自定义div列表
          const domlist = document.getElementsByClassName("my-map-overlay");
          this.mapOverlayOver(domlist);
        },
        /** mapRemoveLayer
         * @function  删除自定义div图层
         */
        mapRemoveOverlays() {
          this.map.getOverlays().clear();
        },
        /**
         * 监听地图自定义图层的单击/移入/移出事件
         * @function mapOverlayOver
         * @param {Array} domlist  元素列表
         */
        mapOverlayOver(domlist) {
          Array.from(domlist).forEach((item) => {
            // 鼠标点击事件
            item.addEventListener("click", (e) => {
              const ev = e || window.event;
              const target = ev.path.filter(
                ({ className }) => className === "my-map-overlay"
              )[0];
              // // 获取在div上设置的myid
              const myid = target.getAttribute("myid");
              this.setMapZoomCenter(myid);
            });

            // 鼠标移入事件 创建浮窗
            item.addEventListener("mouseenter", (e) => {
              const ev = e || window.event;
              const target = ev.target || ev.srcElement;

              // 获取在div上设置的myid
              const myid = target.getAttribute("myid");
              // 在设备列表筛选符合条件的对象赋值
              const overlayItem = this.list.filter(({ id }) => id === myid);
              this.overlayItem = overlayItem[0];

              // getBoundingClientRect用于获取元素相对于视窗的位置集合
              const { top, left } = target.getBoundingClientRect();
              this.addTootipDom(top + 30, left + 100);
            });

            // 鼠标移出事件 删除浮窗
            item.addEventListener("mouseleave", (e) => {
              this.removeTootipDom();
              // mapOverlayInfo.setAttribute("style", "display: none");
            });
          });
        },
        /**
         * 设置地图的中心点和放大倍数
         * @function setMapZoomCenter
         * @param {String} ItemId  设备id
         */
        setMapZoomCenter(ItemId) {
          const overlayItem = this.list.filter(({ id }) => ItemId === id);
          this.map.getView().animate({
            center: [overlayItem[0].lon, overlayItem[0].lat],
            duration: 800,
            zoom: 6,
          });
        },
        addTootipDom(top, left) {
          // const mapOverlayInfo = document.getElementById("map-overlay-info");
          // if (mapOverlayInfo) {
          //   mapOverlayInfo.parentNode.removeChild(mapOverlayInfo);
          // }
          const parentDom = document.getElementById("map");
          const childDom = document.createElement("div");
          childDom.setAttribute("id", "map-overlay-info");
          childDom.innerHTML = `
      <div class="info-shape"></div>
        <p>名称:${this.overlayItem.stationName}</p>
        <p>状态:${this.overlayItem.status}</p>
        <p>故障名称:${this.overlayItem.statusType}</p>
      `;
          childDom.setAttribute(
            "style",
            `top: ${top}px; left: ${left}px; display: block`
          );
          parentDom.appendChild(childDom);
        },
         // 删除自 浮窗
        removeTootipDom() {
          const mapOverlayInfo = document.getElementById("map-overlay-info");
          mapOverlayInfo.parentNode.removeChild(mapOverlayInfo);
        },
      };
      // 添加浮窗
      option.initMap();
      option.mapAddOverlay();
      handleInput();
      // 筛选值发生变化
      function handleInput() {
        const val = document.getElementById("myInput").value;
        const list = [
          {
            Type: "客厅",
            lat: 5925601.900570343,
            lon: -13109428.402459577,
            stationName: "598客厅1",
            id: "kt-1",
            status: "工作中",
          },
          {
            Type: "客厅",
            lat: 6024213.9906833647,
            lon: -11040972.000962155,
            stationName: "598客厅2",
            id: "kt-2",
            status: "工作中",
          },
          {
            Type: "客厅",
            lat: 5058323.196052412,
            lon: -13293746.428576976,
            stationName: "598客厅3",
            id: "kt-3",
            status: "工作中",
          },
          {
            Type: "客厅",
            lat: 4893844.222583916,
            lon: -13195443.525842169,
            stationName: "598客厅4",
            id: "kt-4",
            status: "工作中",
          },
          {
            Type: "客厅",
            lat: 5008981.7571222,
            lon: -10393810.018663468,
            stationName: "598客厅5",
            id: "kt-5",
            status: "未使用",
          },
          {
            Type: "客厅",
            lat: 3659552.246270453,
            lon: -10819789.300954165,
            stationName: "598客厅6",
            id: "kt-6",
            status: "未使用",
          },
          {
            Type: "客厅",
            lat: 4186335.64109729,
            lon: -12949686.157685628,
            stationName: "598客厅7",
            id: "kt-7",
            status: "故障",
            statusType: "温度异常",
          },
        ];
        option.list = list.filter(
          ({ stationName }) => stationName.indexOf(val) !== -1
        );
        option.mapRemoveOverlays() // 清除自定义图层,再重新加载自定义div图层
        option.mapAddOverlay();
      }
      // GIS坐标系  EPSG:4326转EPSG:3857
      function mercatorTolonlat(mercator) {
        var lonlat = {
          x: 0,
          y: 0,
        };
        var x = (mercator.x / 20037508.34) * 180;
        var y = (mercator.y / 20037508.34) * 180;
        y =
          (180 / Math.PI) *
          (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
        lonlat.x = x;
        lonlat.y = y;
        return lonlat;
      }
      // 经纬度(EPSG:4326)转换EPSG:3857
      function lonLat2Mercator(lonlat) {
        var mercator = {
          x: 0,
          y: 0,
        };
        var earthRad = 6378137.0;
        mercator.x = ((lonlat.lng * Math.PI) / 180) * earthRad;
        var a = (lonlat.lat * Math.PI) / 180;
        mercator.y =
          (earthRad / 2) * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
        return mercator;
      }
	console.log(mercatorTolonlat({x:13525596.430109723,y:3663568.4585909187}));
     console.log(lonLat2Mercator({lng: 121.5025, lat: 31.247015}))
    </script>
  </body>
</html>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

openlayers动态添加自定义div图层 具有筛选功能 和浮窗 的相关文章

  • Haffman编码(算法导论)

    上次算法导论课讲到了Haffman树 xff0c 笔者惊叹于Haffman编码的压缩效果 xff0c 故想自己亲自动手尝试写一个极简的Haffman压缩程序 首先 xff0c 我们来了解一下什么是Haffman编码 Haffman编码 赫夫
  • C++ Primer- 变量声明和定义的关系

    为了允许把程序拆分成多个逻辑部分来编写 xff0c C 43 43 语言支持分离式编译 xff08 separatecompilation xff09 机制 xff0c 该机制允许将程序分割为若干个文件 xff0c 每个文件可被独立编译 如
  • Compiler Lab2- 自制极简编译器

    笔者实现的这个超级迷你版编译器 xff08 词法分析 语法分析 生成中间代码 xff08 cpp xff09 xff09 仅支持四则运算 xff0c 功能真的是非常非常简单 xff0c 不过其中的流程 xff08 词法分析 gt 语法分析
  • 贪心算法实现最佳任务调度实验

    题目描述 一个单位时间任务是恰好需要一个单位时间完成的任务 给定一个单位时间任务的有限集S 关于S 的一个时间表用于描述S 中单位时间任务的执行次序 时间表中第1 个任务从时间0 开始执行直至时间1 结束 xff0c 第2 个任务从时间1
  • 在CentOS安装CMake

    你或许听过好几种 Make 工具 xff0c 例如 GNU Make xff0c QT 的 qmake xff0c 微软的 MS nmake xff0c BSD Make xff08 pmake xff09 xff0c Makepp xff
  • CSAPP Lab3- bufbomb

    实验目标 xff08 1 xff09 掌握函数调用时的栈帧结构 xff08 2 xff09 利用输入缓冲区的溢出漏洞 xff0c 将攻击代码嵌入当前程序的栈帧中 xff0c 使得程序执行我们所期望的过程 实验代码 xff08 1 xff09
  • 金蝶部署SpringBoot+vue项目总结

    金蝶部署SpringBoot 43 vue项目文章目录 文章目录 金蝶部署SpringBoot 43 vue项目文章目录前言一 金蝶部署中两个重要概念1 域2 应用基础上下文 二 部署准备1 前后台打包2 部署过程3 部署成功后的注意事项
  • Gazebo-Realsense 编译问题解决

    64 Gazebo仿真 Realsense 编译问题解决 参考 这篇文章配置 首先git clone代码到你的工作空间 git clone https github com nilseuropa realsense ros gazebo g
  • docker快捷添加用户组,远离sudo困扰

    使用docker命令时 xff0c 总是需要root权限 xff0c 同时还要验证密码 xff0c 过于麻烦便将root添加进docker分组 xff0c 远离sudo困扰 span class token comment 创建docker
  • 全注解下的SpringIoc 续4-条件装配bean

    Spring Boot默认启动时会加载bean xff0c 如果加载失败 xff0c 则应用就会启动失败 但是部分场景下 xff0c 我们希望某个bean只有满足一定的条件下 xff0c 才允许Spring Boot加载 xff0c 所以
  • 卡尔曼滤波结果和图优化的融合

    仅使用卡尔曼滤波结果作为初始值辅助NDT算法的进行 xff0c 并没有进行实际融合 论文地址 算法流程 扩展的卡尔曼滤波融合GPS 惯性测量单元IMU 编码器里程计得到融合后的定位信息 基于3D NDT配准得到激光里程计 建图优化 融合单帧
  • Kalibr工具进行相机IMU标定

    github地址 xff1a https github com ethz asl kalibrWiki文档 xff1a https github com ethz asl kalibr wiki camera imu calibration
  • 保研复试-计算机网络复习

    计算机网络是我专业课里成绩较高的课 xff0c 老师应该会问到 xff0c 面试的时候计网也是公司里爱问的科目 整理一下看到的网上的一些保研 考研复试题 xff0c 便于复习 一 计算机网络的体系结构 1 计算机网络的分类 按分布范围 xf
  • Hbase的API

    Hbase API 文章目录 Hbase API准备工作Namespace DDL1 Junit执行代码模板2 创建namespace的API3 列出所有的namespace4 列出所有namespace中的表名5 修改namespace的
  • 【Python】 matplotlib 以pdf形式保存图片

    Python matplotlib 以pdf形式保存图片 span class token keyword import span matplotlib span class token punctuation span pyplot as
  • 51单片机 | 点亮第一个LED | LED 闪烁实验 | LED流水灯实验

    文章目录 一 51单片机GPIO介绍1 GPIO概念2 GPIO 结构框图与工作原理2 1 P0端口2 2 P1端口2 3 P2端口2 4 P3端口 2 5 要点 二 LED简介三 硬件设计四 软件设计1 点亮第一个LED2 LED 闪烁实
  • matlab二维矩阵可视化几种方法

    目录 一 pcolor 二 imagesc 三 spy 四 文末彩蛋 一 pcolor 以一个100x100块对角矩阵B为例 1 xff1a 原生pcolor 可以在矩阵维度不大时进行可视化 xff0c 带小方格 矩阵比较大时画出整体为黑色
  • 【ROS入门】双系统安装和ros安装踩坑

    记录一下安装Ubuntu双系统和和ros过程中踩的坑 xff0c 防止下次再犯错 一 双系统安装与删除 双系统的安装比一开始想的说实话要简单得多 xff0c 随便用u盘制作一个系统安装盘 xff0c 或者在u盘里面放需要的Ubuntu镜像
  • 【ROS入门】TF与URDF

    一 什么是TF TF全程就是transform xff0c 就是一个坐标系的转换 在ROS中坐标的转换是一个很重要的内容 xff0c 主要还是因为机器的不灵活性 xff0c 如果是人 xff0c 完全可以灵活地控制手臂去抓取一个物体 xff
  • 树莓派3B+——系统安装及显示

    树莓派3B 43 系统安装及显示 目录 树莓派3B 43 系统安装及显示系统安装显示显示器显示3 5寸显示屏显示pc显示 树莓派3B 43 系统安装及显示 初次接触树莓派 xff0c 花了差不多一天的时间把系统的安装和显示全部搞定 xff0

随机推荐

  • VSLAM 相关知识点总结

    VSLAM 相关知识点 这篇文章是对VSLAM涉及的知识点进行系统性的总结和更新 xff0c 一些内容来源至VSLAM经典教材 xff0c 博客 xff0c 和开源项目 引用材料如下表 SLAM十四讲高博古月老师的技术博客崔神的github
  • Windows下CLion中文乱码最有效的解决方式

    作者开发环境 Windows 10 Clion 18 3 MinGW W64 很多人都遇到了Clion的中文乱码问题 xff0c 然后在CSDN上面寻找解决办法 比如这篇很有代表性https blog csdn net Cbk XLL ar
  • Neutron复盘及学习笔记

    前言 对于openstack neutron xff0c 曾花费很多的时间去看它的源码 xff0c 结果啥都没有看出来 openstack代码风格是 xff0c 为了实现plugin的可插拔 xff0c 运用了很多设计模式 xff0c 设计
  • 匿名飞控底层PID代码解析

    大半年就快过去了 大二上学期转瞬即逝 xff0c 离上一次博客也有一段时间了 xff0c 没错 xff0c 庆幸的是我又回来了 xff0c 其实本来第二篇博客是想着写一下两轮平衡车来着 xff0c 代码早就写好了 xff0c 但是硬件不给力
  • IAR、KEIL常见编译报错警告的解决方法(持续更新中)

    Warning Pe550 variable 变量 was set but never used 原因 xff1a 变量定义赋值了但从未使用 解决 xff1a 变量定义删了就可以 xff0c 编译器也不会真的给这个变量分配空间 Warnin
  • VS2019 未能正确加载”balabal.........Package“

    修复VS2019不能自动补全Unity脚本代码时 xff0c 更新了下面这个东西 导致一直蹦下面这些警告 嘣 嘣 嘣 嘣 嘣 网上有很多博客说重置用户数据 禁用Live Share 分析Log信息等等 xff0c 最后看到一个博文说检查更新
  • 51单片机 | 蜂鸣器实验

    文章目录 一 蜂鸣器介绍二 硬件设计三 软件设计四 实验现象 通过单片机的一个 IO 口控制 板载无源蜂鸣器 xff0c 实现蜂鸣器控制 一 蜂鸣器介绍 蜂鸣器是一种一体化结构的电子讯响器 xff0c 采用直流电压供电 xff0c 广泛应用
  • Vue 中WebSocket的使用

    span class token function data span span class token punctuation span span class token punctuation span span class token
  • npm版本与node版本不对应

    npm与node版本不对应 导致无法npm i 报错提示 WARNING You are likely using a version of node tar or npm that is incompatible with this ve
  • 吴恩达阅读文献步骤

    接下来 xff0c 就集中介绍一下如何研究一篇论文 吴恩达认为 xff0c 要理解一篇论文 xff0c 一次将一篇论文从第一个字读到最后一个字 xff0c 可能并不是最佳方式 正确的打开方式是 xff0c 一篇论文至少要看三遍 第一遍 xf
  • 更新docker

    以下是做为前端开发如何更新docker xff0c 萌新操作 1 xff0c 使用工具Finalshell xff0c 连接到ssh 2 xff0c 连接到服务器 xff0c 选择ssh xff0c 并配置服务名称 主机 服务地址 xff0
  • 计算机视觉理论笔记 (11) - 运动估计 (Motion Estimation)

    运动估计 光流法 Optical Flow 限制Horn xff06 Schunck 全局方法 global method 光流法约束等式 Constrain Equation 小幅度动作问题全局方法和局部方法的比较全局方法局部方法 基于块
  • 嵌入式,面试题目网页搜集

    指针笔试题 嵌入式面试
  • Java第一天笔记02——eclipse的常用快捷键

    1 main方法 main 43 Alt 43 2 System out println syso 43 Alt 43 3 批量修改 Alt 43 Shift 43 R 4 for for 43 Alt 43 5 代码格式化 Ctrl 43
  • FREERTOS源码解析——heap4.c

    目录 内存管理heap4无法解决的内存碎片 xff1a HEAP4简析分配内存在哪 xff0c 大小多少如何管理 重要源码解析 内存管理 freertos目前提供了以下5种内存管理 xff0c 特点如下 heap1 xff1a 最简单的内存
  • vscode + clangd 开发 c\c++

    目录标题 背景LSPClangdquick fixIWYUclang tidy 环境配置插件配置语言服务器下载自定义配置生成compile command jsonmakefile生成compile command json 强烈推荐cla
  • echarts世界地图(含中国省份地图),中国省份下钻到县,点击按钮返回上一级

    效果图 中国地图高亮显示 并且地图中国地图在可视范围的中心 中国地图下钻 省份下钻 小站 www flot top 在线预览地址 https guangshizhao github io world map 需要源码的同学可以自行去本人的仓
  • 51单片机 | LED点阵实验 | 点亮一个点 | 显示数字 | 显示图像

    文章目录 一 LED点阵介绍二 硬件设计三 软件设计1 LED点阵 xff08 点亮一个点 xff09 2 LED点阵 xff08 显示数字 xff09 3 LED点阵 xff08 显示图像 xff09 四 实验现象1 LED 点阵 xff
  • 教你通过bigemap和geojson获取echarts精确到乡镇、街道的地图json数据

    2022 10 09更新 xff01 xff01 xff01 bigemap导出kml文件的功能不开放了 后续有什么好的办法获取乡镇 街道数据再做记录 大家有什么好的方法也可以留言 写在前面 本文重点介绍关于怎么获取地图数据的部分 我们可以
  • openlayers动态添加自定义div图层 具有筛选功能 和浮窗

    openlayers动态加自定义div图层 并且具有筛选功能 和浮窗效果 代码拿过去就可以用 联系方式 45664741 64 qq com 个人博客 flot top 效果图 span class token doctype span c