openlayers 加载卫星图、注记图

js引入 openlayers

npm引入

npm i ol@6.4.3 --save

加载地图

new Map({

// 加载的图层（图层通过叠加的方式加载，越靠后，显示优先级越高）

layers: [BaseLayer, BaseCiaLayer],

// 加载地图dom的id

target: "map",

view: new View({

// 地图默认加载的级别

zoom: 14,

// 最大支持的缩放级别（openlayers）

maxZoom: 20,

// 地图中心点坐标

center: fromLonLat([120.19446, 36.316495]),

// 是否允许中间缩放级别 true 不允许 false 允许

constrainResolution: true,

// 允许视图稍微超过给定的分辨率或缩放界限。

// smoothResolutionConstraint: false,

}),

});

// 通过球面墨卡托投影方式加载天地图影像底图

const BaseLayer = new Tile({

source: new XYZ({

maxZoom: 18,

crossOrigin: "anonymous",

url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=天地图key&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",

}),

});

// 通过球面墨卡托投影方式加载天地图文字标识底图

const BaseCiaLayer = new Tile({

source: new XYZ({

maxZoom: 18,

crossOrigin: "anonymous",

url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=天地图key&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",

}),

});

openlayers 加载卫星图、注记图相关推荐

通过openlayers加载dwg格式的CAD图并与互联网地图叠加
Openlayers介绍 Openlayers是一个基于Javacript开发,免费.开源的前端地图开发库,使用它,可以很容易的开发出WebGIS系统.目前Openlayers支持地图瓦片.矢量数 ...
vue百度地图一进页面加载卫星图
<bm-map-type :map-types="mapType" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-m ...
OpenLayers 加载天地图
要使用 OpenLayers 3 加载天地图,首先要弄清楚天地图发布的原理,以及遵循的发布规范,上一篇中我们提到了使用 OpenLayers 3 加载百度地图,我们提到一般网络地图为了加快访问速度,都 ...
openlayers加载bing地图
openlayers加载bing地图注:需要bingmap网站提供的许可key,注册微软账号就有了,https://www.bingmapsportal.com/Application# 查看文章
OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果
前言 OpenLayers开发库如何实现加载不同类类型的天地图(矢量图.影像图.地形图)并实现动态切换效果,如下图所示. 一.涉及技术及数据开发库:OpenLayers 6.Jquery 地图源:天 ...
通过 OpenLayers 加载CAD导出位图和 math.js 构造的仿射变换实现地理坐标系到任意CAD图上像素坐标系的互转
WebGIS开发过程中会遇到这样一种情况:需要使用OpenLayers加载一个未校准的CAD导出的位图:并且还需要通过经纬度坐标数据在这个位图上做一些标记,还需要能通过在OpenLayers取得的图上 ...
GIS初学者，最新OpenLayers WMTS 天地图，OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326
2018最新OpenLayers天地图加载可行方案,天地图WMTS调用,OpenLayers 天地图 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知识,对我 ...
OpenLayers加载QQ地图(转)
OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...
Vue+Openlayers加载Geoserver发布的TileWMS后更换shp数据源的流程
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_BADAO_LIUMANG_QIZHI的 ...
Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...

openlayers 加载卫星图、注记图

openlayers 加载卫星图、注记图相关推荐

最新文章

热门文章