OpenLayers4加载天地图WMTS注意事项
天地图官网：http://lbs./home.html
OpenLayers官网：/
使用天地图之前需要申请密钥，我申请的是个人的浏览器端密钥。
申请的浏览器端密钥和服务器端密钥是有区别的，需要根据具体项目进行设置。最近做的项目由于一开始使用的是服务器端密钥，导致地图地图和标注服务无法完全加载，更换为浏览器端密钥后就解决了该问题。
本人使用的是WMTS服务，地图展示的示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link href="/openlayers/4.6.5/ol.css" rel="stylesheet"><script src="/openlayers/4.6.5/ol.js"></script><style type="text/css">#map {position: absolute;width: 100%;height: 100%;overflow: hidden;left: 0;top: 0;}</style></head><body><div id="map" class="map"></div><script>var projection = ol.proj.get("EPSG:4326");var projectionExtent = projection.getExtent();var size = ol.extent.getWidth(projectionExtent) / 256;var resolutions = [];for (var z = 2; z < 19; ++z) {//计算比例尺resolutions[z] = size / Math.pow(2, z);}var map = new ol.Map({layers: [new ol.layer.Tile({//矢量地图source: new ol.source.WMTS({url: "http://t0./vec_c/wmts",//链接需要添加自己申请的密钥layer: "vec",style: "default",matrixSet: "c",format: "tiles",wrapX: true,tileGrid: new ol.tilegrid.WMTS({origin: ol.extent.getTopLeft(projectionExtent),//resolutions: res.slice(0, 15),resolutions: resolutions,matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]})}),}),new ol.layer.Tile({//矢量标注source: new ol.source.WMTS({url: "http://t0./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,matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]})}),})],target: "map",view: new ol.View({center: [118.7971, 31.9332],//中心点projection: projection,zoom: 11,maxZoom: 15,minZoom: 1})});</script></body></html>
天地图提供了很多实用地图服务
1.矢量底图：http://t0./vec_c/wmts?tk=您的密钥（经纬度投影）
2.矢量标记：http://t0./cva_c/wmts?tk=您的密钥（经纬度投影）
3.逆地理编码查询：http://api./geocoder?postStr={‘lon’:116.37304,‘lat’:39.92594,‘ver’:1}&type=geocode&tk=您的密钥
4.地理编码查询：http://api./geocoder?ds={“keyWord”:“延庆区北京市延庆区延庆镇莲花池村前街50夕阳红养老院”}&tk=您的密钥
5.行政区划服务：http://api./administrative?postStr={“searchWord”:“北京”,“searchType”:“1”,“needSubInfo”:“false”,“needAll”:“false”,“needPolygon”:“true”,“needPre”:“true”}&tk=您的密钥
友情小礼包
由于使用的是openlayer在线的服务，为了加快浏览速度，忍痛花了5积分下载了5.3.0版本的离线包，有需要的小伙伴可在百度云提取。
百度云链接：/s/1kSSnKj9oT__SUTUhZQZPvA
提取码：8p8n
![[推荐]中国达人秀：刘伟的1500字作文](https://1500zi.500zi.com/uploadfile/img/2024/08/28/d8eef0d8c8c197a59e7d5cc3ca1e9f0f.jpg)
