openlayers 基本元素和基本使用

2024-01-24 17:25:04

元素使用

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);
        });
    });
————————————————
版权声明：本文为****博主「mgsky1」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.****.net/mgsky1/article/details/80191401

码农公寓