openlayer添加自定义图片图层

这个就是有一种图片，把他放到openlayer里面去！

首先引入相关的库文件

  import Projection from 'ol/proj/Projection'import Static from 'ol/source/ImageStatic'import Map from 'ol/Map'import ImageLayer from 'ol/layer/Image'import View from 'ol/View'import VectorLyr from 'ol/layer/Vector'import VectorSource from 'ol/source/Vector'import { getCenter } from 'ol/extent'import Polygon from 'ol/geom/Polygon'import Feature from 'ol/Feature'import { Circle as CircleStyle, Style, Fill, Stroke } from 'ol/style'import Point from 'ol/geom/Point'import { Heatmap as HeatmapLayer } from "ol/layer";

然后编写javascript代码。

initMap() {const extent = [0, 0, 500, 700]  // 图片范围const projection = new Projection({  // 创建投影code: 'EPSG:3857',units: 'pixels',   // 像素单位extent: extent,axisOrientation: 'seu'})if (!this.map) {   // 如果地图不存在，就创建this.map = new Map({layers: [new ImageLayer({       // 创建一个图像图层title: 'baseMap',source: new Static({url: '图片地址',projection: projection,imageExtent: extent})})],target: 'heatmapDiv',   // 绑定的地图显示元素view: new View({projection: projection,center: getCenter(extent),zoom: 2,maxZoom: 3})})} else {   // 如果存在就修改已存在地图的源let base = this.getLayerFromMap(this.map, 'baseMap')  // 获取地图中是否存在该图层base.setSource(new Static({   // 设置源数据url: this.area.map2d,projection: projection,imageExtent: extent}))this.map.setView(new View({   // 设置视图位置projection: projection,center: getCenter(extent),zoom: 2.0,}))}
}

// 根据图层title获取地图图层，如果有就返回图层，没有就返回null

getLayerFromMap(map, name) {var layers = map.getLayers()   // 获取地图所有图层var layer = nulllayers.forEach((item, index) => {if (item.values_.title !== undefined) {if (item.values_.title === name) {layer = itemreturn layer}}})return layer
}

openlayer添加自定义图片图层相关推荐

CALayer 知识：创建带阴影效果的圆角图片图层和创建自定义绘画内容图层
效果如下: KMLayerDelegate.h 1 #import <UIKit/UIKit.h> 2 3 @interface KMLayerDelegate : NSObject 4 ...
拖拽的方式使用qbuttongroup_【无机纳米材料科研制图——Photoshop 0402】PS使用选框工具修改图片/图层...
此篇,我们来分享使用PS的选框修改图片. 一.栅格化图形. 1)同时选中两个图层. 首先,回到上一篇中图片相互遮挡的状态.在上一篇中,我们通过调整图层的上下位置,避免了遮挡的情况,但有时候只通过调整图 ...
如何制作手绘地图？如何将图片图层精确地对准在地图上？
最近大家常常在问,如何制作鼓浪屿手绘地图,如何将气象图层叠加在高德地图上啊? 其实地图上的研发量很小,几行代码就可以搞定. 关键是在图片绘制上,有较高的要求. 下面就用简单粗暴的方法来实现,如有不妥之 ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
【无机纳米材料科研制图——Photoshop 0402】PS使用选框工具修改图片/图层
此篇,我们来分享使用PS的选框修改图片. 一.栅格化图形. 1)同时选中两个图层. 首先,回到上一篇中图片相互遮挡的状态.在上一篇中,我们通过调整图层的上下位置,避免了遮挡的情况,但有时候只通过调整图 ...
Map创建自定义图片图层，图片会随着地图缩放而缩放，uniapp、高德、腾讯、百度
场景:在项目开发中会遇到在map上绘制图层,一般想到的方法会是通过接口获取图层边界的所有点,由点生成polygons多边形面.polygons 多边形示例数据过多地图会存在卡顿的问题. 目的:创建自 ...
Vue+ElementUI 之 input输入框添加自定义图片
Vue+ElementUI 之 input输入框添加自定义图片效果图如图: <el-form ref="formData" :model="formData&q ...
【MAPBOX基础功能】16、mapbox叠加图片图层到地图上
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
图片图层隐写_【软件】imageIN · 图影-隐藏文件到图片，简单轻快的图片隐写工具...
还记得以前的图种制作吗,今天给大家分形下一个相关的工具. 度盘下载(imageIN Beta1.0 (2.18MB)) :pan.baidu.com/s/1hqve8YS 官网下载:本地下载这是一个 ...
psd替换图片图层,图层效果不变
PSD 替换智能对象图层功能是每一个PS使用者都非常熟悉的操作,它能为我们在不改变原有图像的基础上进行透视.扭曲.变形等命令现在我们把这个操作给移植到网站上,提供网络API版本的服务,您可以基于我们 ...

openlayer添加自定义图片图层

openlayer添加自定义图片图层

openlayer添加自定义图片图层相关推荐

最新文章

热门文章