openlayer接入天地图（经纬度投影）（openlayer篇.1）

已于 2022-03-04 14:54:15 修改
阅读量556 收藏 4
点赞数 4
分类专栏： GIS之家 文章标签： gis openlayer 天地图 经纬度投影
于 2022-02-28 16:21:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60387551/article/details/123185446
版权
GIS之家 专栏收录该内容
32 篇文章 19 订阅 ¥99.90 ¥299.90
订阅专栏
本文介绍了如何使用OpenLayers接入天地图，并着重讲解了经纬度投影的设置方法。文中提供了完整的可运行代码，读者可以下载并尝试运行，遇到问题可通过私信与博主交流。
摘要由CSDN通过智能技术生成

GIS之家总目录（订阅之前请先查看该博客）

GIS之家：openlayer+mapbox+arcgis api for js等相关内容的介绍

地图之家总目录

地图之家：cesium+leaflet+地图数据+地图工具等相关内容的介绍

文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。
效果如下所示：
在这里插入图片描述

下面献上完整代码，代码重要位置会做相应解释

<!DOCTYPE html>
<html
了解本专栏 订阅专栏 解锁全文
GIS之家家长
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
订阅专栏
openlayers加载天地图
m0_51431448的博客
02-04 1689
vue集成openlayers，加载天地图
openlayers使用天地图
jia_huining的博客
10-09 908
1. 在天地图官网上申请开发者Key 用户系统https://console.tianditu.gov.cn/api/key2. 调用在线的天地图 直接上源码： const EPSG = 'EPSG:4490'; this.map = new Map({ target: 'map', controls: defaults({ attribution: false, zoom: true, rotate: false, collapsed: false ...
天地图开发实战：Vue结合OpenLayers实现动态点位地图
m0_54340021的博客
06-13 1279
本篇文章详细介绍了如何使用Vue.js和OpenLayers库结合天地图API，开发一个具有点位图标渲染和点击地图获取经纬度功能的地图组件。文章从环境搭建到具体代码实现，逐步引导读者完成地图组件的开发。首先，介绍了必要的库安装和组件模板设置。随后，深入讲解了脚本部分，包括地图初始化、图层添加、坐标转换、事件监听等关键技术点。通过实践，我们学习了如何创建地图实例、添加天地图图层、设置点位图标样式，并实现了点击地图更新点位经纬度的功能。文章最后提供了对组件进行进一步扩展和定制的建议，以满足更广泛的应用需求。
openlayer 获取天地图
kuaile211的专栏
08-15 622
openlayers geoserver 天地图 图层
OpenLayers集成天地图
大强博客
10-21 897
1、安装OpenLayers 使用以下方式将OpenLayers添加为对您的应用程序的依赖 npm i -S ol 此时，您可以要求NPM通过运行以下命令来添加所需的开发依赖项 pm i --save-dev parcel-bundler 2、注册天地图 注册地址：https://uums.tianditu.gov.cn/register 3、创建新应用 创建新应用地址：https://console.tianditu.gov.cn/api/key 4、创建..
OpenLayer加载天地图
阿叁博客
06-15 251
登录天地图的官方网站,创建一浏览器应用，获取其中的键值， （gu）
1.（openlayer篇）openlayer接入天地图（经纬度投影）.zip
03-01
在本教程中，我们将探讨如何使用OpenLayers接入天地图，并处理经纬度投影的问题。 首先，我们需要了解地理坐标系统。常见的有WGS84，这是一个全球通用的地球坐标系统，使用经纬度来表示位置。而天地图通常使用的是...
openlayer打开地图demo
09-11
在这个"openlayer打开地图demo"中，我们将探讨如何使用OpenLayers库来在网页上展示地图。 首先，为了使用OpenLayers，你需要在HTML文件中引入其库的JavaScript文件。通常，你可以通过CDN（内容分发网络）链接获取...
openlayer基本功能代码
01-17
这个"openlayer基本功能代码"的压缩包可能包含了实现OpenLayers基础功能的示例代码，让我们来详细探讨一下这些功能。 1. **基本放大缩小**：OpenLayers 提供了简单的地图缩放和平移操作。`Map`对象是核心，通过它的...
openlayer加载
09-05
1. **下载OpenLayer包**：首先需要从官方网站或其他可信源下载OpenLayer的最新版本，并将其解压到项目的某个子目录下。例如，可以创建一个名为`OpenLayers`的文件夹，并将下载的文件放入其中。 2. **引入OpenLayer...
openlayer使用方位坐标系显示北极地区
10-11
var layer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://your-wms-service-url', params: { 'LAYERS': 'your-layer-name', 'TILED': true, 'CRS': 'EPSG:3338' // 使用匹配的坐标系 ...
Openlayer打开天地图的方法
06-20
使用openlayers连接天地图，从源中获取连接方法。
openlayer6加载天地图.html
08-02
openlayers6.* 加载在线天地图示例，换上自己的tk，直接可以运行
OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果
liu2004051957的博客
11-22 4127
OpenLayers开发库如何实现加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果。
openlayer6 天地图
weixin_44957818的博客
06-30 199
var projection = ol.proj.get("EPSG:4326"); var projectionExtent = projection.getExtent(); var size = ol.extent.getWidth(projectionExtent) / 256; var resolutions = []; for (var z = 2; z < 19; ++z) { resolutions[z] = size / Math.po
OpenLayers 加载天地图
热门推荐
研究与专注
11-09 2万+
要使用 OpenLayers 3 加载天地图，首先要弄清楚天地图发布的原理，以及遵循的发布规范，上一篇中我们提到了使用 OpenLayers 3 加载百度地图，我们提到一般网络地图为了加快访问速度，都采用缓存切片地图的方式，天地图也不例外，而且原理极其类似，但是其切片的索引组织方式还是有一些不同，虽然都是切片，但是切片的起始坐标原点不一致，百度地图是屏幕的左下角，而天地图是屏幕的左上角（与谷歌地图一致）...
openlayers学习——1、openlayers加载天地图
记录生活点滴
01-06 1万+
openlayers加载天地图 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法
openlayers：实现加载天地图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 404
openlayers：实现加载天地图（附完整源码）
OpenLayers6入门，OpenLayers加载天地图
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-10 1041
本章讲解如何使用OpenLayers加载天地图，需要先到天地图申请key。本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）
openlayer 经纬度转屏幕坐标
最新发布
08-22
在OpenLayers中，经纬度坐标需要转换成屏幕坐标（也称为视图坐标），以便在地图的DOM元素上显示。这个过程涉及地图的投影和视图设置。下面是基本步骤： 1. **确定投影**：首先，你需要知道你的地图数据和当前使用的地图投影。OpenLayers提供`ol.proj.getProjectionObject()`函数来获取投影对象。 2. **从地理坐标到投影坐标**：使用`ol.proj.transform()`函数，传入地理坐标和源投影（通常为EPSG:4326 - WGS84），它会返回对应于地图投影的坐标。 ```javascript var latLon = [yourLatitude, yourLongitude]; var projection = map.getView().getProjection(); var projectedCoord = ol.proj.transform(latLon, 'EPSG:4326', projection); ``` 3. **屏幕坐标**：由于地图有一个视图范围（viewport），你还需将其转换为屏幕坐标。这涉及到计算比例尺、中心点以及偏移。你可以使用`map.getSize()`得到地图窗口大小，然后根据视图范围计算： ```javascript var resolution = map.getView().getResolution(); // 比例尺 var center = map.getView().getCenter(); // 视图中心 var pixelCoord = ol.extent.toPixel([projectedCoord[0], projectedCoord[1]], map.getSize(), center, resolution); ``` `pixelCoord`就是经纬度对在屏幕上的像素坐标。 注意，如果你的地图视图经常改变，那么应该在每次变化后更新这些值。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS之家家长

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值