Openlayers 3 中心地图

2024-06-26

我在唱歌开放层 3 http://openlayers.org/en/v3.0.0/apidoc/显示地图。我想使用经纬度坐标将地图居中。 我正在使用快速入门代码 http://openlayers.org/en/v3.1.1/doc/quickstart.html首先。 使用此代码,我无法更改地图的中心。我认为这与Spherical Mercator projection。唯一的问题是,我只有经纬度坐标。

有谁知道如何将 openlayers v3 中的地图居中?


您需要使用以下命令将经/纬度坐标转换为正确的投影(或坐标系)

var olCoordinates = ol.proj.transform([lon, lat],"WGS84", "EPSG:900913")

现在您可以使用坐标设置中心。

不同的投影有不同的代号。 WGS84 是“正常”经/纬度,EPSG:900913 是 google 地图、openstreetmap 和 bing 等网络地图中常用的投影。

我认为 OpenLayers 3 内置了对 WGS84/EPSG:4326 (lon/lat) 转换的支持,但如果您需要与其他坐标系进行转换或从其他坐标系转换,您可以包含 proj4js 库。 Openlayers 将与该库集成,并能够以相同的方式进行转换。

转换文档http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html

Proj4 库https://github.com/proj4js/proj4js https://github.com/proj4js/proj4js

编辑: 在您提到的示例中,中心位置实际上是用经度/纬度设置的。

view: new ol.View({
    center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4
})

EPSG:4326 实际上与 WGS84 相同,EPSG:3857 与 EPSG:900913 相同。这很令人困惑。我自己也去过那里。

您只需将数字 37.41 和 8.82 更改为您的经/纬度坐标。如果您想在初始化后更改中心位置,则需要使用 setCenter();

