最近，工作中有需要用OpenLayers脚本库调用天地图的WMTS服务接口，由于这两个都是刚开始接触，所以是摸着石头过河，遇到了地图显示不了的问题。

　　我也通过用浏览器直接提供的地址打开，来进行参数对比。再看了OpenLayers和天地图的相关文档和网络上的文章，也加入了相关群下载相关资料浏览并询问群友，还是未果。

　　虽然官网http://www.zjditu.cn/resource/apihelp 有这么一个例子，但是我替换成提供的正式地址，并没有显示地图（每个层级都是需要的，否则只能通过放大或者缩小才能看到，还有layer的值大小写需要匹配）。

　　最后还是让提供方给了个例子，完成了实现（刚开始要，没给，不知道是忙还是什么情况）。

　　为了让刚接触这种需求的广大程序猿能够少走点弯路，下面给出示例，有注释。有些参数不懂或者想使用复杂功能的，则查阅下列网址：

　　OpenLayers官网：https://openlayers.org/

　　扯淡大叔的教程：http://anzhihun.coding.me/ol3-primer/

　　示例代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
  6.     <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  7. </head>
  8. <body>
  9.     <div>
  10.         &nbsp;选中的经纬度：
  11.         <input id="Coordinates" type="text" value="" disabled="disabled" style="width: 350px;" />
  12.     </div>
  13.     <div id="map" class="map" style="height: 493px;"></div>
  14.     <div id="div_overlay" style="display: none;">
  15.         <div id="marker" title="">
  16.             <img src="position_orange.png" />
  17.         </div>
  18.         <div id="popup" title=""></div>
  19.     </div>
  20.     <script>
  21.         var projection = ol.proj.get('EPSG:4326');//设置坐标系
  22.         var projectionExtent = projection.getExtent();
  23.         //分辨率
  24.         var resolutions = [
  25.             1.40625,
  26.             0.703125,
  27.             0.3515625,
  28.             0.17578125,
  29.             0.087890625,
  30.             0.0439453125,
  31.             0.02197265625,
  32.             0.010986328125,
  33.             0.0054931640625,
  34.             0.00274658203125,
  35.             0.001373291015625,
  36.             0.0006866455078125,
  37.             0.00034332275390625,
  38.             0.000171661376953125,
  39.             0.0000858306884765625,
  40.             0.00004291534423828125,
  41.             0.000021457672119140625,
  42.             0.000010728836059570312,
  43.             0.000005364418029785156,
  44.             0.000002682209014892578,
  45.             0.000001341104507446289
  46.         ];
  47.         //瓦片矩阵
  48.         var matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  49.  
  50.         var centerXY = "121.54449462890625,29.875946044921875";//地图中心点，默认宁波市
  51.         var center = ReturnCenter(centerXY);
  52.  
  53.         var emap_attributions = new ol.Attribution({
  54.             html: '<span class="span_switch" onclick="ChangeToImgMap()">点击切换地图类型</span>'
  55.         });
  56.         function EMap() {
  57.             var map = new ol.Map({
  58.                 controls: ol.control.defaults({
  59.                     attribution: false
  60.                 }).extend([
  61.                     new ol.control.MousePosition()//是否显示鼠标所在地图点的经纬度
  62.                 ]),
  63.                 layers: [
  64.                   new ol.layer.Tile({
  65.                       source: new ol.source.WMTS({
  66.                           attributions: emap_attributions,
  67.                           name: "中国矢量1-14级",
  68.                           url: "http://t{0-6}.tianditu.com/vec_c/wmts",
  69.                           layer: "vec",
  70.                           style: "default",
  71.                           matrixSet: "c",
  72.                           format: "tiles",
  73.                           wrapX: true,//地图缩小后，防止在一个页面出现多个一样的地图
  74.                           tileGrid: new ol.tilegrid.WMTS({
  75.                               origin: ol.extent.getTopLeft(projectionExtent),
  76.                               resolutions: resolutions.slice(0, 15),//slice方法不清楚的请百度
  77.                               matrixIds: matrixIds.slice(0, 15)
  78.                           })
  79.                       }),
  80.                       maxResolution: resolutions[0],
  81.                       minResolution: resolutions[14]
  82.                   }),
  83.                   new ol.layer.Tile({
  84.                       source: new ol.source.WMTS({
  85.                           attributions: emap_attributions,
  86.                           name: "中国矢量注记1-14级",
  87.                           url: "http://t{0-6}.tianditu.com/cva_c/wmts",
  88.                           layer: "cva",
  89.                           style: "default",
  90.                           matrixSet: "c",
  91.                           format: "tiles",
  92.                           wrapX: true,
  93.                           tileGrid: new ol.tilegrid.WMTS({
  94.                               origin: ol.extent.getTopLeft(projectionExtent),
  95.                               resolutions: resolutions.slice(0, 15),
  96.                               matrixIds: matrixIds.slice(0, 15)
  97.                           })
  98.                       }),
  99.                       maxResolution: resolutions[0],
  100.                       minResolution: resolutions[14]
  101.                   }),
  102.                   new ol.layer.Tile({
  103.                       source: new ol.source.WMTS({
  104.                           attributions: emap_attributions,
  105.                           name: "浙江矢量15-17级",
  106.                           url: "http://srv{0-6}.zjditu.cn/ZJEMAP_2D/wmts",
  107.                           layer: "TDT_ZJEMAP",
  108.                           style: "default",
  109.                           matrixSet: "TileMatrixSet0",
  110.                           format: "image/png",
  111.                           wrapX: true,
  112.                           tileGrid: new ol.tilegrid.WMTS({
  113.                               origin: ol.extent.getTopLeft(projectionExtent),
  114.                               resolutions: resolutions.slice(15, 18),
  115.                               matrixIds: matrixIds.slice(15, 18)
  116.                           })
  117.                       }),
  118.                       maxResolution: resolutions[14],//指定当前级数的上一级来平滑过渡，否则滚轮缩放当前级数会显示空白
  119.                       minResolution: resolutions[17]
  120.                   }),
  121.                   new ol.layer.Tile({
  122.                       source: new ol.source.WMTS({
  123.                           attributions: emap_attributions,
  124.                           name: "浙江矢量注记15-17级",
  125.                           url: "http://srv{0-6}.zjditu.cn/ZJEMAPANNO_2D/wmts",
  126.                           layer: "ZJEMAPANNO",
  127.                           style: "default",
  128.                           matrixSet: "TileMatrixSet0",
  129.                           format: "image/png",
  130.                           wrapX: true,
  131.                           tileGrid: new ol.tilegrid.WMTS({
  132.                               origin: ol.extent.getTopLeft(projectionExtent),
  133.                               resolutions: resolutions.slice(15, 18),
  134.                               matrixIds: matrixIds.slice(15, 18)
  135.                           })
  136.                       }),
  137.                       maxResolution: resolutions[14],//指定当前级数的上一级来平滑过渡，否则滚轮缩放当前级数会显示空白
  138.                       minResolution: resolutions[17]
  139.                   }),
  140.                   new ol.layer.Tile({
  141.                       source: new ol.source.WMTS({
  142.                           attributions: emap_attributions,
  143.                           name: "XX县矢量18-20级",
  144.                           url: "替换成你需要的wmts服务接口地址",
  145.                           layer: "jsemap",
  146.                           style: "default",
  147.                           matrixSet: "TileMatrixSet0",
  148.                           format: "image/png",
  149.                           wrapX: true,
  150.                           tileGrid: new ol.tilegrid.WMTS({
  151.                               origin: ol.extent.getTopLeft(projectionExtent),
  152.                               resolutions: resolutions.slice(18, 21),
  153.                               matrixIds: matrixIds.slice(18, 21)
  154.                           })
  155.                       }),
  156.                       maxResolution: resolutions[17],//指定当前级数的上一级来平滑过渡，否则滚轮缩放当前级数会显示空白
  157.                       minResolution: resolutions[20]
  158.                   }),
  159.                   new ol.layer.Tile({
  160.                       source: new ol.source.WMTS({
  161.                           attributions: emap_attributions,
  162.                           name: "XX县矢量注记18-20级",
  163.                           url: "替换成你需要的wmts服务接口地址",
  164.                           layer: "jsemapanno",
  165.                           style: "default",
  166.                           matrixSet: "TileMatrixSet0",
  167.                           format: "image/png",
  168.                           wrapX: true,
  169.                           tileGrid: new ol.tilegrid.WMTS({
  170.                               origin: ol.extent.getTopLeft(projectionExtent),
  171.                               resolutions: resolutions.slice(18, 21),
  172.                               matrixIds: matrixIds.slice(18, 21)
  173.                           })
  174.                       }),
  175.                       maxResolution: resolutions[17],//指定当前级数的上一级来平滑过渡，否则滚轮缩放当前级数会显示空白
  176.                       minResolution: resolutions[21]
  177.                   })
  178.                 ],
  179.                 target: "map",
  180.                 view: new ol.View({
  181.                     center: center,//地图中心点
  182.                     projection: projection,//投影类别
  183.                     zoom: 10,//默认缩放级别
  184.                     maxZoom: 20,//最大缩放级别
  185.                     minZoom: 1//最小缩放级别
  186.                 })
  187.             });
  188.  
  189.             //鼠标点击时设置中心点覆盖物
  190.             GetElementId("map").onclick = function () {
  191.                 coordinates = GetElementsByClassName('ol-mouse-position')[0].innerHTML;
  192.                 SetPosition(map, coordinates);
  193.             };
  194.         }
  195.  
  196.         EMap();//显示E电子地图
  197.  
  198.         function GetElementId(id) {
  199.             return document.getElementById(id);
  200.         }
  201.         function GetElementsByClassName(className) {
  202.             return document.getElementsByClassName(className);
  203.         }
  204.         //中心点处理
  205.         function ReturnCenter(centerXY) {
  206.             var centerObj = centerXY.split(',');
  207.             var centerX = centerObj[0];
  208.             var centerY = centerObj[1];
  209.             return [parseFloat(centerX), parseFloat(centerY)];//一定要转换下类型，否则拖拽后，地图就消失了
  210.         }
  211.         //设置中心点覆盖物
  212.         function SetPosition(map, coordinates) {
  213.             GetElementId("Coordinates").value = coordinates;
  214.  
  215.             var newcenter = ReturnCenter(coordinates);
  216.             // Position marker
  217.             var marker = new ol.Overlay({
  218.                 position: newcenter,
  219.                 positioning: 'bottom-center',
  220.                 element: document.getElementById('marker'),
  221.                 stopEvent: false
  222.             });
  223.             map.addOverlay(marker);
  224.         }
  225.     </script>
  226. </body>
  227. </html>
  1. 　　可将上述代码直接复制到txt文件中并保存html，即可成功浏览。点击鼠标可以显示覆盖物并把坐标值显示在上面的文本框中。

