Java根据经纬度获取两点之间的距离，最近在实现类似于钉钉打卡签到的需求，因为对精度要求不是很高，所以可以通过一个球面距离的公式来求两点距离，这里将地球当成一个球体，实际上地球是一个不规则的球体，所以这个实现方法只能适用一些精度要求不高的需求...，如果要高精度，可以用第三方的api去实现。...实现思路 先新增一个配置页面，调用百度地图，保存好经纬度数据到数据库表，同时也保存距离 手机打卡获取当前位置的经纬度数据，通过接口对比，计算两点距离是否在配置的打卡范围内 代码实现 写一个实体类，传入经纬度信息...Integer> resultResponse = ResultResponse.getSuccessfulResultResponse(AppConsts.NO_IN_GPS_RANGE); // 获取配置...，只能适用于不是特别精准的情况，要特别精准，请用第三方api，比如百度的，https://lbsyun.baidu.com/
使用对象 高德地图、腾讯地图以及谷歌中国区地图使用的是GCJ-02坐标系 百度地图使用的是BD-09坐标系 底层接口(HTML5 Geolocation或iOS、安卓API)通过GPS设备获取的坐标使用的是...EPSG:4326/WGS-84坐标系 在Openlayers 中默认的坐标就是Google的摩卡托坐标，也就是我们经常看到的 EPSG:3857 坐标系。...EPSG:4326和EPSG:3857区别（重点） EPSG:3857（投影）：数据的可读性差和数值大存储比较占用内存。 EPSG:4326（地理）：使用此坐标系会导致页面变形。....)) - this.PI / 2); return { 'lat': y, 'lon': x }; }, //两点的距离 distance: function...所以我们都是采用 EPSG:3857的坐标系类型，把数据源转换位 EPSG:3857的数据源即可。
概述 本文讲述如何结合高德地图API实现路径导航以及在Openlayers4中的展示。 效果 实现 获取数据 数据的获取是通过高德的API来实现，实现代码如下： <!..., function (result) { console.log(JSON.stringify(result)); }) 获取后的数据格式如下...], "EPSG:4326", "EPSG:3857"); var startF = new ol.Feature(new ol.geom.Point(startC));...:4326", "EPSG:3857")) } var pathF = new ol.Feature...:4326', 'EPSG:3857'), zoom: 13, minZoom: 3
概述 最近有个需求就是求多个点的外包多边形，看了下turf.js可以实现，在此记录分享一下。...// 通过geojson获取features function getFeatures(geojson) { let features = (new ol.format.GeoJSON()).readFeatures...(geojson); features.forEach(f => { f.setGeometry(f.getGeometry().transform('EPSG:4326', "EPSG...:3857")) }) return features } // turf.convex fetch('.
不管在地图上做任何操作，切换容器后，操作过的内容也是会同步过去。 思路 使用 ol 提供的方法可以获取 当前地图所在容器 和 设置地图到新的容器 里。...Map.getTarget() 获取当前地图所在容器 Map.setTarget() 设置地图到指定容器 编码 ...，因为OSM里中国地图的边界有点问题！！！！】...:4326", // 坐标系，有EPSG:4326和EPSG:3857 center: [114.064839, 22.548857], // 深圳坐标 minZoom:10,...如果不清楚 OpenLayers 是什么，可以阅读： 『Vite + Vue3 + OpenLayers 起步』
坐标系（coordinate system） 有了参考椭球体这样的几何模型后，就可以定义坐标系来进行描述位置，测量距离等操作，使用相同的坐标系，可以保证同样坐标下的位置是相同的，同样的测量得到的结果也是相同的...事实上，随着我们对地球形状测量的越来越精确，北美使用的 NAD83 基准和欧洲使用的 ETRS89 基准，与 WGS 84 基准是基本一致的，甚至我国的 CGCS2000 与WGS84之间的差异也是非常小的...对于 Web Map 开发人员的意义 对于 Web Map 开发人员来说，最熟悉的应该是EPSG:4326 (WGS84) and EPSG:3857(Pseudo-Mercator)，这又是啥呢？...直到2008年，才被分配了EPSG:3785的代码，但在同一年没多久，又被弃用，重新分配了 EPSG:3857 的正式代码，使用至今。...参考资料： EPSG 4326 vs EPSG 3857 (projections, datums, coordinate systems, and more!)
WGS-84坐标系是国际通用的标准，EPSG编号为EPSG:4326，通常GPS设备获取到的原始经纬度和国外的地图厂商使用的都是WGS-84坐标系。...，所以也称为投影坐标系，通常单位为米，投影坐标系根据投影方式的不同存在多种，在Web开发的场景里通常使用的是Web墨卡托投影，编号为EPSG:3857，它基于墨卡托投影，把WGS-84坐标系投影成正方形...坐标系更详细的信息可参考GIS之坐标系统，EPSG:3857的详细信息可参考EPSG:3857。...经纬度定位行列号 上一节里我们简单介绍了一下坐标系，按照Web地图的标准，我们的地图引擎也选择支持EPSG:3857投影，但是我们通过工具获取到的是火星坐标系的经纬度坐标，所以第一步要把经纬度坐标转换为...坐标系转换 前面还遗留了一个小问题，即我们把工具上选出的经纬度直接当做4326经纬度，前面也讲过，它们之间是存在偏移的，比如手机GPS获取到的经纬度一般都是84坐标，直接在地图显示，会发现和你实际位置不一样
概述： 一年一度的高考今天开始了，回想10年前，那是我第一次高考；10年后，作为一个GISER，在此给大家献上一个GISER的祝福，祝愿各位考生：考神附体，考完报考GIS专业（LZUの，给自己的母校打个广告...）…… 内容： 1、爬取全国的高校的数据； 2、根据天地图的接口，获取高校的经纬度； 3、将数据制作成shp，并转换为geojson； 4、制作全国高校WEBGIS展示图。...WEBGIS中展示 实现： 1、获取高校数据 public JSONObject getUrlContent(String url) throws IOException, JSONException...:4326', 'EPSG:3857'); _feature.setGeometry(_geom); } var vectorSource = new...:4326', 'EPSG:3857'), zoom: 4 }) }); }); } </head
2007年8月6日 Christopher Schmidt （OpenLayers的重要贡献者之一）在通过一次GIS讨论中为了在OpenLayers中使用谷歌投影，提出给谷歌投影（Web墨卡托）使用一个统一的代号...（已有如54004、41001之类的代号）900913（也形似 Google），并与同年9月11日在OpenLayers的OpenLayers/Layer/SphericalMercator.js中正式使用代号...很快EPSG于2009年2月9号使用新代号EPSG:3857 代替之前的 EPSG:3785，给谷歌地图投影方法命名为“公共可视化伪墨卡托投影”（PVPM），投影运算方法代号 1024。 ...Auxiliary Sphere），与 EPSG:3857 对应。 ...在 ArcGIS 10.0 版本中，ESRI 正式使用 EPSG:3857 替换之前的 EPSG:102100。
概述： OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。...OL3已运用现代的设计模式从底层重写。OpenLayers 3同时设计了一些主要的新功能，如显示三维地图，或使用WebGL快速显示大型矢量数据集，这些功能将在以后的版本中加入。 基本概念： ?...一个ol.View实例包含投影projection，该投影决定中心center 的坐标系以及分辨率的单位，如果没有指定（如下面的代码段），默认的投影是球墨卡托（EPSG：3857），以米为地图单位。...map.setView(new ol.View({ center: [0, 0], zoom: 2 })); 3、Source OpenLayers 3使用ol.source.Source...子类获取远程数据图层，包含免费的和商业的地图瓦片服务，如OpenStreetMap、Bing、OGC资源（WMS或WMTS）、矢量数据（GeoJSON格式、KML格式…）等。
theme: smartblue highlight: a11y-light 一、本文简介 本文案例使用 Vite 搭建项目，在 Vue 3 的基础上使用 OpenLayers 。...OpenLayers简介 OpenLayers 可以轻松地在任何网页中放置动态地图。它可以显示从任何来源加载的地图图块、矢量数据和标记。OpenLayers 的开发旨在进一步使用各种地理信息。...它是完全免费的开源 JavaScript。 以上是官网对 OpenLayers （以后简称“ol”）的介绍。 为什么选择ol？...(y) 输入项目名，本文使用了“ol-demo”这个项目名。 Project name: ol-demo 选择要使用的框架，这里选择 vue 即可（我选的是不使用 ts）。...:4326", // 坐标系，有EPSG:4326和EPSG:3857 center: [114.064839, 22.548857], // 深圳坐标
一、本文简介 除了用鼠标滚轮在地图上缩放外，还可以使用 ol 提供的 api 设置地图缩放级别。...获取当前缩放级别：View.getZoom() 设置缩放级别：View.setZoom() 【注意：本文使用的图源是 OSM ，正式开发不能用 OSM ，因为 OSM 的中国边界有点问题！！！】...二、环境搭建 Vite + Vue3 + ol6 # 1、使用 Vite 创建项目；取个好听的项目名；拉取 vue 的代码模板 npm init vite@latest # 2、初始化项目 cd...『Vite + Vue3 + OpenLayers 起步』 三、思路与编码 获取当前缩放级别 点击放大或缩小按钮，原缩放级别加一或减一 EPSG:4326和EPSG:3857 center: [114.064839, 22.548857], // 中心坐标 zoom, // 地图缩放级别
后来，Web Mercator 在 Web 地图领域被广泛使用，这个坐标系就名声大噪。尽管这个坐标系由于精度问题一度不被GIS专业人士接受，但最终 EPSG 还是给了 WKID:3857。...下面放一张在 EPSG 官网上找到的3857坐标的具体参数介绍，供参考： Web Mercator 的阴暗面 Web Mercator 无论是来自Google程序员的谬误，还是为了简化换算的有意为之...简单地顺一下： OpenLayers:900913 由于得不到官方的认证ID，Google为Web Mercator 任性地制定了这个ID，自娱自乐，也祝大家玩的开心……。...EPSG:3857 EPSG为 Web Wercator 最终设立的WKID，也就是现在我们常用的Web 地图的坐标系，并且给定官方命名 “WGS 84 / Pseudo-Mercator“。...ESRI:102113 Esri内部使用ID，与 EPSG:3785 相应。已被弃用。 ESRI:102100 Esri内部使用ID，与 EPSG:3857 相应。
概述 本文实现的是结合Openlayers4和java servlet实现公网资源切片的本地缓存。 优点 相比较其他下载利器，本实例具有以下优点： 1. 实现简单，操作简单； 2....结合web，看到哪下到哪，主动保存未缓存的切片； 4. 可通过修改URL和代码缓存多种地图切片。 缺点 鉴于web的实现，该切片缓存的方式具有以下缺点： 1....被动式缓存，需要用户浏览需要下载的区域； 2. 无法批量缓存。 3. 主要是针对开发人员的，非开发人员使用有困难； 实现效果 ? ? ? 实现思路 ?...:4326', 'EPSG:3857'), zoom: 4 }) }); }...conn.setRequestMethod("GET"); //超时响应时间为5秒 conn.setConnectTimeout(5 * 1000); //通过输入流获取图片数据
var vector = new ol.layer.Vector( {source : new ol.source.Vector( {// url:// 'http://openlayers.org/en...);var coordinate = e.coordinate;var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate,'EPSG...:3857', 'EPSG:4326'));if (featureInfo !...var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate,'EPSG:3857', 'EPSG:4326'));这个是将坐标进行转换的...| 新旧对比 | openlayers2 | openlayers3 | |:-------------- |:-------------|:-----| | 点击 | 获取经纬度查询 | 点线类别区分
] 投影坐标系，是平面坐标系，参考平面是水平面，坐标单位是米 地理坐标可以向投影坐标转换，一对N的关系，转换过程叫做“投影”（投影：将不规则的地球曲面转换为平面） 在地球椭球面和平面之间建立点与点之间函数关系的数学方法...（4）正轴等角圆锥投影中，地球表面上两点间的最短距离(即大圆航线)表现为近于直线，这有利于地理信息系统中空间分析和信息量度的正确实施 但是！.../ Pseudo-Mercator---EPSG:3857 WGS_1984_Web_Mercator_Auxiliary_Sphere---ESRI:102100（Esri内部使用ID，与 EPSG:...3857 相应） 以下的两个在 2008 年给 Web Mercator 设立的WKID，但是这个坐标系的基准面是正圆球，不是WGS 1984。...内部使用ID，与 EPSG:3785 相应） 三、特殊的坐标系 1、GCJ02（国测局02 或 火星坐标） 这是一种偏移算法，而不是单独的一个坐标系。
2、移动鼠标设置半径 画点结束后，激活地图的鼠标移动事件，获取圆心到鼠标点的距离，并画圆，将结果展示到地图上。...3、点击地图结束绘制 点击地图，结束绘制，将最终结果展示到地图上，并停止地图的鼠标移动事件。...> china EPSG...maxExtent: bounds, maxResolution: 0.1523098006807012, projection: "EPSG...displayOutsideMaxExtent: true, isBaseLayer: true, yx : {'EPSG
在使用Openlayer的时候可以npm install openlayers --save也可以使用 npm install ol --save 明显感觉前面安装特别慢。...而且之前使用 npm 安装 `openlayers` 这个包时，因为它依赖了 `closure-util` 来进行编译，速度应该很慢。...并且官方计划在5.0版本完全摆脱goog.require和goog.provide，放弃对closure-util的支持，使用ES模块来构建源码，详见 [releases]( openlayers...现在来说他们默认采用的是 ES module 构建，推荐在 angular vue react 这些构建型的项目使用 `ol` 包，`openlayers` 包是通过特殊的构建命令转过去的，主要是为了解决直接引用的方式...ol.style.Style({ image: new ol.style.Icon({ scale:0.5, //控制标注图片和文字之间的距离
概述 很多时候，我们有这样的使用场景：外业人员在外作业，我们需要知道人员的当前的实时位置和人员信息，如何实现呢？本文将为大家简单的说明该场景下我们应该实现。 效果 ? ?...思路 解决实时位置的展示，最核心的有两点：1、数据的传输与存储；2、设备端如何和监控端进行数据交互。 首先，我们来说第一个的问题：数据的传输与存储。...（在实际中，只需要在触发器里面获取最新的记录即可）。...:4326', 'EPSG:3857'), zoom: 13 }) }); var websocket = null; //判断当前浏览器是否支持...:4326","EPSG:3857"); linesdata.push(coord); if(linesdata.length>1){ var line
概述 前面的文章中写了基于openlayers4的台风路径播放，最近用到mapbox GL，也要实现相似的功能，网上找了好久都没有找到，于是就放弃了“拿来主义”的想法，只能自己动手了。...经过一下午的努力，终于有了一个雏形，在此分享出来，希望对你有用！ 效果 ? 实现 1、数据获取 测试数据是从温州台风网，抓取了201929号台风数据作为测试数据。...，方法如下: getCircleCoords(center, radiusData) { center = proj4(proj4('EPSG:4326'), proj4('EPSG:3857'),...:3857'), proj4('EPSG:4326'), [x, y]); _coords.push(coord); } } return [_coords]; } 说明：...由于没有找到坐标转换的方法，所以就引用的proj4js做了投影的转换。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