map.getView().setCenter(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'))
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Openlayers 3 中心地图 的相关文章

  • 如何在 js.erb 中使用 Ruby 代码?

    我可以使用以下方式在模态中渲染部分内容escape javascript在js erb文件代码中 body append my modal modal show 但是 我似乎无法获得以下结果 console log ERB 将输出一个纯字符
  • Javascript 字符串/整数比较

    我在 HTML 中存储一些客户端参数 然后需要将它们作为整数进行比较 不幸的是我遇到了一个我无法解释的严重错误 该错误似乎是我的 JS 将参数读取为字符串而不是整数 导致我的整数比较失败 我生成了一个错误的小例子 我也无法解释 运行时以下返
  • Webpack、Sass - 超出最大调用堆栈大小

    我正在为我的 JS 应用程序使用 Webpack 对于样式 我使用 Sass 我的应用程序非常大 所以我使用了很多 mixins 和 includes 在过去的几天里 虽然应用程序的 SASS 数据增长了一些 我多次遇到相同的以下错误 未捕
  • 如何捕获jquery中的任何点击事件[重复]

    这个问题在这里已经有答案了 我有一个按钮 当单击它时 会显示一个带有图像的 div 例如聊天的表情符号面板 如果我再次单击它 div 会隐藏 但我想要做的是 如果 div 已经显示 然后我单击页面的任何其他内容 我想隐藏它 我试过这个 my
  • 如何在react中返回点击元素的属性?

    我想知道是否有一种简单的方法来获取单击元素的属性React js function App return
  • 获取访客的 Optimizely A/B 测试和变化

    当我在网站上运行实验时 我希望能够找出当前访问者看到的测试和变体 我无法找到如何做到这一点优化Javascript API https www optimizely com docs api 您可以获得第一个正在运行的实验的 ID 假设您有
  • 如何使用React Native在屏幕上绘图?

    我正在尝试在 React Native 中实现一个 Android 绘图应用程序 我正在使用 PanResponder 但我不知道如何获取用户触摸的部分的坐标 我尝试过使用react native svg但我不知道该放在哪里PanRespo
  • Bootstrap 页脚不在底部

    我试图强制我的页脚位于网站底部 我不希望它在滚动时粘住 只是在向下滚动网页时出现在底部 目前 网页显示时页脚位于内容下方 我添加了这样的代码bottom 0 并发现它粘住了并且不适合我的网站 我还添加了这样的代码html body heig
  • 防止 Node.js 中的 SQL 注入

    是否有可能以与 PHP 具有防范 SQL 注入的预准备语句相同的方式防止 Node js 中的 SQL 注入 最好使用模块 如果是这样 怎么办 如果不 有哪些例子这可能会绕过我提供的代码 见下文 一些背景 我正在制作一个 Web 应用程序
  • 如何在 Chrome 中将 Set 转换为数组?

    如何将集合转换为数组 https stackoverflow com questions 20069828 how to convert set to array给出了将 Set 转换为 Array 的三个答案 目前在 Chrome 浏览器
  • Javascript CORS 图像/画布操作

    我正在尝试从另一个已配置为允许 CORS 的域检索图像 并操纵像素 然后我想显示结果并能够操纵结果 我可以在我请求的图像上使用 getImageData 和 toDataURL 所以我知道服务器部分可以工作 但是 当我尝试将图像的 src
  • 发送带有图像的嵌套 JSON

    我一直在尝试研究一种能够通过 Ajax 将嵌套 JSON 请求发送回服务器的方法 根据我的理解 我们主要用于向服务器发送图像或文件的 formdata 在这种情况下不起作用 因为 FormData 似乎不处理嵌套对象 这就是我需要发送的有效
  • javascript 中的工厂模式与构造函数模式[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我看到了关于 javascript 设计模式的教程 虽然教程很好 但它给我留下了很少的问题 正如我所见 工厂和构造函数产生相同的结果
  • 从组件刷新/重新加载 ember 路由

    我有一个组件 它实际上是一个模式对话框 当我完成该对话框并按 确定 按钮时 我想留在打开该对话框的停留页面上 这并不难 但问题是该对话框更改了数据 我通过 REST 调用获取数据 因此我需要刷新已经所在的路线以反映数据更改 因为我是从组件中
  • 过滤数据表中的行

    我目前的 JQuery 插件 DataTables 工作正常 并且我在页面顶部插入了一个按钮来进一步过滤列表 我还使用了 DataTables 内置的搜索栏 我希望按钮向下过滤表格 并只显示包含特定值的行 下面是我一直在做的事情 但似乎没有
  • 如何从 Instagram 的 media_preview 原始数据重新创建预览?

    如果您从 Instagram 的 API 获取 JSON 数据 您会发现media previewkey 其值是一些 Base64 编码的数据 它看起来确实像一些非常小的预览二进制数据 也许是压缩的 Take 这个帖子 https www
  • 将json数据从servlet传递到jsp到js文件

    我得到了这个创建 JSON 数据的 servlet 我想将此数据传递到一个 jsp 页面 该页面应该通过 InfoVis 工具包显示数据 servlet java JSONObject json new JSONObject JSONArr
  • 如何使用 JQuery 创建新的 img 标签,并使用 JavaScript 对象中的 src 和 id?

    我从基本意义上了解 JQuery 但对它绝对是新手 并且怀疑这很容易 我在 JSON 响应中获得了图像 src 和 id 转换为对象 因此在 responseObject imgurl 和 responseObject imgid 中获得了
  • Promise链基本问题

    我正在尝试理解 Promise 我创建了一些有效的承诺链 而另一些则无效 我已经取得了进步 但显然缺乏基本概念 例如 以下承诺链不起作用 这是一个愚蠢的例子 但说明了问题 我正在尝试在链中使用 Node 的函数 randomBytes 两次
  • ASP.NET MVC3 Ajax.ActionLink - 条件确认对话框

    我有一个 Ajax ActionLink 仅当满足某些条件 用户有未保存的更改 时 我才希望显示一个确认对话框 我创建了一个 JavaScript 函数 它根据需要显示确认对话框 并根据响应返回 true 或 false 我将其绑定到 Ac

随机推荐