OpenLayer3调用天地图示例
最近，工作中有需要用OpenLayers脚本库调用天地图的WMTS服务接口，由于这两个都是刚开始接触，所以是摸着石头过河，遇到了地图显示不了的问题。
我也通过用浏览器直接提供的地址打开，来进行参数对比。再看了OpenLayers和天地图的相关文档和网络上的文章，也加入了相关群下载相关资料浏览并询问群友，还是未果。
虽然官网http://www.zjditu.cn/resource/apihelp 有这么一个例子，但是我替换成提供的正式地址，并没有显示地图（每个层级都是需要的，否则只能通过放大或者缩小才能看到，还有layer的值大小写需要匹配）。
最后还是让提供方给了个例子，完成了实现（刚开始要，没给，不知道是忙还是什么情况）。
为了让刚接触这种需求的广大程序猿能够少走点弯路，下面给出示例，有注释。有些参数不懂或者想使用复杂功能的，则查阅下列网址：
OpenLayers官网：https://openlayers.org/
扯淡大叔的教程：http://anzhihun.coding.me/ol3-primer/
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
</head>
<body>
<div>
选中的经纬度：
<input id="Coordinates" type="text" value="" disabled="disabled" style="width: 350px;" />
</div>
<div id="map" class="map" style="height: 493px;"></div>
<div id="div_overlay" style="display: none;">
<div id="marker" title="">
<img src="position_orange.png" />
</div>
<div id="popup" title=""></div>
</div>
<script>
var projection = ol.proj.get('EPSG:4326');//设置坐标系
var projectionExtent = projection.getExtent();
//分辨率
var resolutions = [
1.40625,
0.703125,
0.3515625,
0.17578125,
0.087890625,
0.0439453125,
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
0.0006866455078125,
0.00034332275390625,
0.000171661376953125,
0.0000858306884765625,
0.00004291534423828125,
0.000021457672119140625,
0.000010728836059570312,
0.000005364418029785156,
0.000002682209014892578,
0.000001341104507446289
];
//瓦片矩阵
var matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; var centerXY = "121.54449462890625,29.875946044921875";//地图中心点，默认宁波市
var center = ReturnCenter(centerXY); var emap_attributions = new ol.Attribution({
html: '<span class="span_switch" onclick="ChangeToImgMap()">点击切换地图类型</span>'
});
function EMap() {
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([
new ol.control.MousePosition()//是否显示鼠标所在地图点的经纬度
]),
layers: [
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "中国矢量1-14级",
url: "http://t{0-6}.tianditu.com/vec_c/wmts",
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,//地图缩小后，防止在一个页面出现多个一样的地图
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(0, 15),//slice方法不清楚的请百度
matrixIds: matrixIds.slice(0, 15)
})
}),
maxResolution: resolutions[0],
minResolution: resolutions[14]
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "中国矢量注记1-14级",
url: "http://t{0-6}.tianditu.com/cva_c/wmts",
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(0, 15),
matrixIds: matrixIds.slice(0, 15)
})
}),
maxResolution: resolutions[0],
minResolution: resolutions[14]
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "浙江矢量15-17级",
url: "http://srv{0-6}.zjditu.cn/ZJEMAP_2D/wmts",
layer: "TDT_ZJEMAP",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(15, 18),
matrixIds: matrixIds.slice(15, 18)
})
}),
maxResolution: resolutions[14],//指定当前级数的上一级来平滑过渡，否则滚轮缩放当前级数会显示空白
minResolution: resolutions[17]
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "浙江矢量注记15-17级",
url: "http://srv{0-6}.zjditu.cn/ZJEMAPANNO_2D/wmts",
layer: "ZJEMAPANNO",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(15, 18),
matrixIds: matrixIds.slice(15, 18)
})
}),
maxResolution: resolutions[14],//指定当前级数的上一级来平滑过渡，否则滚轮缩放当前级数会显示空白
minResolution: resolutions[17]
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "XX县矢量18-20级",
url: "替换成你需要的wmts服务接口地址",
layer: "jsemap",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(18, 21),
matrixIds: matrixIds.slice(18, 21)
})
}),
maxResolution: resolutions[17],//指定当前级数的上一级来平滑过渡，否则滚轮缩放当前级数会显示空白
minResolution: resolutions[20]
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
attributions: emap_attributions,
name: "XX县矢量注记18-20级",
url: "替换成你需要的wmts服务接口地址",
layer: "jsemapanno",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions.slice(18, 21),
matrixIds: matrixIds.slice(18, 21)
})
}),
maxResolution: resolutions[17],//指定当前级数的上一级来平滑过渡，否则滚轮缩放当前级数会显示空白
minResolution: resolutions[21]
})
],
target: "map",
view: new ol.View({
center: center,//地图中心点
projection: projection,//投影类别
zoom: 10,//默认缩放级别
maxZoom: 20,//最大缩放级别
minZoom: 1//最小缩放级别
})
}); //鼠标点击时设置中心点覆盖物
GetElementId("map").onclick = function () {
coordinates = GetElementsByClassName('ol-mouse-position')[0].innerHTML;
SetPosition(map, coordinates);
};
} EMap();//显示E电子地图 function GetElementId(id) {
return document.getElementById(id);
}
function GetElementsByClassName(className) {
return document.getElementsByClassName(className);
}
//中心点处理
function ReturnCenter(centerXY) {
var centerObj = centerXY.split(',');
var centerX = centerObj[0];
var centerY = centerObj[1];
return [parseFloat(centerX), parseFloat(centerY)];//一定要转换下类型，否则拖拽后，地图就消失了
}
//设置中心点覆盖物
function SetPosition(map, coordinates) {
GetElementId("Coordinates").value = coordinates; var newcenter = ReturnCenter(coordinates);
// Position marker
var marker = new ol.Overlay({
position: newcenter,
positioning: 'bottom-center',
element: document.getElementById('marker'),
stopEvent: false
});
map.addOverlay(marker);
}
</script>
</body>
</html>
可将上述代码直接复制到txt文件中并保存html，即可成功浏览。点击鼠标可以显示覆盖物并把坐标值显示在上面的文本框中。
附上坐标覆盖物图片和效果图：
OpenLayer3调用天地图示例的更多相关文章
- OpenLayer3调用天地图，拖拽后，地图消失的问题[已解决]
拖拽后,地图直接消失了,而且右上角的坐标变成了NaN,NaN 后来经过测试发现,原来是自己封装有问题,坐标点一定要用parseFloat()转换下,但不清楚为什么页面刚开始加载的时候没有问题,总之能解 ...
- Javascript调用ActiveX示例
Javascript调用ActiveX示例 写一个ActiveX控件比如叫做MyNameSpace.SecreteInfo,安装在客户机器上,这样可以通过c++获取到机器的几乎任何信息. 在网 ...
- 用VS2005写一个 C 的类库和用 C#来调用的示例
一.用VS2005写一个 C 的类库的步骤: (1).建立一个空的Visual C++项目 (2).这时候在项目中可以看见 三个空目录 选中 "源文件" 目录,然后点鼠标右键,在弹 ...
- EzHttp 流传输调用代码示例
EzHttp框架提供的内置接口,用于文件流等传输 流传输调用代码示例 内置接口: public interface IEzStreamHandler { Task<byte[]> GetD ...
- vc调用dll 示例
其实,调用dll文件的方法很多,不一定要使用LoadLibrary函数.如果使用的话,你就要预先声明dll中的函数,很麻烦. 下面是我使用dll时的一点技巧,就是引入lib文件,可以参考: 一．Win ...
- AXIS2远程调用WebService示例（Eclipse+AXIS）
转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/10/3071584.html 我们将Web Service发布在Tomcat或者其他应 ...
- 2019年以后ArcGIS 调用天地图的资源URL
2019年1月1日起,天地图做出如下变更,导致直接在Arcgis/ArcMap中添加WMTS服务不能用了. 国家天地图解释的很清楚,注册个人用户就可以了. 原有调用方式不变,只要在URL 后添加“&a ...
- SpringCloud调用服务示例
SpringCloud調用服務示例. SpringCloud简介: Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务 ...
- [C#/Java] C#中调用Servlet示例
需求 通用消息接口使用servlet作为服务器端服务接口,第三方应用程序通过http post的方式调用servlet,实现与通用消息接口的调用连接. 参数说明如下: msgTitle:消息标题,描述 ...
随机推荐
- 关于Struts传递json给easyui的随笔
今天在公司写测试代码,由于公司用的是ssh框架做的商城项目,我想先实现下简单的增删改查,奈何没有很好的后台页面(毕竟不能测试代码直接在他的项目里改啊) 所以想到了淘淘商城中有这个后台的管理页面,打算一 ...
- 如何节省 1TB 图片带宽？解密极致图像压缩
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:Gophery 本文由 腾讯技术工程官方号 发布在云+社区 图像已经发展成人类沟通的视觉语言.无论传统互联网还是移动互联网,图像一直占据着 ...
- nginx服务器配置／websocket nginx 配置笔记
server { listen 80; server_name xxx.com; # add_header '*' ; location /u/ { # 反向代理透传客户端ip proxy_set_h ...
- 虚拟主机导入MySQL出现Unknown character set: ‘utf8mb4’
http://www.lmlblog.com/14.html 前几天进行网站搬家,MySQL导入数据的时候,出现以下错误(没有定义的编码集utf8mb4): SQL 查询: ; MySQL 返回:文档 ...
- 【WebApi系列】浅谈HTTP
[01]浅谈HTTP在WebApi开发中的运用 [02]聊聊WebApi体系结构 [03]详解WebApi如何传递参数 [04]详解WebApi测试和PostMan [05]浅谈WebApi Core ...
- 为什么要进行URL编码
我们都知道Http协议中参数的传输是"key=value"这种简直对形式的,如果要传多个参数就需要用“&”符号对键值对进行分割.如"?name1=value1&a ...
- Java泛型解析
1. 概述 在引入范型之前,Java类型分为原始类型.复杂类型,其中复杂类型分为数组和类.引入范型后,一个复杂类型就可以在细分成更多的类型. 例如原先的类型List,现在在细分成List< ...
- 洛谷 P1231 教辅的组成
P1231 教辅的组成 题目背景 滚粗了的HansBug在收拾旧语文书,然而他发现了什么奇妙的东西. 题目描述 蒟蒻HansBug在一本语文书里面发现了一本答案,然而他却明明记得这书应该还包含一份练习 ...
- 对datatable操作经验-排序和分页
1.datatable排序1: public DataTable SortDesc(DataTable dt){ DataView dv = new DataView(); dv.Table = dt ...
- 仿百度糯米TP5项目笔记
需求分析 系统三大模块 商家平台.主平台.前台模块 Thinkphp5.0实战 仿百度糯米开发多商家电商平台网盘下载 (2017-04-24 01:46:23) 转载▼ 第1章 课程简介 本章 ...