openlayer4 - 随笔分类 - 疯狂的妞妞

openlayer - 气泡浮动窗口

摘要：核心问题如果你正常尝试使用 overlay 实现浮动窗口，大概率会遇到这个问题：使用 overlay 的时候，不论怎样调整 html 的 z-index 都不会生效。这是因为源码中，父级元素已经固定填 0，子元素无法突破父级的元素堆叠层级。下一行是关键代码，设置 overlay 的时候，需要阅读全文

posted @ 2025-07-31 17:29 疯狂的妞妞

OpenLayer——模拟运动轨迹

摘要：模拟在人地图上移动，动态绘制行动轨迹的功能，附带一个跟随的气泡弹窗。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="ol/ol.css" rel="sty 阅读全文

posted @ 2022-11-30 08:45 疯狂的妞妞

OpenLayer——绘制带箭头的线

摘要：绘制带箭头的线，计算相对复杂，多少是有点影响性能了。更简单的做法：初始、目标点用不同的点进行强调即可。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- The line 阅读全文

posted @ 2022-11-30 08:40 疯狂的妞妞

OpenLayer4——坐标间距计算

摘要：地图距离计算，显然，地球是个曲面，不能简单地通过勾股定理计算，需要考虑到地球的半径。 MySQL版本 DROP FUNCTION IF EXISTS getDistance; -- create a function CREATE FUNCTION getDistance ( lon1 DOUBLE 阅读全文

posted @ 2022-05-20 11:17 疯狂的妞妞

OpenLayer4——定位到坐标位置

摘要：这个功能很常见，就比如百度地图，打开显示的就是我们当前的位置。其原理就是获取设备（手机）上的坐标，然后将地图定位到我们设备的位置。 OpenLayer4中定位到给出的坐标点，代码如下： var view = new ol.View({ center: [0, 0], zoom: 1 }); var 阅读全文

posted @ 2022-05-20 11:04 疯狂的妞妞

OpenLayer4——地图拉伸导致事件丢失问题

摘要：有时候前端代码并不规范，错误的代码、或者样式，导致地图拉伸变形，这时候，会导致地图的点击事件失效。可以尝试重新设置地图大小。 setTimeout(function () { map.updateSize(); }, 100); 阅读全文

posted @ 2022-05-20 11:00 疯狂的妞妞

OpenLayer4——贝塞尔曲线插值算法

摘要：这是早期项目中用到的代码，经过 AI 优化调整，可能需要适当调整一下。 /** * 生成贝塞尔曲线插值点 * * 阶乘数为数组长度减一 * * @param {Array} points - 控制点数组，格式 [[x0, y0], [x1, y1], ...] * @param {Array} re 阅读全文

posted @ 2022-05-20 10:57 疯狂的妞妞

OpenLayer4——多边形遮罩层

摘要：知识点：多边形异或运算的使用业务场景：如下图，有些时候，会有一些特殊的需求，只保留某个区域内部的地图部分。这时候，可以使用多边形的异或运算知识，取-180,-90,180,90范围的区域，与需要截取的区域异或运算，最后保留需要的部分。核心代码如下： /** * 图层截取，多余的部分添加白色遮罩阅读全文

posted @ 2022-05-20 10:32 疯狂的妞妞

OpenLayer4——获取鼠标点击的坐标

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="ol/ol.css" rel="stylesheet" type="text/css"/> <script 阅读全文

posted @ 2022-05-20 10:26 疯狂的妞妞

OpenLayer4——GeoJSON简介

摘要：GeoJSON实际上就是一个JSON，为了满足GIS编程需要，额外定制了这样一套规则。geojson中包含了点、线、面的数据，包含大量的坐标的数组（不需要背诵记忆，如果参与GIS编程，短时间内就会接触大量这样的数据） gsojson样例1 独立的feature {"type":"Feature", 阅读全文

posted @ 2022-03-28 11:36 疯狂的妞妞

OpenLayer4——添加Geojson

摘要：Geojson是一种特殊的json数据，内部封装了地理空间相关的数据（点、线、面）。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="ol/ol.css" 阅读全文

posted @ 2022-03-28 10:56 疯狂的妞妞

OpenLayer4——图层叠加

摘要：叠加一张png <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- The line below is only needed for old environments li 阅读全文

posted @ 2022-03-25 15:43 疯狂的妞妞

OpenLayer4——图形组合

摘要：使用一些功能函数，将多个图形组合使用，方便统一样式。常见的应用场景，就是多个省份，拼接成一张更大的区域。任意多边形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- Th 阅读全文

posted @ 2022-03-24 18:01 疯狂的妞妞

OpenLayer4——圆形

摘要：代码相对简单，提供圆心和半径即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- The line below is only needed for old enviro 阅读全文

posted @ 2022-03-24 17:59 疯狂的妞妞

OpenLayer4——面（多边形）

摘要：单独介绍多边形，主要是因为存在多边形组合使用的情况。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- The line below is only needed for 阅读全文

posted @ 2022-03-24 17:16 疯狂的妞妞

OpenLayer4——线

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- The line below is only needed for old environments like Inter 阅读全文

posted @ 2022-03-24 17:14 疯狂的妞妞

OpenLayer4——点