GIS开发零基础入门：地图操作（附代码）

 

示例功能

    本示例在加载了天地图矢量图层以及其注记图层的基础上，添加了地图视图的放大、缩小、跳转以及复位功能。

示例实现

    本示例需要使用 【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. 地图复位