當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/18 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 - 加载静态图片（十二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [Qt] 基于Tcp协议的聊天室实现（C
下一篇： Prior-based Domain A