openlayers实现地图显示功能

梦里梦外; 2023-10-05 17:22 85阅读 0赞

openlayers作为开源GIS，是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制。  
基于openlayers的API显示一个瓦片地图，瓦片数据源很多都有提供开源的，比如百度、高德、天地图等  
在进行瓦片地图显示时，需要创建一个地图容器对象（ol.Map）来加载瓦片图层俩绑定对应的瓦片数据源  
在进行脚本区域编写代码，实现瓦片加载的功能，即创建一个地图容器对象（ol.Map），通过target参数关联到地图容器中（ID为map的div层），通过layers参数设置加载瓦片图层(ol.layers.Tile)、绑定数据源(ol.source/XYZ），以及通过参数设置地图视图(ol.View)  
（注：因为天地图瓦片API有新的变化，XYZ参数设置还未查询明白，url绑定出现错误，还要进一步修改，所以这里通过高德的瓦片数据源演示）

body部分创建一个div，用于放加载的地图，并且当做web地图  
css样式可以铺满网页，因为主要演示如何加载瓦片，所以页面布局并不做过多修饰

#map{
        
    	width: 100%;
    	height: 100%;
    }

下面主要是js代码来加载高德瓦片数据

实现了地图的显示功能之后可以加载常用的控件，比如常用的导航控件，导航条放大缩小等  
加载地图导航条：

//加载地图导航条实现放大缩小
    var zoomslider=new ol.control.ZoomSlider();
    map.addControl(zoomslider);
    var zoomToExtent=new ol.control.ZoomToExtent({
        
    	//地图缩放的范围，当前地图缩放至此范围，视图域将显示此范围内的地图
    	extent:[13100000,4290000,13200000,5210000]
    });
    //加载到map容器中
    map.addControl(zoomToExtent);

导航条就是滑动形式放大缩小，可以通过编写css代码修改样式

#map .ol-zoom .ol-zoom-out{
        
    	margin-top: 204px;
    	
    }
    #map .ol-zoomslider{
        
    	background-color: transparent;
    	top: 2.3em;
    }
    #map .ol-touch.ol-zoom .ol-zoom-out{
        
    	margin-top: 212px;
    }
    #map .ol-touch .ol-zoomslider{
        
    	top: 2.75em;
    }
    #map .ol-zoom-in .ol-has-tooltip:hover[
    	role=tooltip;
    ],
    #map .ol-zoom-in .ol-has-tooltip:focus[role=tooltip]{
        
    	top:3px;
    }
    #map .ol-zoom-out .ol-has-tooltip:hover[
    	role=tooltip
    ],
    #map .ol-zoom-out .ol-has-tooltip:focus[role=tooltip]{
        
    	top:232px;
    }
    #map .ol-zoom-extent{
        
    	top:280px;
    }

地图常用的基本操作控件：放大缩小平移复原等  
在地图容器中新建一个div，里面新建四个button，设置ID值，实现通过点击button完成对图层的操作，也可以通过css设置button样式  
HTML代码

js代码：为了实现复原功能，需要在代码中首先获得初始的图层级别，中心点，旋转角度等

注意： rotation:Math.PI/6, //设置旋转角度 ，旋转角度为顺时针旋转30度  
var rotation=view.getRotation();//地图旋转是通过旋转控件(ol.control.Rotation)实现的，此控件已默认添加到地图中，ol.control.Rotate控件的autohHide参数默认为true，在旋转角度为0°时将自动隐藏旋转按钮。

实现点击button操作图层功能

这些代码就是实现地图一些常用操作控件，其实原生的js代码块也可以使用jQuery来编写

注意：
    		这些操作主要有几点注意，加载瓦片图层数据时需要设置参数XYZ，
    		旋转角度的设置，地图旋转是通过旋转控件(ol.control.Rotation)实现的，此控件已默认添加到地图中，ol.control.Rotate控件的autohHide参数默认为true，在旋转角度为0°时将自动隐藏旋转按钮		
    		tooltip时设置悬浮的提示框
    		修改css样式时，c比如修改lass下得id对应样式，.class和#id之间需要空格
    		wrapX:true,    	//x方向平铺，false就是不平铺

最后将实验的结果图显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210107200750341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA==,size_16,color_FFFFFF,t_70