GIS开发/WebGIS开发零基础入门：地图域当前信息（附代码）

示例功能

该示例底图显示一个天地图世界地图，实现显示地图域当前信息功能。

示例实现

本示例需要使用【include-openlayers-local.js】，通过 ol.view()类的 getResolution()方法实现显示当前分辨率功能；通过 ol.map()类的方法实现显示当前地图范围功能；通过 ol.map()类的 getView()方法实现显示当前视口范围功能；

实现步骤

Step 1. 引用开发库:
本示例通过本地离线【include-openlayers-local.js】脚本引入开发库；

Step 2. 创建地图容器:
创建id="mapCon"的 div 作为地图容器，并设置其样式；

Step 3. 创建地图容器:
创建地图对象，设置地图的必要参数,将 layers 属性设置为天地图地图图层；

Step 4. 获取当前视图分辨率:
通过 ol.view()类的 getResolution()方法实现显示当前分辨率功能；

Example:

    //获取最大分辨率var view = map.getView()var curResolution = view.getResolution()

Step 5. 获取当前地图视窗范围:
通过 ol.map()类的 getSize()方法实现显示当前地图的视窗范围(单位：像素)；

Example:

    //获取视窗范围var viewSize = map.getSize()var viewStr = viewSize[0] + ',' + viewSize[1]

Step 6. 获取当前地图范围:
通过 ol.view()类的 calculateExtent(opt_size)方法实现显示当前地图范围功能；

Example:

    //获取地图范围var ex = view.calculateExtent(viewSize)var mapstr = Number(ex[0]).toFixed(0) + ',' + Number(ex[1]).toFixed(0) + ',' + Number(ex[2]).toFixed(0) + ',' + Number(ex[3]).toFixed(0)

关键接口

1.【地图视图类】ol.View

【method】getResolution()：获取地图视图的分辨率

【method】calculateExtent(opt_size)：计算当前地图视图的地图范围

2.【地图类】ol.map

【method】getSize()：获取当前地图的大小

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><!--当前示例页面样式表引用--><link rel="stylesheet" href="./static/demo/openlayers/example/style.css" /><script include="jquery" src="./static/libs/include-lib-local.js"></script><script src="./static/libs/include-openlayers-local.js"></script><style type="text/css">#mapCon {width: 100%;height: 95%;position: absolute;}label {position: absolute;color: white;font-size: 6px;font-weight: 500;font-family: cursive;line-height: 10px;margin: 5px 5px;}</style><script type="text/javascript">var map = nullvar TiandiMap_vect = nullvar TiandiMap_vectcia = nullvar tdk = '4c27d6e0e8a90715b23a989d42272fd8' //天地图密钥function init() {//初始化地图容器map = new ol.Map({target: 'mapCon', //地图容器div的IDcontrols: ol.control.defaults({attributionOptions: {collapsible: true,},}),view: new ol.View({center: [12000000, 4000000], //地图初始中心点maxZoom: 28, //最大瓦片显示级数minZoom: 1, //最小瓦片显示级数zoom: 6, //地图初始显示级数}),})//加载天地图瓦片图层数据TiandiMap_vect = new ol.layer.Tile({title: '天地图矢量图层',source: new ol.source.XYZ({url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + tdk,wrapX: false,}),})TiandiMap_vectcia = new ol.layer.Tile({title: '天地图矢量注记图层',source: new ol.source.XYZ({url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + tdk,}),})map.addLayer(TiandiMap_vect)map.addLayer(TiandiMap_vectcia)updateInfo()map.getView().on('propertychange', updateInfo)window.addEventListener('resize', updateInfo)}function updateInfo() {var view = map.getView()//获取最大分辨率var curResolution = view.getResolution()var viewSize = map.getSize()//获取地图范围var ex = view.calculateExtent(viewSize)var mapstr = Number(ex[0]).toFixed(0) + ',' + Number(ex[1]).toFixed(0) + ',' + Number(ex[2]).toFixed(0) + ',' + Number(ex[3]).toFixed(0)var viewStr = viewSize[0] + ',' + viewSize[1]document.getElementById('resolution').innerText = '分辨率:' + Number(curResolution).toFixed(3)document.getElementById('maprange').innerText = mapstrdocument.getElementById('viewrange').innerText = '视窗范围:' + viewStr}</script></head><body onload="init()"><div id="mapCon"></div><fieldset style="position: absolute;width: 200px;height: 75px;top: 18px;left: 50px;background-color: black;opacity: 0.5;border-radius: 10px;padding: 10px 6px;"><label id="resolution">分辨率:</label><br /><label id="viewrange">视图范围:</label><br /><label>地图范围:</label><br /><label id="maprange" style="margin-top:0px"></label><br /></fieldset></body>
</html>