Openlayers3 API中的几处坐标系,分别代表的含义总结

在openlayer中引入切片,添加各种服务,视角的定义等情况下都有对projection的属性进行设置,有的是默认值,有的需要自定义,但是他们与请求的服务之间或多或少存在着千丝万缕的联系。或者互不影响。本人在实践过程中,对经常出现的几个projection的理解进行了总结,直接看代码:

<html>
  <head>
    <title>dzj geoServer wms service</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
          //加载geoserver的wms服务,注意坐标系,这里虽然加载的是EPSG4326的wms服务,
          //但是无需进行设置为数据发布之前的相关坐标系信息(比如我们一般都是发布的地图是wgs84的地理坐标系),
          //因为geoserver服务中已经包含了各种投影信息,会根据各种投影参数来进行转换,
          //使得地图的服务加载按照该投影的方式,因此在代码中设置的projection就是该
          var layers=[      
                new ol.layer.Tile({      
                  
                  source:new ol.source.TileWMS({      
                      url:'http://localhost:8080/geoserver/gwc/service/wms', 
                      // extent:extent,   
                      params:{      
                          'LAYERS':'szdt:yanshenqujian',//postgis:procity,postgis:loccity 此处可以是单个图层名称,也可以是图层组名称,或多个图层名称  
                          
                          'FORMAT': 'image/png',
                          'VERSION': '1.1.1', 
                          'TILED':true ,
                          'SRS':'EPSG:12345' ,//设置了错了也没有用,默认为数据发布时的空间参考,比如我发布的时候用的是4326,但是依旧能显示
                      },
                       projection:'EPSG:4326' , //决定了请求切片的投影坐标系    
                      // serverType:'geoserver'    //服务器类型  
                  })     
              })      
          ]; 
          // var pos = ol.proj.transform([114.23771356083947,22.56698437084834], 'EPSG:4326', 'EPSG:3857');
          var pos=ol.proj.fromLonLat([114.23771356083947,22.56698437084834]);
        var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
              center: pos,//[114.23771356083947,22.56698437084834],//pos
              zoom: 12,
              projection: 'EPSG:3857'//需要与上面center的坐标值对应的坐标系相同,这个值设置后不会影响地图的坐标系,
            })
        });
        map.addControl(new ol.control.ScaleLine());
        // var pos = ol.proj.transform([114.23771356083947,22.56698437084834], 'EPSG:4326', 'EPSG:3857');
        // map.getView().setCenter(114.23771356083947,22.56698437084834);错误的?
        // 
         
        
     
    </script>
  </body>
</html>

 

转载自:https://blog.csdn.net/qq_26991807/article/details/81712082

You may also like...