　　附上坐标覆盖物图片和效果图：

　　

　　

OpenLayer3调用天地图示例的更多相关文章

  1. OpenLayer3调用天地图，拖拽后，地图消失的问题[已解决]

    拖拽后,地图直接消失了,而且右上角的坐标变成了NaN,NaN 后来经过测试发现,原来是自己封装有问题,坐标点一定要用parseFloat()转换下,但不清楚为什么页面刚开始加载的时候没有问题,总之能解 ...

  2. Javascript调用ActiveX示例

      Javascript调用ActiveX示例   写一个ActiveX控件比如叫做MyNameSpace.SecreteInfo,安装在客户机器上,这样可以通过c++获取到机器的几乎任何信息. 在网 ...

  3. 用VS2005写一个 C 的类库和用 C#来调用的示例

    一.用VS2005写一个 C 的类库的步骤: (1).建立一个空的Visual C++项目 (2).这时候在项目中可以看见 三个空目录 选中 "源文件" 目录,然后点鼠标右键,在弹 ...

  4. EzHttp 流传输调用代码示例

    EzHttp框架提供的内置接口,用于文件流等传输 流传输调用代码示例 内置接口: public interface IEzStreamHandler { Task<byte[]> GetD ...

  5. vc调用dll 示例

    其实,调用dll文件的方法很多,不一定要使用LoadLibrary函数.如果使用的话,你就要预先声明dll中的函数,很麻烦. 下面是我使用dll时的一点技巧,就是引入lib文件,可以参考: 一．Win ...

  6. AXIS2远程调用WebService示例（Eclipse+AXIS）

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/10/3071584.html 我们将Web Service发布在Tomcat或者其他应 ...

  7. 2019年以后ArcGIS 调用天地图的资源URL

    2019年1月1日起,天地图做出如下变更,导致直接在Arcgis/ArcMap中添加WMTS服务不能用了. 国家天地图解释的很清楚,注册个人用户就可以了. 原有调用方式不变,只要在URL 后添加“&a ...

  8. SpringCloud调用服务示例

    SpringCloud調用服務示例. SpringCloud简介: Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务 ...

  9. [C#/Java] C#中调用Servlet示例

    需求 通用消息接口使用servlet作为服务器端服务接口,第三方应用程序通过http post的方式调用servlet,实现与通用消息接口的调用连接. 参数说明如下: msgTitle:消息标题,描述 ...

随机推荐

  1. JSP基础：JSP指令、JSP注释、JSP脚本、JSP声明、JSP表达式

    JSP指令分为:page指令.include指令.taglib指令. page指令:通常位于JSP页面的顶端,同一个页面可以有多个页面指令. 语法:<%@ page language=" ...

  2. 使用 video.js 开发 HTML5 视频页面

    时间 2015-05-13 17:11:58 The GIS Guy 原文  http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...

  3. Struts2学习笔记NO.1------结合Hibernate完成查询商品类别简单案例（工具IDEA）

    Struts2学习笔记一结合Hibernate完成查询商品类别简单案例(工具IDEA) 1.jar包准备 Hibernate+Struts2 jar包 struts的jar比较多,可以从Struts官 ...

  4. plist涉及到沙盒的一个问题

    http://blog.csdn.net/wowxavi1/article/details/8557271

  5. respondsToSelector

    SEL sel = @selector (start:) ; // 指定action if ([obj respondsToSelector:sel]) { //判断该对象是否有相应的方法 [obj  ...

  6. Failed to load the JNI library "E:\JDK6.0\bin\client\jvm.dll"

    在打开Eclipse是错误提示:Failed to load the JNI library "E:\JDK6.0\bin\client\jvm.dll" 如图1所示 图1 遇到这 ...

  7. Linuxc - C语言下return 0的意义

    两条指令同时执行,前提是第一条指令返回0.否则不执行第二条指令. root@jiqing-virtual-machine:~/cspace/les3# gcc main.c -o main.out & ...

  8. Linux安装mysql 在/etc下没有my.cnf 解决办法

    进入 /usr/share/mysql  将my-medium.cnf 移动到etc 并且改名为my.cnf

  9. Spring-depends on

    depends-on用来表示一个bean A的实例化依靠另一个bean B的实例化, 但是A并不需要持有一个B的对象,如果需要的话就不用depends-on. 示例: 步骤一: public clas ...

  10. [Qt Quick] No rule to make target问题解决办法

    [问题描述] 修改项目中资源的qml文件名或删除无用资源文件后,重新构建项目时,会出现类似如下的问题提示: No rule to make target 'aaa', needed by 'bbb'. ...