简体   繁体   English

openlayers map 中心问题

[英]openlayers map center issue

I am very new to working with openlayers.我对使用 openlayers 非常陌生。 The tutorial below teaches how to show a map and build local, but the problem is I can not change the center of the map.下面的教程教如何显示 map 并在本地构建,但问题是我无法更改 map 的中心。 Even If I change the location, it shows aways the "zero" point of the map.即使我更改位置,它也会显示 map 的“零”点。

https://openlayers.org/en/latest/doc/tutorials/bundle.html https://openlayers.org/en/latest/doc/tutorials/bundle.html

below are the.js example and.html, the problem is the center: I can't change the map center下面是.js的例子和.html,问题是中心:我不能改变map中心

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

 const map = new Map({
   target: 'map',
   layers: [
     new TileLayer({
       source: new OSM()
     })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

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

Every GIS map has a coordinate system.每个 GIS map 都有一个坐标系。 GIS web applications are very similar to desktop GIS maps, so they have a coordinate system too. GIS web 应用程序与桌面 GIS 地图非常相似,因此它们也有坐标系。 in OpenLayers known as projection.在 OpenLayers 中称为投影。

In OpenLayers, every web app made up of a Map() class that needs a view() to show the map.在 OpenLayers 中,每个 web 应用由Map() class 组成,需要一个view()来显示 map。 By default, every view() use Web Mercator projection or EPSG:3857 as its projection.默认情况下,每个view()都使用Web Mercator projectionEPSG:3857作为其投影。 so in your code, you should put the center in EPSG:3857 coordinate system.所以在你的代码中,你应该把中心放在EPSG:3857坐标系中。 If you want to use center coordinate in WGS 84 or lat-long numbers you should change the view projection to EPSG:4326 like this:如果要在 WGS 84 或经纬度数字中使用中心坐标,则应将视图投影更改为EPSG:4326 ,如下所示:

view: new ol.View({
    center: [0,0],
    projection: 'EPSG:4326',
    zoom: 0
})

Projection is really important for further usages.投影对于进一步的使用非常重要。 If you have some data in a specific projection, Openlayers can't display them on a map with another projection.如果您在特定投影中有一些数据,Openlayers 无法在具有另一个投影的 map 上显示它们。 for example, if you have some data in WGS 84 you can't use them on the default view(cause it's Web Mercator).例如,如果您在 WGS 84 中有一些数据,则不能在默认视图上使用它们(因为它是 Web Mercator)。
So before choosing the view projection read about the limits.因此,在选择视图投影之前,请阅读限制。 eg Basemaps are not available in every projection just like normal layers.例如,底图并非在每个投影中都可用,就像普通图层一样。

Also, there is another option you can use.此外,您还可以使用另一个选项。 Projecting the whole layer on the fly(in client browser) needs a massive process but we always can project a point or a single feature and use them among our layers or base map.动态投影整个层(在客户端浏览器中)需要一个庞大的过程,但我们总是可以投影一个点或单个特征,并在我们的层或基础 map 中使用它们。 In your case, you can only project your center point and use the map in Web Mercator.在您的情况下,您只能投影您的中心点并在 Web 墨卡托中使用 map。 for this option, you need to use fromLonLat() like this:对于此选项,您需要像这样使用fromLonLat()

center: ol.proj.fromLonLat([0,0])

Hope to be clear.希望清楚。

Try this one for your center:试试这个为你的中心:

center: ol.proj.fromLonLat([longitude,latitude])

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM