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

最新推荐文章于 2025-10-17 11:20:36 发布
原创 最新推荐文章于 2025-10-17 11:20:36 发布 · 3.7k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端框架 #前端

本文介绍了一个基于OpenLayers的GIS开发实例，详细讲解如何实现地图的放大、缩小、跳转和复位功能。通过引用`include-openlayers-local.js`库，设置地图的缩放等级和中心点，实现地图的基本交互操作。
部署运行你感兴趣的模型镜像

 

示例功能

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

示例实现

    本示例需要使用 【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 等级

参数名类型说明
zoomnumber地图缩放等级

【method】setCenter(center)：设置地图视图的中心点

参数名类型说明
centercoordinate视图中心点坐标

 完整代码

<!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的ID
                controls: 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软件开发内容

您可能感兴趣的与本文相关的镜像

Python3.10

Python3.10

Conda
Python

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本

gis学姐
关注
【完整的WebGIS教程】2、第一个基于vue的webgis项目
热门推荐
老靳的WebGIS
04-20 1万+
利用vue-cli创建你的第一个WebGIS项目
GIS地图开发
小眼哥的博客
11-25 4684
GIS地图开发
ArcGIS软件操作——地图制图
dcfgis的专栏
08-24 1万+
详细讲述了如何使用ArcGIS软件对数据进行基础处理，再到地图整饰，最后出图，一整个流程，希望能为初入GIS领域的同仁提供一点帮助。
MapGIS地理信息系统操作手册与实战指南
最新发布
weixin_33205138的博客
10-17 660
MapGIS支持高度个性化的界面配置，满足不同岗位用户的操作习惯。用户可通过【工具】→【选项】打开“系统设置”对话框，进行如下定制：界面皮肤更换：支持经典蓝、深色模式、高对比度三种主题，适用于长时间作业场景；工具栏布局保存：可将当前工具栏排列方案另存为配置文件（*.cfg），便于团队统一部署；快捷键绑定：支持超过200个命令的键盘映射，允许组合键（如Ctrl+Shift+E）绑定至“导出图像”等功能。快捷键设置路径为：【工具】→【自定义】→【键盘】选项卡。
webgis 常见地图类型概述
我哎GIS博客
07-17 851
WebGIS（‌网络地理信息系统）‌是一种基于互联网技术的地理信息系统，‌它允许用户通过Web浏览器访问和使用地理信息系统（‌GIS）‌的功能和数据。‌WebGIS将GIS的数据和处理能力放在互联网上，‌使得用户可以在任何地点、‌任何时间，‌只要有网络连接，‌就能够访问和操作地理信息数据。‌。
GIS开发教程geoserver,openlayers,postgresql,postgis,leaflet,ogc,webgis，arcgis api for js,arcengine，arcmap
gisdoer
10-28 810
GIS GIS开发者,包括开源gis:geoserver,openlayers,postgresql,postgis,leaflet,ogc,webgis教程 arcgis二次开发：arcgis api for js,arcengine二次开发，arcmap数据处理教程； GIS人工智能，GIS大数据，GIS+BIM，GIS前沿发展趋势 ...
GIS开发零基础入门：加载地图控件（附代码）
gis1205的博客
10-14 1258
本示例在加载了天地图矢量图层以及其注记图层的基础上添加了地图控件，其中包括导航控件，复位控件，鼠标位置控件，比例尺控件，鹰眼控件。创建地图对象，设置地图的必要参数，如地图 div 容器、缩放层级、中心点等，添加天地图，具体操作参考。添加鹰眼控件到地图容器中(示例中鹰眼控件加载了天地图影像图层)。的 div 作为地图容器，并设置其样式;加载 OpenLayers 地图控件。添加鼠标位置控件到地图容器中;添加比例尺控件到地图容器中;添加导航控件到地图容器中;添加复位控件到地图容器中;1.【地图控件基类】
GIS开发零基础入门：图层选择控件（附代码）
gis1205的博客
10-14 750
本示例需要使用 【include-openlayers-local.js】 开发库实现，通过关键接口。创建地图对象，设置地图的必要参数，如地图 div 容器、缩放层级、中心点等，添加天地图，具体操作参考。本示例在加载了天地图矢量图层以及其注记图层以及天地图影像图层及其注记图层的基础上添加了图层选择控件。本示例通过本地离线 【include-openlayers-local.js】 脚本引入开发库;创建多个图层，构建图层目录树列表，根据图层列表前的复选框来切换图层显示与隐藏状态;
GIS开发入门：从图层绘制到Web服务发布
首先，标题中的“GIS开发入门”明确指出了内容定位：面向初学者，强调可操作性和实用性。不同于纯粹的理论教材，该资料通过提供完整的源码包（压缩包文件名为 xyiDAWwzbJwvQYZsOj2q-master-c6bfd60f3c2fe78a9f05a776...
零基础入门：OPhone游戏编程教程
地图的设计和实现也是游戏开发中不可或缺的部分，这部分内容可能涉及地理信息系统（GIS）的集成，以提供丰富的游戏世界。 文章强调，尽管标题为"从零开始"，但读者需要具备一定的Java基础和Eclipse使用经验，因为...
WebGIS入门教程（非常详细）从零基础入门到精通，看完这一篇就够了【建议收藏】
2301_78220461的博客
04-25 3100
《WebGIS之Vue零基础教程》（1）Vue简介《WebGIS之Vue零基础教程》（2）Vue快速上手WebGIS开发系列教程（1）：GIS开发基础WebGIS开发系列教程（2）：Openlayers概述WebGIS开发系列教程（3）：Openlayers快速入门WebGIS开发系列教程（4）：Openlayers之多源数据展示WebGIS开发系列教程（5）：Openlayers高级功能WebGIS开发系列教程（6）：Openlayers之项目实战Three.js三维开发0基础教程：(1)搭建开发环境Th
webgis地图开发
01-28
webgis地图demo，openlayers、leaftletjs例子。后期添加百度和高德地图api
基本GIS系统开发
03-06
一个最基本的GIS，需要包含如下的组成部分：管理空间坐标数据的矢量图形系统，管理属性数据的数据库管理系统，以及实现矢量图形系统与数据库管理系统双向连接的连接系统以及空间分析功能等。 矢量图形系统是GIS的重要部分，也是开发GIS系统时的重点所在。一个基本的矢量图形系统一般需要如下的功能： 1．相对完善的图形元素，应具备处理点，线，面，网络等图形元素的能力，这类图形系统在很大程度上能够满足普通的管理型GIS的矢量图形系统的要求。提功矢量显示图形的功能在很大程度上能够改善矢量图形界面的质量。 2.相对完善的图形操作功能。应具备图形的放缩，移动等各种操作功能。 3.相对完善的图形输入和输出功能。应具备鼠标交互绘制功能，图形数据交互输入等功能。 4.定制和使用线形。 5.具有子图填充功能。 6.具有网络描述和处理能力。 7.具有图层，颜色，线形等的设置功能。 8.具有较大的存储容量。处理图形元素的容量应该能够达到一般实用要求。
开发GIS应用简明教程
weixin_30323961的博客
11-12 524
关于C#开发GIS应用简明教程的说明 Web上的GIS，我个人觉得C#+MAPX并不是一个好的解决办法，因为有许多的GIS工具更适合于WEB环境和C#语言，只是我自己在这方面也没什么研究。所以只能对大家说抱歉了。 第一章 准备 使用C#开发GIS应用,你应该首先在系统中安装Visual Studio .Net(建议使用2003版本),然后还需要安装MapInfo公司开发的MapX 5....
GIS开发
陈兰民的专栏
01-24 1205
<br />gdal: 膜拜一下吧,这个支持基本上所有的图片格式了,就算不做gis开发只做图形开发的developer也该拿去用而且还是夸平台的.例如:tif,jpeg,png,bmp......<br />ogr: gdal的子库,支持现在所有的矢量地图格式,读写和统一化.例如:shapefile,postgis......<br />geos: Java Topology Suite(JTS)的c++接口,矢量数据结构和算法库,可以和ogr库配合使用,先装好geos再装gdal的时候加个参数就可以互相支
地理信息系统（GIS）开发专题教程GISDeveloper_9
weixin_32687875的博客
10-05 3650
本文还有配套的精品资源，点击获取 简介：GISDeveloper_9深入探讨了地理信息系统（GIS）技术在软件开发中的应用，包括空间数据模型、地理编码、GIS软件开发环境、编程语言选择、Web GIS技术、空间分析方法、GIS数据处理、移动GIS开发、GIS可视化及GIS应用案例。该专题为GIS开发人员提供了全面的指导，帮助他们掌握GIS开发的关键技能，以设计和实现各种GI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值