Openlayers4加载天地图

文章首发于GISGO | GIS | 地理信息科学 - GIS研究中心：http://www.gisgo.top/

相较于ArcGIS API而言，Openlayers添加天地图和其他第三方的地图服务简单多了。通过ol.layer.Tile调用切片地图服务，因为天地图服务遵循TMS标准，所以在source属性中使用ol.source.XYZ类，服务地址可以在天地图中查看到。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width" /><link rel="stylesheet" href="libs/openlayers-v3.20.0-dist/ol.css"><script src="libs/openlayers-v3.20.0-dist/ol.js"></script><title></title><style>html,body,#map{width:100%;height:100%}</style>
</head>
<body>
<div id="map" class="map"></div>
</body>
<script>
var tian_di_tu_satellite_layer = new ol.layer.Tile({title: "天地图卫星影像",visible:false,source: new ol.source.XYZ({url: 'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'})
});
var tian_di_tu_road_layer = new ol.layer.Tile({title: "天地图路网",source: new ol.source.XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"})
});
var tian_di_tu_annotation = new ol.layer.Tile({title: "天地图文字标注",source: new ol.source.XYZ({url: 'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'})
});
var map = new ol.Map({target: 'map',layers: [tian_di_tu_satellite_layer, tian_di_tu_road_layer, tian_di_tu_annotation],overlays: [],view: new ol.View({center: [106.52714, 29.62487],projection: 'EPSG:4326',zoom: 12}),//比例尺controls: ol.control.defaults()
});
</script>
</html>

淘宝店铺：GIS研究中心

Openlayers4加载天地图相关推荐

OpenLayers4加载天地图WMTS注意事项
OpenLayers4加载天地图WMTS注意事项天地图官网:http://lbs.tianditu.gov.cn/home.html OpenLayers官网:https://openlayers. ...
osgEarth3.0 加载天地图
2.8版本里面有个xyz图层的例子,稍作修改就可以加载天地图的影像图层.在3.0版本中,XYZ , bing 等图层已经被移植到内核中.所以我们直接用XYZ图层来加载天地图即可 XYZImageLay ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...
ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ
1.ol.layer.Tile及数据源类结构 openlayers中,图层(layer)不可缺少的组成部分是数据源(source),天地图是切片的数据服务,对应的图层是ol.layer.Tile,下图 ...
(转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
（转）Openlayers 2.X加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...
（转）Arcgis for js加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...
天地图专题一：加载天地图
最近公司的项目到了尾声.总结一下项目中的一些技术.其中有涉及到天地图的部分. 类似百度地图,google地图. 我们要用一些它的公共接口,实现一些我们的效果. 比如在地图上显示我们的设备的位置,范围 ...

Openlayers4加载天地图

Openlayers4加载天地图相关推荐

最新文章

热门文章