如何解决如何根据特定坐标使地图居中
我正在使用 JavaScript 学习 OpenLayers。我正在关注本教程
http://openlayersbook.github.io/ch01-getting-started-with-openlayers/example-01.html
代码工作正常,但是当我添加以下行时:
var birmingham = ol.proj.transform([-1.81185,52.44314],'EPSG:4326','EPSG:3857');
并输入
npm start or
npm run start
什么都不会显示。当我删除上述代码行时,地图通常会出现在本地主机上。 我希望地图的中心设置为特定坐标
请让我知道上面提到的代码行有什么问题以及如何修复它。 代码:
import 'ol/ol.css';
import {Map,View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Projection from 'ol/proj/Projection';
import * as olTransform from 'ol/transform';
var source = new OSM()
var layers = [new TileLayer({
source: source
})];
ol.projection.transform
//var birmingham = ol.proj.transform([-1.81185,'EPSG:3857');// this line results in not to show the map
var view = new View({
projection: 'EPSG:4326',center: [0,0],zoom: 2,maxZoom: 40,zoomFactor: 4
});
const map = new Map({
target: 'map',layers: layers,view: view
});
解决方法
避免混合模块和完整的构建语法。
如果视图投影为 EPSG:4326 则不需要变换,直接使用 lon/lat 值
import 'ol/ol.css';
import {Map,View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
var source = new OSM()
var layers = [new TileLayer({
source: source
})];
var view = new View({
projection: 'EPSG:4326',center: [-1.81185,52.44314],zoom: 2,maxZoom: 40,zoomFactor: 4
});
const map = new Map({
target: 'map',layers: layers,view: view
});
对于其他投影使用
import 'ol/ol.css';
import {Map,View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';
var source = new OSM()
var layers = [new TileLayer({
source: source
})];
var view = new View({
projection: 'EPSG:3857',center: fromLonLat([-1.81185,'EPSG:3857'),view: view
});
EPSG:3857 是 View
和 fromLonLat
的默认值,可以省略。 fromLonLat
相当于
import {transform} from 'ol/proj';
transform([-1.81185,'EPSG:4326',
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。