openLayers繪製靜態底圖

時間 2019-11-10

原文原文鏈接

因爲項目須要，須要是使用openlayers框架，因而開始安利一波openlayers，能夠點擊 https://openlayers.org/ 進入他的官網下載相關資源和案例javascript

學習的過程老是慢慢來的，先就不在vue react等一下js框架下使用了，直接上html，哈哈css

首先去他官網裏，https://openlayers.org/en/latest/doc/quickstart.html 進入快速開始界面，就是所謂的hello world html

而後開始敲代碼，在本地新建一個index.htmlvue

<!doctype html>
<html lang="en">

<head>
    <script src="./js/ol.js"></script>
    <link rel="stylesheet" href="./js/ol.css" type="text/css">
    <style>
        .map {
            height: 400px;
            width: 100%;
        }
    </style>
    <title>OpenLayers example</title>
</head>

<body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
</body>

</html>

而後編寫以上代碼，要是你直接用他官網上的cdn連接有點卡，能夠先下載對應的資源本地引入java

接着打開這個頁面，你會看到以下界面react

到此你就成功的創建了一個map框架

注意：一個map裏必不可少的參數是target--dom節點，view視圖， layers圖層dom

接下來咱們渲染一下自定義的靜態圖片學習

使用的是openlayers的 ol.layer.Image, 話很少說直接上代碼，哈哈ui

將上面index.html中的script裏的代碼修改爲以下界面

<script type="text/javascript">
        //地圖設置中心，設置到成都，在本地離線地圖offlineMapTiles恰好有一張zoom爲4的成都瓦片
        var center = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');
        //計算靜態地圖映射到地圖上的範圍，圖片像素爲550*344，保持比例的狀況下，把分辨率放大一些
        var extent = [
            center[0] - 550 * 1000 / 2,
            center[1] - 344 * 1000 / 2,
            center[0] + 550 * 1000 / 2,
            center[1] + 344 * 1000 / 2
        ];
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: center,
                zoom: 8,
                minZoom: 5,
                maxZoom: 12
            })
        });
        //加載靜態圖層
        map.addLayer(new ol.layer.Image({
            source: new ol.source.ImageStatic({
                url: './images/1S1F.png', // 靜態地圖
                imageExtent: extent          //映射到地圖的範圍
            })
        }));
    </script>

而後，刷新頁面，你會看到以下界面

因爲，簽了保密協議，因此個人一下廠區的底圖沒法截圖出來，你能夠跟換ol.source.ImageStatic 中的url進行驗證

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。