openlayers3中应用proj4js

要在openlayers3中应用proj4js,需要在html中引用proj4js,然后在引用所需要的projection的js定义,如 http://epsg.io/21781-1753.js

然后在openlayers中就会支持这种EPSG:21781的坐标转换。

 <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script>
    <script src="http://epsg.io/21781-1753.js" type="text/javascript"></script>

http://epsg.io/21781-1753.js会返回一个js,这个js一旦执行就会给proj4添加一个支持的projection,如下:

proj4.defs("EPSG:21781","+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel +towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs");

下面是openlayer的实现

/**
 * Fetches a Projection object for the code specified.
 *
 * @param {ol.proj.ProjectionLike} projectionLike Either a code string which is
 *     a combination of authority and identifier such as "EPSG:4326", or an
 *     existing projection object, or undefined.
 * @return {ol.proj.Projection} Projection object, or null if not in list.
 * @api stable
 */
ol.proj.get = function(projectionLike) {
  var projection;
  if (projectionLike instanceof ol.proj.Projection) {
    projection = projectionLike;
  } else if (goog.isString(projectionLike)) {
    var code = projectionLike;
    var projections = ol.proj.projections_;
    projection = projections[code];
//判断proj4js被引入进来了
if (ol.ENABLE_PROJ4JS && !goog.isDef(projection) && typeof proj4 == ‘function‘) {       //如果需要的code=EPSG被引入进来了,就会proj4.defs(code)返回定义,并加入到openlayers中
      var def = proj4.defs(code);
      if (goog.isDef(def)) {
        var units = def.units;
        if (!goog.isDef(units)) {
          if (goog.isDef(def.to_meter)) {
            units = def.to_meter.toString();
            ol.proj.METERS_PER_UNIT[units] = def.to_meter;
          }
        }
        projection = new ol.proj.Projection({
          code: code,
          units: units,
          axisOrientation: def.axis
        });
        ol.proj.addProjection(projection);
        var currentCode, currentDef, currentProj, proj4Transform;
        for (currentCode in projections) {
          currentDef = proj4.defs(currentCode);
          if (goog.isDef(currentDef)) {
            currentProj = ol.proj.get(currentCode);
            if (currentDef === def) {
              ol.proj.addEquivalentProjections([currentProj, projection]);
            } else {
              proj4Transform = proj4(currentCode, code);
              ol.proj.addCoordinateTransforms(currentProj, projection,
                  proj4Transform.forward, proj4Transform.inverse);
            }
          }
        }
      } else {
        goog.asserts.assert(goog.isDef(projection));
        projection = null;
      }
    }
  } else {
    projection = null;
  }
  return projection;
时间: 2024-10-02 03:44:54

openlayers3中应用proj4js的相关文章

OpenLayers3基础教程——OL3只之Popup

概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay代替OL2的Popup功能. 接口简介: overlay跟ol.control.Control一样,是一个可见的窗口,但是不和Control一样,不是固定在地图区域的某个部分,而是显示在一个地图坐标上,随着地图的移动或者缩放而移动的.其调用方式如下: var popup = new ol.Overlay({ element: document.getElementById('popup') }); pop

Arcgis for js,Openlayers中加载GeoJSON

概述: 在前文中,讲述了在JAVA环境下如何将shp转换为GeoJSON,在本文,分别讲述在Arcgis for js,Openlayers2和Openlayers3中加载展示GeoJSON. 实现: 1.Openlayers2中加载GeoJSON 在OL2中,可以直接调用OL2的借口实现GeoJSON的加载,代码示例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT

openlayers3应用(一):显示百度在线地图

在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制. 本文讲述在openlayers3中使用百度地图的方法.调用百度地图,也是经过了几番周折 贴上显示代码,以免其他人调用百度地图走弯路.效果如下: 调用代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

WKT学习笔记

来自http://support.supermap.com.cn/DataWarehouse/WebDocHelp/OnlineHelp/JavaScript/files/SuperMap/Projection-js.html SuperMap.Projection 坐标转换类.这个类封装了与 proj4js 投影对象进行交互的几种方法. SuperMap 默认支持 EPSG:4326, CRS:84, urn:ogc:def:crs:EPSG:6.6:4326, EPSG:900913, EP

OpenLayers 3 之 添加地图网格

前言 在地图上渲染一层类似于经纬线的网格层,更有利于准确的确定区域,在WGS84坐标系下,以度,分,秒为单位,称之为"经纬网",其网格是以经纬线来划分的.在OpenLayers3中,渲染网格的类是"ol.Graticule".本文中,我结合实例,讲解"ol.Graticule"的用法和具体实现. 示例 初始化一个网格层,然后将其关联的map对象设置为map(预先定义好的),网格层便会在关联的地图上渲染.初始化网格层可传的参数和方法下面会说明,例子

OpenLayers3 online build

openlayers3使用了一个比较复杂的build工具,从github上下载下来的代码中并没有build之后的版本,要配置build环境又比较繁琐,好在官方的example中提供了在线的版本,下面就是link: http://openlayers.org/en/v3.0.0/build/ol.js http://openlayers.org/en/v3.0.0/build/ol-debug.js

OpenLayers3基础教程——OL3 介绍interaction

概述: 本节主要讲述OL3的交互操作interaction,重点介绍draw,select以及modify. 接口说明: OL3的interaction继承自ol.interaction.defaults,下面实现了以下几中交互操作: 创建方式为: var interaction = new ol.interaction.InteractionType({options});添加和移除方式为:map.addInteraction(draw);map.removeInteraction(draw)

OpenLayers3基础教程——加载资源

概述: 本节讲述如何在Ol3中加载wms图层并显示到地图中. Ol3下载: 你可以在OL官网去下载,下载地址为http://openlayers.org/download/,也可以去我的百度云盘下载,下载地址为http://pan.baidu.com/s/1o6wwHTo.官网上的最新版本为3.6.0,我的网盘的版本为3.0.0,不过官网上的链接好像是失效的. OL3必须资源引入: OL3必须引入的资源有两个,一个为样式文件,ol.css:一个为js文件,ol.js. OL3加载wms: 在Ol

OpenLayers3基础教程——OL3基本概念

从本节开始,我会陆陆续续的更新有关OL3的相关文章--OpenLayers3基础教程,欢迎大家关注我的博客,同时也希望我的博客能够给大家带来一点帮助. 概述: OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计.版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它的落后. OL3已运用现代的设计模式从底层重写.OpenLayers 3同时设计了一些主要的新功能,如显示三维地图,或使用WebGL快速显示大型矢量数据集,这些功能将在以后的版本