ol3 加载天地图服务

function map_load(){

//添加坐标

var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(2),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'),
undefinedHTML: ' '
});
//构建map
map = new ol.Map({

target: 'map',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}).extend([mousePositionControl]),

layers: [

new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [attribution],
url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}'
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [attribution],
url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [attribution],
url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
})
})
],
view: new ol.View({
center: ol.proj.transform([115, 35], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});

}

其他代码包括引用ol3.js goog库等，请自行加入。需要注意一点的是底图的选择是墨卡托。鼠标位置的div自行放置。

ol3 加载天地图服务相关推荐

加载天地图服务出现空吧图片类似404图片加载失败的效果
如果出现加载天地图出现该情况: 解决办法其实很简单,一句代码就ok了,话不多上,上代码: //创建自定义图层对象 var lay = new T.TileLayer(layers[i].layer.F ...
arcgis加载天地图_ArcGIS Runtime SDK for Android100.5.0端加载天地图服务
点击图片上方蓝色字体GIS点滴即可订阅我们都知道,天地图服务的调用都需要获取授权.在这种模式下,之前通过WebTiledLayer加载的方式在Android端就无法显示了,由下图可知,虽然正确发送了 ...
Cesium + Vue 加载天地图服务（二）
1. 注册天地图更多服务访问:http://lbs.tianditu.gov.cn/server/MapService.html 2. 确定服务类型 http://t0.tianditu.gov.c ...
arcgis api for javascript4.18加载天地图服务，并且加载自己的发布的动态地图服务
以arcgis api for javascript4.18 API为例: 遇到几个问题: 1.用户,特别是小白用户,不知道用什么API类来调用各种地图服务. 解决办法: 方法一:正向思考方法参考官 ...
Arcgis for Js之加载wms服务
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...
ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ
1.ol.layer.Tile及数据源类结构 openlayers中,图层(layer)不可缺少的组成部分是数据源(source),天地图是切片的数据服务,对应的图层是ol.layer.Tile,下图 ...
openlayer3 系列 4 - 加载天地图
1.天地图官网 http://www.tianditu.gov.cn/ 2.申请key http://lbs.tianditu.gov.cn/authorization/authorization.h ...
Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...
(转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...

ol3 加载天地图服务

ol3 加载天地图服务相关推荐

最新文章

热门文章