4326 转 3857 js

2024-10-29

Arcgis js之web墨卡托(3857)转经纬度坐标(4326)

Arcgis js之web墨卡托(3857)转经纬度坐标(4326) 手动转化方法: 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 =

openlayer 4326与3857坐标互转之Java版

public class Transform { private static final double PI = Math.PI; private static final double mercatorMax = 20037508.34; /** * 4326坐标转3857即经纬度转墨卡托 * @param lon * @param lat */ public static void transformTo3857(double lon,double lat){ double mercato

ArcGIS+API+for+JS测距

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Ty

vue整合外部js

vue引入外部jsimport { TrackLine } from "../../../../../static/js/trajectory.js";import { initMap } from "../../../../../static/js/initMap.js"; 写法参照js 文件夹内容用法如下: data{ return { TrackLineJs: {} //外部js }} this.mapJs = new initMap(); this.mapJ

openlayers/// Puppeteer.js

1.定位;https://viglino.github.io/ol3-ext/examples/map.interaction.geolocationdraw.html 2 .添加Overlay div遮住鼠标事件处理 var point_div = document.createElement('div'); point_div.className = "css_animationBui mapEleClass"; point_div.style.background = &quo

[原创.数据可视化系列之一]使用openlayers 3 显示聚合数据

在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的显示小点,比如百度地图就是这样的:另一种方法是使用聚合,让相邻的点聚合成一个点,也能解决这个问题. 使用openlayers 3 地图组件比较容易解决这个问题,关键是 ol.source.Cluster 对象,这个对象有两个参数,一个是聚合距离,一个是原始的点数据.代码片段如下: 1:初始化ol3

Openlayer 3 最简单的弹出框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出框</title> <link rel="stylesheet" href="css/ol.css"> <script src="js/jquery-1.11.3.js">

Openlayer 3 的点击弹出框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/ol.css" type="text/css"> <script src="

openlayers应用（二）：加载百度离线瓦片

上一篇文章介绍了使用openlayers3加载百度在线地图,对某些项目或应用场景比如不允许上外网的单位,某些项目只针对一定区域地图加载应用,比如一个县的地图,可以采用下载百度瓦片地图,在服务器或者本机单独部署的方式进行. 本篇主要讲述如何使用openlayers3调用下载的百度离线瓦片地图.瓦片地图下载器,网上有很多,在此不做详细描述. Openlayers3加载离线百度瓦片地图,效果以及代码如下: 代码如下: <!DOCTYPE html> <html xmlns="http

openlayers3应用一：显示百度地图

在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制. 本文讲述在openlayers3中使用百度地图的方法.调用百度地图,也是经过了几番周折贴上显示代码,以免其他人调用百度地图走弯路.效果如下: 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

Openlayer 3加载本地ArcGIS切片

第一篇博客,简单的开个头吧.希望自己能坚持记录.一般什么情况什么人需要这样的需求呢,伐木的光头强大哥说我们在深山老林里,没网的啊,地图就手机本地duang的加载一下吧.那么Server啊就要丢掉丢掉.丢掉手表丢掉外套,丢掉背包再丢掉唠叨,咳咳,跑题了.来看看具体步骤吧,非常简单但详细. 1. 制作切片的数据基本信息如下: 图层数据信息: 地理坐标系: GCS_WGS_1984 基准面: D_WGS_1984 本初子午线: Greenwich 角度单位

OpenLayers学习笔记（十一）— 飞机速度矢量线预测

在机场使用的空管系统中,飞机的速度矢量线差不多是这样的: 模拟飞机飞行时的速度矢量线,这里就大概做个类似效果: 什么叫速度矢量线呢,个人理解就是根据飞机当前速度和航向预测它在未来一段时间内的飞机轨迹,以此来监测飞机是否偏离. 如何运行代码已经在上一篇博客<动态加载JSON数据模拟航迹线>讲过了. 在这个模拟DEMO中,主要存在四个图层,分别为地图底图.航迹线图层.速度矢量线图层.飞机图层(我用的点代替飞机图标),因为我自身有一个需求就是控制航迹和速度矢量线的显示与隐藏,这跟本文没多大关系. 技

OpenLayers学习笔记（十）— 动态加载JSON数据模拟航迹线

在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线作者:狐狸家的鱼 GitHub:八至前提需求需要以JSON数据动态加载绘制飞机轨迹线,飞机图标以加载的坐标为当前实时位置,经过的坐标追加到轨迹线上,标牌始终跟随飞机移动. 简单搭建本地服务器因为要加载本地JSON文件,可能会存在跨域问题,所以在本地搭建一个服务器来加载数据,会更加方便. 1.全局安装http-server npm i

OpenLayers学习笔记（一）—在线加载谷歌影像地图&离线加载本地瓦片地图

实现根据在线离线判断加载地图, 在线加载谷歌影响地图, 离线加载本地瓦片地图作者: 狐狸家的鱼 Github: 八至 html代码 <div id="map" tabindex="0" class="map"></div> tabindex="0"是为了启动键盘事件. js代码 //地图中心点 var center = ol.proj.transform([110.06667, 14.66667],

ol3开发离线地图

注意:国内地图均经过加密,尤其是百度地图,经过了二次加密,通常情况下都会存在偏差.所以最好是利用地图下载器下载后面带有“无偏差”的地图,否则需要对经纬度进行转化. 1.需要的前端库文件有jquery.js.ol.js.ol.css.网上百度一番不难找,实在找不到的可以留言我发给你. 2.需要有地图的瓦片图.网上有各类工具:全能电子地图下载器,水经注地图下载器等等,可以免费将百度.谷歌.高德.腾讯等的地图制作成瓦片图后下载下来.同上,百度一番不难找,实在找不到可以留言. 3.首先在body中定义一

OpenLayers中的球面墨卡托投影

最近看OpenLayers,研究到地图投影时找到官方的文档,就翻译了一下,由于英文能力差,翻译不好的地方,请看原文原文地址:http://docs.openlayers.org/library/spherical_mercator.html 球面墨卡托投影该文档说明了什么是球面墨卡托投影以及何时使用该投影.文档中包含一些必要的背景知识.商用图层的代码演示.添加WMS图层以及使用OpenLayers进行投影变换的内容.要求读者对投影变换和OpenLayers有一个基本的了解. 什么是球面墨卡托

openlayers5实战--踩坑总结

1.接口返回圆心坐标和半径,直接通过new Circle(center,radius)添加圆形feature变小问题. 解决办法: new Feature()的geometry参数不能直接赋值new Circel()得到的geometry, 要通过‘ol/geom/Polygon.js’中的fromCircle方法将new Circel()得到的geometry转化一遍然后赋值给new Feature()的geometry. 另:如果接口直接返回的坐标点画圆,则使用‘ol/geom/Po

OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题

环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果地图放大缩小对统计图的大小无影响以饼状图为例 1.添加地图,并渲染统计图所在的点位, vector是渲染feature需要用的图层,一定要保证在所有图层的最前方,否则渲染的feature会被遮盖,(地图量算时由于这个问题搞了一上午) sourceMeasure = new ol.source.Vector

OpenLayers 3 入门教程

OpenLayers 3 入门教程摘要OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计.版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它的落后. OL3已运用现代的设计模式从底层重写. 最初的版本旨在支持第2版提供的功能,提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式.与版本2一样,数据可以被任意投影.最初的版本还增加了一些额外的功能,如能够方便地旋转地图以及显示地图动画. OpenLayers 3同时设计了一些主要的新功

OpenLayers 案例一

序 OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问. 例子 <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="../css/ol.css"> <?--链接一个外部样式表--> <style> .map2 {

Openlayer4 - 最好最强大的开源地图引擎

Openlayer4 - 最好最强大的开源地图引擎 # githubhttps://github.com/openlayers/openlayers # 官网http://openlayers.org/ # APIhttp://openlayers.org/en/latest/apidoc/index.html # 中文教程http://weilin.me/ol3-primer/ 坐标可以在这里查询 # 百度接口http://api.map.baidu.com/lbsapi/getpoint/i

4326 转 3857 js

热门专题