OpenLayers - 加载静态图片（十二）

简介

本文讲解，如何使用OpenLayers在载静态图片上添加标记，预览图片。主要使用ol.source.ImageStatic用于显示单个静态图像的图层源。使用OpenLayers的好处有，地图的放大、缩小等view视图功能都可以使用，根据地理坐标绘制标注也能很好的使用，对于演示而言，无疑加快了开发效率。

开始使用

初始化地图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style type="text/css">.map {height: 500px;width: 100%;}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" /><script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script><body><div id="map" class="map"></div></body><script>var map = new ol.Map({target: 'map'})// 地图设置中心var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857')// 视图var view = new ol.View({center: ol.proj.fromLonLat([0, 0]),zoom: 7})map.setView(view)// 计算图片映射到地图上的范围，保持比例的情况下。 放大100倍 除以2 让图片中心点和地图中心点重合var extent = [center[0] - (1080 * 1000) / 2, center[1] - (756 * 1000) / 2, center[0] + (1080 * 1000) / 2, center[1] + (756 * 1000) / 2]// 加载图片图层map.addLayer(new ol.layer.Image({source: new ol.source.ImageStatic({url: '2.jpg',imageExtent: extent //映射到地图的范围})}))</script>
</html>

初始化map后这里就不需要地图图层了。
用于操作地图放大缩小的视图还是要加入map中，需要注意中心点要使用变量保存下来，用于定义图片图层的范围。这里中心点使用的地理坐标ol.proj.fromLonLat([0, 0])，并且计算图片映射范围时，使图片中心和中心点重合。不同的中心点标注计算位置时方式是不一样的。
创建图片图层加入map中。

绘制标注

图片已经加载了，添加标注还会远吗。

    // 创建矢量图层 绘制标注var vLayer = new ol.layer.Vector({source: new ol.source.Vector()})//创建一个活动图标需要的Feature，并设置位置var feature = new ol.Feature({geometry: new ol.geom.Point([center[0] + 540 * 1000, center[1] - 378 * 1000])})//设置Feature的样式，使用小旗帜图标feature.setStyle(new ol.style.Style({image: new ol.style.Icon({src: 'https://img2.baidu.com/it/u=3347068028,2336626960&fm=26&fmt=auto&gp=0.jpg',anchor: [0, 1],scale: 0.2})}))vLayer.getSource().addFeature(feature)map.addLayer(vLayer)

先创建Vector矢量图层用户加载标注。
创建点要素，要注意上面使用的ol.proj.fromLonLat([0, 0])，所以图片中心就是原点。计算标注位置时使用的是像素坐标，图片放大了1000倍，这里的1像素位置就是1000。最后以原点为中心的十字坐标计算标注位置就行了。
一个简单的标注操作就完成了，当然其他功能也是可以用的就和操作地图没区别，主要是坐标位置需要注意。

OpenLayers - 加载静态图片（十二）相关推荐

【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
文章目录一.加载网络图片二.加载静态图片三.加载本地图片四.完整代码示例五.相关资源一.加载网络图片参考 [Flutter]Image 组件 ( Image 组件简介 | Image 构 ...
Unity 制作翻书电子书，外部异步加载千张图片（二）
Unity 制作翻书电子书,外部异步加载千张图片(二) Hello!这是我的第二篇文章,希望在你阅读这篇文章之后对你能有帮助. 上文完成的程序,我说过只是解决了当前的问题,存在了很多瑕疵.例如:1.替 ...
MFC CMFCToolBar静态工具栏和动态工具栏，加载自定义图片（真彩透明）
现在把我最新研究的对CMFCToolBar心得写在这边. 现在介绍两种加载工具栏的方式: 一种是静态加载工具栏,跟普通的加载工具栏一样,只是用了自定义图片. 一种是动态加载工具栏,这个也是需要静态工具 ...
vue3：加载本地图片等静态资源
背景在我们用 vue2 + webpack 的时候,加载图片资源是这样用的: <img :src="require('@/assets/test.png')" /> ...
图片预加载学习(二)：有序加载之图片切换
基本效果同前一篇,业务有所变化:前一篇是先显示进度条待所有的图片加载完成了再显示图片,这一篇是先显示第一张图片然后依次加载其他图片(比较适合于有内容的图片,人在看第一张图片时程序默默的加载后面的图片) ...
openlayers加载离线地图并实现深色地图
问题背景我们自己一直使用的openlayer+geoserver自己发布的地图,使用的是矢量地图.但是由于政府地图大都使用为天地图,所以需要将geoserver的矢量地图更改为天地图,并 ...
WebGIS——Openlayers加载图层
Openlayers加载图层一.创建Html文件并在body中放入一个Div作为地图显示的容器 <body><div id="map" class=" ...
Vue 动态加载public图片和图片预览例子
一.vue 静态资源文件夹 Vue 有两个存放静态资源的文件夹:assets和public. 1. assets文件夹使用require()方法加载静态资源,如: require('./assets ...
OpenLayers 加载天地图模糊的问题 OpenLayers 地图缩放模糊
openlayers 加载天地图模糊的问题,OpenLayers 地图缩放几次之后模糊 2021年12月20日纠正模糊原因: 地图加载瓦片实质上还是图片,一般来说是256&256,将一个静态 ...
微信H5资源预加载（图片、字体）
一.背景微信活动H5页面的特点之一就是资源多(图.字体.音频等),动不动就几十兆.庞大的资源量很可能导致页面不流畅.如下图,因为背景图还没加载完,进入第二页时会有一瞬间"白屏". ...

OpenLayers - 加载静态图片（十二）

简介

开始使用

初始化地图

绘制标注

OpenLayers - 加载静态图片（十二）相关推荐

最新文章

热门文章