日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

编程问答

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

發(fā)布時間：2023/12/18 编程问答 28 豆豆
生活随笔 收集整理的這篇文章主要介紹了 OpenLayers - 加载静态图片（十二） 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

簡介

本文講解，如何使用OpenLayers在載靜態(tài)圖片上添加標記，預覽圖片。主要使用ol.source.ImageStatic用于顯示單個靜態(tài)圖像的圖層源。使用OpenLayers的好處有，地圖的放大、縮小等view視圖功能都可以使用，根據地理坐標繪制標注也能很好的使用，對于演示而言，無疑加快了開發(fā)效率。

開始使用

初始化地圖

<!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])，并且計算圖片映射范圍時，使圖片中心和中心點重合。不同的中心點標注計算位置時方式是不一樣的。
  • 創(chuàng)建圖片圖層加入map中。

    • 繪制標注

    • 圖片已經加載了，添加標注還會遠嗎。
    // 創(chuàng)建矢量圖層 繪制標注var vLayer = new ol.layer.Vector({source: new ol.source.Vector()})//創(chuàng)建一個活動圖標需要的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)

  • 先創(chuàng)建Vector矢量圖層用戶加載標注。
  • 創(chuàng)建點要素，要注意上面使用的ol.proj.fromLonLat([0, 0])，所以圖片中心就是原點。計算標注位置時使用的是像素坐標，圖片放大了1000倍，這里的1像素位置就是1000。最后以原點為中心的十字坐標計算標注位置就行了。
  • 一個簡單的標注操作就完成了，當然其他功能也是可以用的就和操作地圖沒區(qū)別，主要是坐標位置需要注意。

    • 總結

    以上是生活随笔為你收集整理的OpenLayers - 加载静态图片（十二）的全部內容，希望文章能夠幫你解決所遇到的問題。

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