openlayers 基本元素和基本使用

2021-09-12 21:00:18 阅读：356 来源： 互联网

标签：基本 map layer 元素地图 openlayers new 图层 view

元素使用

map 地图层

首先要 new 一个 Map 即放地图的容器，

map 中配置中心点 target和对应的 view 视图层view`

new Map {
	loadTilesWhileAnimating:true //不知道具体作用
	target:'指定容器的 id值'
	view: "已经定义好的 view 视图层"
}

view 层

用来改变地图中心、分辨率和旋转的对象

定义地图的中心点，zoom 缩放等级，和 projection 投影坐标系

new View({
	center:"定义的中心点"
	zoom:定义的层级
	projection:"定义的投影坐标系"//不同的投影坐标系对应不同的位置
})

Layer 层

有了 view 视图层之后可以向视图层上添加 layer 图层，不同的 layer 层级叠加起来形成不同的效果
有三种 layer ，有瓦片(Tile)layer， sourceVector 适量图层，image 图片图层

import Tile from ol/layer/tile.js 一般都是创建的瓦片 layer

let layer = new Tile({
	visible:true,//显示隐藏控制
	source:new XYZ({}) //地图格式
})
layer.set("layerId","tianditu2")
然后通过 
layer.get("tianditu2")来获取到 layer 从而使用方法来操作图层的显隐

创建图层 VectorLayer 创建适量图层
```
VectorSource()
```
Feature
1. Feature 是要作为 Source 填入 Layer 层中的。

Draw

draw 实例化之后可以使用 addInteraction 将 Draw 绘制的区域直接添加到 Map 上

let draw = new Draw({
	geometryFunction: (coordinates,geometry)
})
this.$Map.addInteraction(draw)

通过指定的 id 来删除对应的 Interaction

一般在绘制完成之后，切换到其他页面的绘制需要将 map 上的 interaction 去掉。
 Map.removeInteraction("interaction ID 值")

OverLayer

OverLayer 也是可以直接 add 到地图上的

let jumpPointOverLayer = new overlay({})
map.add(jumpPointOverLayer)
直接将这个 OverLayer 添加到 地图图层上，可以通过 option 中的配置来配置 overLayer 也可以通过 set 来添加

一上一下的动画效果，是通过添加自定义的 overLayer 之后根据自己定义的样式来使用 animation 实现的动画效果。

地图事件

地图点击事件

map.on(‘click’,function(evt){}) 点击地图就能够触发这个事件，可以通过这个事件来获取当前点位的坐标位置。

点击地图上的点位出现 OverLayer

主要是 map 上提供的 getEventPixel ，结合点击事件使用，如果点击范围有 Feature 的话触发回调函数，同时还使用 forEachFeatureAtPixel 来将点位进行遍历

map.on('click',function(e){
        //在点击时获取像素区域
        var pixel = map.getEventPixel(e.originalEvent);
        map.forEachFeatureAtPixel(pixel,function(feature){
            //coodinate存放了点击时的坐标信息
            var coodinate = e.coordinate;
            //设置弹出框内容，可以HTML自定义
            content.innerHTML = "<p>你点击的坐标为：" + coodinate + "</p>";
            //设置overlay的显示位置
            overlay.setPosition(coodinate);
            //显示overlay
            map.addOverlay(overlay);
        });
    });
————————————————
版权声明：本文为CSDN博主「mgsky1」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mgsky1/article/details/80191401

标签：基本,map,layer,元素,地图,openlayers,new,图层,view
来源： https://blog.csdn.net/w131552/article/details/120255810

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9