示例功能
本示例在加载了天地图矢量图层以及其注记图层的基础上，添加了地图视图的放大、缩小、跳转以及复位功能。
示例实现
本示例需要使用 【include-openlayers-local.js】 开发库实现，然后通过 setZoom(zoom)方法设置地图的缩放等级，通过 setCenter(center)方法设置地图中心点。
实现步骤
Step 1. 引用开发库:
本示例通过本地离线 【include-openlayers-local.js】 脚本引入开发库;
Step 2. 创建地图容器:
创建id="mapCon"的 div 作为地图容器，并设置其样式;
Step 3. 创建地图对象:
创建地图对象，设置地图的必要参数，如地图 div 容器、缩放层级、中心点等，添加天地图，具体操作参考互联网地图目录下的天地图示例;
Step 4. 地图放大:
通过设置地图视图的 Zoom 级别实现地图视图放大功能;
Example:
//获取地图视图var view = map.getView()//获得当前缩放级数var zoom = view.getZoom()//地图放大一级view.setZoom(zoom + 1)Example:
//获取地图视图var view = map.getView()//获得当前缩放级数var zoom = view.getZoom()//地图缩小一级view.setZoom(zoom - 1 >= 1 ? zoom - 1 : 1)Step 6. 地图跳转:
通过设置地图视图的中心点位置和 Zoom 级别实现地图视图跳转;
Example:
//获取地图视图var view = map.getView()var wh = ol.proj.fromLonLat([114, 30])//平移地图view.setCenter(wh)view.setZoom(7)Step 7. 地图复位:
通过设置地图视图初始的中心点位置、Zoom 级别和旋转角度实现地图视图复位功能。
Example:
var view = map.getView()//初始中心点view.setCenter(center)//初始旋转角度view.setRotation(rotation)//初始缩放级数view.setZoom(zoom)
关键接口
1.【地图视图类】ol.View
【method】setZoom(zoom)：设置地图视图的 Zoom 等级
| 参数名 | 类型 | 说明 |
|---|---|---|
| zoom | number | 地图缩放等级 |
【method】setCenter(center)：设置地图视图的中心点
| 参数名 | 类型 | 说明 |
|---|---|---|
| center | coordinate | 视图中心点坐标 |
完整代码
<!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;}</style><script type="text/javascript">var map = null;var TiandiMap_vect = null;var TiandiMap_vectcia = null;var tdk = "4c27d6e0e8a90715b23a989d42272fd8"; //天地图密钥//地图视图的初始参数var view =null;var zoom =null;var center =null;var rotation =null;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, //地图初始显示级数rotation: Math.PI/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);//地图视图的初始参数view = map.getView();zoom = view.getZoom();center = view.getCenter();rotation = view.getRotation();}function ZoomIn(){//获取地图视图var view = map.getView();//获得当前缩放级数var zoom = view.getZoom();//地图放大一级 view.setZoom(zoom + 1);}function ZoomOut(){//获取地图视图var view = map.getView();//获得当前缩放级数var zoom = view.getZoom();//地图缩小一级 view.setZoom(zoom - 1>=1?zoom - 1:1);}function JumpTo(){//获取地图视图var view = map.getView();var wh = ol.proj.fromLonLat([114, 30]);//平移地图view.setCenter(wh);view.setZoom(7);}function Reset(){var view = map.getView();//初始中心点view.setCenter(center);//初始旋转角度view.setRotation(rotation);//初始缩放级数view.setZoom(zoom); }</script>
</head><body onload="init()"><div id="mapCon"></div><div id="menuContain" class='menuContain'><div id="tool-container"><div id='dataSourceMenuID' class="optmain" status="unactive" onclick="switchMenuStatus(this,'menu1')"><span></span><i class="menuGroup">视图控制</i><em></em></div></div></div><div id="menu1" class="menuStrip" style='display:none' ><ul class="menuItems"><li onclick="ZoomIn()"><span class="item1"></span><i >放大</i></li><li onclick="ZoomOut()"><span class="item1"></span><i >缩小</i></li><li onclick="JumpTo()"><span class="item1"></span><i >跳转</i></li><li class="divider"></li><li onclick="Reset()"><span class="item3"></span><i>复位</i></li></ul></div><script>function switchMenuStatus(div, menuitemFrameID) {var temDivs = document.getElementsByClassName('optmain');if (temDivs.length > 0) {for (var i = 0; i < temDivs.length; i++) {if (temDivs[i] === div) {var status = div.getAttribute("status");if (status == "unactive") {div.setAttribute("status", "active");var tem_spans = div.getElementsByTagName("span");var tem_ems = div.getElementsByTagName("em");tem_spans[0].className = "active";tem_ems[0].className = "active";//显示菜单项DisplayMenuItem(true, menuitemFrameID);}else {div.setAttribute("status", "unactive");var tem_spans = div.getElementsByTagName("span");var tem_ems = div.getElementsByTagName("em");tem_spans[0].className = "";tem_ems[0].className = "";//隐藏菜单项DisplayMenuItem(false, menuitemFrameID);}}else {var status = temDivs[i].getAttribute("status");if (status == "active") {temDivs[i].setAttribute("status", "unactive");var tem_spans = temDivs[i].getElementsByTagName("span");var tem_ems = temDivs[i].getElementsByTagName("em");tem_spans[0].className = "";tem_ems[0].className = "";}}}}}function DisplayMenuItem (isDisplay, iframeID) {var menuItemFrame = document.getElementById(iframeID);if (menuItemFrame != null) {if (isDisplay) {var temDivs = document.getElementsByClassName('menuStrip');if (temDivs.length > 0) {for (var i = 0; i < temDivs.length; i++) {if (temDivs[i] != menuItemFrame) {temDivs[i].style.display = "none";}} }menuItemFrame.style.display = "";}else {menuItemFrame.style.display = "none";}}};</script>
</body></html>点击领更多学习GIS软件开发内容
