2022年5月20日

OpenLayer4——坐标间距计算

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

posted @ 2022-05-20 11:17 疯狂的妞妞 阅读(117) 评论(0) 推荐(0) 编辑

OpenLayer4——定位到坐标位置

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

posted @ 2022-05-20 11:04 疯狂的妞妞 阅读(332) 评论(0) 推荐(0) 编辑

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

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

posted @ 2022-05-20 11:00 疯狂的妞妞 阅读(103) 评论(0) 推荐(0) 编辑

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

摘要： 主要涉及2阶贝塞尔曲线的应用，为了方便维护，牺牲了一部分性能，如果有能力可以进行调优。 功能描述：将尖锐的角变成圆角 使用场景： 比如，你手头有3个点，(0,0),(5,0),(5,5)，连在一起显然是一条折线，通过贝塞尔曲线算法，可以算出(0,0)到(5,5)中间的折线，这些折线连起来看起来像是一 阅读全文

posted @ 2022-05-20 10:57 疯狂的妞妞 阅读(546) 评论(0) 推荐(0) 编辑

OpenLayer4——多边形遮罩层

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

posted @ 2022-05-20 10:32 疯狂的妞妞 阅读(166) 评论(0) 推荐(0) 编辑

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 疯狂的妞妞 阅读(378) 评论(0) 推荐(0) 编辑

导航