gpt4 book ai didi

javascript - OpenLayers map 未渲染

转载 作者:行者123 更新时间:2023-11-28 02:28:37 26 4
gpt4 key购买 nike

我曾尝试使用 google api 在我的网站上制作 map ,但现在要使用它,您需要支付相当多的费用。无论如何,我发现了 OpenLayers api 及其酷炫,但是当我请求 map 以我当前位置为中心时, map 不再呈现。-。我的控制台没有出现任何错误,我什至使用了 promises,所以一旦我获得坐标, map 就会开始渲染。

这是我的 index.js 代码

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

var lng;
var lat;

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
lat = Promise.resolve(position.coords.latitude);
lng = Promise.resolve(position.coords.longitude);
Promise.all([lat, lng]).then((res) => {
console.log(res);
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [lat, lng],
zoom: 0
})
});
})
})
}

这是我的html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>

为了运行所有这些,我正在使用 Node ,如果我从条件中获取 const map , map 将显示,但那不是我想看到的中心 :D

最佳答案

OpenLayers map 的默认投影是 EPSG:3857 .地理定位 API 接收到的坐标在投影中 EPSG:4326 .

您需要将接收到的坐标转换为 EPSG:3857 (例如 fromLonLat )或将 map 的投影设置为 EPSG:4326 .

关于javascript - OpenLayers map 未渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52364366/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com