要在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;

openlayers3中应用proj4js的更多相关文章

  1. Openlayers3中实现地图的切割

    概述: 本文讲述如何在Openlayers3中结合canvas实现对地图的切割. 效果: 全图 切割北京区域 切割河北区域 实现: <html xmlns="http://www.w3 ...

  2. Openlayers3中实现台风风圈绘制算法

    概述: 台风的风圈的NE.NW.SW.SE四个方位的影响范围是不一致,本文介绍一种简单的风圈的绘制方法,并在OL3中展示. 实现效果: 实现代码: 1.数据格式 var Configs = { CIR ...

  3. OpenLayers3中wfs的属性查询

    var vector = new ol.layer.Vector({ source: new ol.source.Vector({ format: new ol.format.GeoJSON(), u ...

  4. openLayers3 中实现多个Overlay

    此篇的目的是为了记录下用Overlay的一些操作. 其实实现多个就是创建多个div,然后给每个div绑定Overlay. //页面加载完函数 --显示个关键点的名称 window.onload = f ...

  5. openlayers3中Overlay用法

    Overlay 从名字看,是覆盖图.覆盖物的意思,主要的用途就是在地图之上再覆盖一层,用以显示额外的可见元素,可见元素一般是 HTML 元素,利用 overlay,可以将可见元素放置到地图的任意位置, ...

  6. 矢量切片(Vector tile)番外一:Proj4js

    说明:番外篇是对正篇矢量切片(Vector tile)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...

  7. 【GISER && Painter】矢量切片(Vector tile)番外一:Proj4js

    说明:番外篇是对正篇矢量切片(Vector tile)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...

  8. openlayers3应用一:显示百度地图

    在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制. 本文讲述在openlayers3中使用百度地图的方法.调用百度地图,也是经过了几番周 ...

  9. Openlayers2中统计图的实现

    概述: 在前文中.介绍了Arcgis for js和Openlayers3中统计图的实现.在本文,书接上文.介绍在Openlayers2中,统计图的实现. 实现: 在Openlayers2中,popu ...

随机推荐

  1. ORB-SLAM 代码笔记(五)Frame类

    Frame类的成员变量主要包含从摄像头获取的图像的 1. 特征点信息(关键点+描述字) 2. 尺寸不变特征所用金字塔信息,这些都定义在ORBextractor对象中 3. 词袋模型参数,用于跟踪失败情 ...

  2. table调整td宽度整理-完美解决--费元星前端

    个人整理例子,留下做个备份 最终重要的几句话 0.日期格式 format="ognl:dateFormat" <td align="center"> ...

  3. 纯HTML+CSS实现阿童木头像

    他有十万马力,能上天能入地:他分辨善恶,是勇敢正义化身:1963年,他登上荧幕,在日本创下了未曾有过的高收视率……他叫阿童木,一个纯真.善良.勇 敢的机器娃娃.“阿童木之父”手冢治虫曾说,将阿童木生日 ...

  4. Android中通过拨号调起应用的实现方式及特殊情况处理

    Android中有时我们会有这样的需求:通过拨号调起我们的程序.这个需求如何实现呢? 思路当然是在我们的应用中实现一个广播接收器(BroadcastReceiver),对打电话时系统发出的广播进行拦截 ...

  5. C++学习014函数值传递和地址传递

    当我们给一个函数传参数的时候,可以直接值传入函数,也给可以把一个地址传入函数 区别就是一个本身不被改变,而另一本身也在改变, 在开发时候都会用到, 这里做下记录 #include <iostre ...

  6. Kotlin怎样使用Android的Dagger2

    作者:Antonio Leiva 时间:Apr 11, 2017 原文链接:https://antonioleiva.com/dagger-android-kotlin/ 在Android上,创建去耦 ...

  7. Python升级3.6 强力Django+Xadmin打造在线教育平台

    第 1 章 课程介绍 1-1 项目演示和课程介绍: 第 2 章 Windows下搭建开发环境 2-1 Pycharm.Navicat和Python解释器的安装: Pycharmhttp://www.j ...

  8. Python简要标准库(3)

    shelve 若只需要一个简单的存储方案,那么shelve模块可以满足你大部分的需要,你所需要的只是为它提供文件名.shelve中唯一有趣的函数是open,在调用的时候他会返回一个Shelf对象 注意 ...

  9. Mysql性能优化四:分库,分区,分表,你们如何做?

    分库分区分表概念 分区 就是把一张表的数据分成N个区块,在逻辑上看最终只是一张表,但底层是由N个物理区块组成的 分表 就是把一张数据量很大的表按一定的规则分解成N个具有独立存储空间的实体表.系统读写时 ...

  10. 《python机器学习—预测分析核心算法》:理解数据

    参见原书2.1-2.2节 新数据集就像一个包装好的礼物,它充满了承诺和希望! 但是直到你打开前,它都保持神秘! 一.基础问题的架构.术语,机器学习数据集的特性 通常,行代表实例,列代表属性特征 属性, ...