2. 程式人生 > >Openlayers3 載入Geowebcache 釋出的 ArcGIS 切片地圖

Openlayers3 載入Geowebcache 釋出的 ArcGIS 切片地圖

阿新 • • 發佈：2019-02-08

openlayes版本 ：3.13.1
geowebcache: 1.10.0

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  rel="stylesheet"  type="text/css" href="./libs/ol3.13.1/ol.css" />
    <style type="text/css">
        /* 滑鼠位置控制元件層樣式設定 */
 

        #mouse-position {
            float: left;
            position: absolute;
            bottom: 5px;
            width: 500px;
            height: 20px;
            /*在地圖容器中的層，要設定z-index的值讓其顯示在地圖上層*/
            z-index: 2000;
        }
        /* 滑鼠位置資訊自定義樣式設定 */
        .custom-mouse-position {
            color
 
: rgb(0,0,0);
            font-size: 16px;
            font-family: "微軟雅黑";
        }
    </style>
</head>
<body>
    <div id="map">
        <div id="mouse-position">
        </div>
    </div>
</body>
<script src="libs/ol3.13.1/ol-debug.js"></script>
<script
 
 src="./libs/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">

        //例項化滑鼠位置控制元件（MousePosition）
        var mousePositionControl = new ol.control.MousePosition({
            //座標格式
            coordinateFormat: ol.coordinate.createStringXY(4),
            //地圖投影座標系（若未設定則輸出為預設投影座標系下的座標）
            projection: 'EPSG:3857',
            //座標資訊顯示樣式類名，預設是'ol-mouse-position'
            className: 'custom-mouse-position',
            //顯示滑鼠位置資訊的目標容器
            target: document.getElementById('mouse-position'),
            //未定義座標的標記
            undefinedHTML: '&nbsp;'
        });

        var pos = ol.proj.get('EPSG:3857');

        var map=new ol.Map({
            //地圖容器div的ID
            target: 'map',
            //地圖容器中載入的圖層
            layers: [
                // new ol.layer.Tile({
                //     source: new ol.source.OSM()
                // })
            ],
            view: new ol.View({
                //設定地圖投影座標系
                projection: pos,
                center: [133135942.5127,4932500.5445],
                zoom:10
            }),
            //載入控制元件到地圖容器中
            controls: ol.control.defaults({
                /* @type {ol.control.Attribution} */
                attributionOptions: ({
                    //地圖資料來源資訊控制元件是否可收縮,預設為true
                    collapsible: true
                })
            }).extend([mousePositionControl])//載入滑鼠位置控制元件
        });


        var layer=new ol.layer.Tile({
            source:new ol.source.TileWMS({
                url:'http://localhost:8081/geowebcache/service/wms',
                params:{
                    'LAYERS':'test1',
                    'FORMAT':'image/png',
                    'SRS':'EPSG:3857'
                },
                tileGrid:new ol.tilegrid.TileGrid({
                    resolutions:[156543.03392800014,
                        78271.51696399994, 
                        39135.75848200009, 
                        19567.87924099992,
                        9783.93962049996, 
                        4891.96981024998, 
                        2445.98490512499,
                        1222.992452562495, 
                        611.4962262813797, 
                        305.74811314055756, 
                        152.87405657041106, 
                        76.43702828507324, 
                        38.21851414253662, 
                        19.10925707126831,
                        9.554628535634155,
                        4.77731426794937, 
                        2.388657133974685, 
                        1.1943285668550503,
                        0.5971642835598172, 
                        0.29858214164761665],
                    origin:[-20037508.342787001, 20037508.342787001]
                })
            })
        })

        map.addLayer(layer);

    </script>
</html>

需要注意的是：
params中對應 切片地圖的 名稱，格式和參考系統，
其中resolutions 和 origin 對應的範圍在 arcgis 切片目錄下 con.xml 配置檔案中可以找到。

參考系統不對，或範圍格式不對可能出不了圖。

效果：
這裡寫圖片描述

相關推薦

Openlayers3 載入Geowebcache 釋出的 ArcGIS 切片地圖

openlayes版本 ：3.13.1 geowebcache: 1.10.0 程式碼如下： <!DOCTYPE html> <html lang="en">

geowebcache釋出arcgis切片

文章內容來自https://www.cnblogs.com/flanker521/p/5845793.html，感謝博主文章解決我的問題 arcgis map 版本:10.1,10.2,10.3均可 jre：7或者8 geoserver：2.8.2以上 切片：鬆散型，25

使用Geoserver(其實是Geowebcache) 釋出本地的ArcGIS 切片地圖

幾經波折，終於將ArcGIS切好的離線切片地圖釋出了出來，先來看看效果： 工具： geoserver 2.12.1 Arcgis 版本 10.3 geowebcache 1.10.0 遺留問題 ： geoserver 服務進不去了：待後續解決~

利用全能電子地圖下載器+GeoWebCache釋出Arcgis Server快取瓦片過程全記錄

前言 因為公司業務需要，要在內網搭建一個瓦片地圖伺服器，於是乎這個任務就落到我這個實習生身上了。這個屬於GIS(地理資訊系統)的範疇了，我也從來沒有接觸過這個，這個課程在大學的時候只有其他專業有。哎~沒辦法，還是要開始折騰，要找到一種方便好用的跨平臺方案還真不容易，前前後後試了好幾款

leaflet：改造繼承L.TileLayer類適配arcgis切片地圖

all span class call pre 地圖 color services geo 1、繼承L.TileLayer的新類arcgisTiledLayer L.TileLayer.ArcgisTiledLayer = L.TileLayer.extend({

Leaflet載入GeoServer釋出的WMTS地圖服務

       leaflet本身並不支援WMTS服務，需要藉助leaflet-tilelayer-wmts外掛實現，但是外掛是為通用WMTS服務實現的。在使用的過程中出現了無法呼叫的問題，這裡進行了稍微修改。載入地圖var map = L.map('map', { a

(四) arcgis runtime for android 100.3開發學習（載入切片地圖服務）

今天我們來學習關於arcgis for android載入切片地圖服務相關知識。使用的是新版本的arcgis runtime for android100.3，我們來看下載入切片地圖服務的類ArcGISTiledLayer，該類繼承了ImageTiledLayer類，其中Ar

（二）ArcGIS Server之釋出切片地圖服務

1.什麼是切片地圖服務？      切片地圖服務又叫快取第服務區，地圖快取是使地圖和影象服務更快執行的一種非常有效的方法。建立地圖快取時，伺服器會在若干個不同的比例級別上繪製整個地圖並存儲地圖影象的副本。然後，伺服器可在某人請求使用地圖時分發這些影象

Leaflet，OpenLayers3載入ArcGIS切片（png格式，Exploded鬆散型）

需求 　　做了一個簡單的WebGIS應用，不想因為載入切片就安裝一臺GIS伺服器。於是想直接訪問圖片的方式來載入地圖。 需解決的問題 　　leafletjs目前是不能夠直接載入ArcGIS服務切片的，但可以藉助esri-leaflet外掛來載入。如果沒

（四）ArcGIS JS 載入切片地圖服務

前言         在上一篇部落格講述了怎麼釋出切片地圖服務，在本章中介紹怎麼在JavaScript載入切片地圖服務。 準備 思路 例項化地圖物件 例項化切片圖層物件 將切片

開源方案搭建可離線的精美矢量切片地圖服務-7.Arcgis Pro企業級應用

地圖渲染 www. map 軟件下載 新版本 AR 要點 導入 rod 1.前言 上篇講.pbf字體庫的時候說到我們使用的字體通過Arcgis Pro 生成，Arcgis Pro樣式基於Mapbox做的矢量切片地圖渲染。這篇主要講一下Arcgis Pro矢量切

基於GeoServer切片地圖服務的釋出

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

BIGEMAP如何釋出ArcGIS Server離線地圖(google 瓦片)

說明 本案例實現內容：GoogleEarth瓦片地圖的獲取、在ArcGIS Server Manger中釋出下載好的影像瓦片資料。   工具準備 1、BIGEMAP地圖下載器 2、ARCGIS10.2  3、ARCGIS SERVER 一、下載瓦片資料

利用ajax請求arcgis釋出的wfs地圖要素服務

首先在寫這篇部落格之前，要感謝我的同事們，得到他們的指點，學到了不少的東西。可以說站在巨人的肩膀上，讓你看得更高、更遠。也榮幸遇到這樣的巨人。 最近開發的這個地理資訊系統專案，我負責了三維平臺部分。在三維平臺中需要接入二維釋出的資料，而我們二維地圖使用的是esri的arcg

4.02WorldWindAndroid載入天地圖線上非正切片地圖

WorldWindAndroid對於TileImage的載入預設是按照等經緯差的正切片載入的，經圈範圍-180--180，緯圈範圍-90--90，所以，經緯方向上的切片規格為2X1！ 為了能夠載入經緯差之比為2：1的切片服務，需要將載入正切片的方式進行一定的處理，才能正確載入本服務！ 1、第一級

BIGEMAP---如何釋出ArcGIS Server離線地圖(google 瓦片)

說明 本案例實現內容：GoogleEarth瓦片地圖的獲取、在ArcGIS Server Manger中釋出下載好的影像瓦片資料。   工具準備 1、BIGEMAP地圖下載器 2、ARCGIS10.2      3、ARCGIS SER

openlayers載入切片地圖

使用的軟體是tilemile。openlayers2和openlayers3載入切片地圖使用的介面是不同的。下面做分析。 openlayers2: layerName為圖層名字，tileUrl為切片所在路徑 function getTileLayerFunc(layerN

從零開始釋出一個ArcGIS Server地圖服務

@[Toc] 此前從未接觸過ArcGIS，對Oracle和postGre SQL也比較陌生。本文介紹了從零開始，到搭建環境，再到釋出第一個ArcGIS地圖服務的完整過程。 # 一、軟體環境搭建 由於在地圖製作時我們需要在 arcMap 中讀取資料庫中的地理資料，並且在釋出地圖服務時。ar

開源方案搭建可離線的精美矢量切片地圖服務-1.開篇（附成果演示地址）

post tom 進入 test image postgres 博客園 就是 虛擬 先不說廢話直接上地址：（所有東西都在阿裏雲的共享雲虛擬主機上，訪問地圖可以會有點慢，請多多包涵）。 01：中國地圖：http://test.sharegis.cn/mapbox/h

geoserver發布瓦片，geoserver發布arcgis切片和geoserver發布金字塔切片

span IT nbsp itl tps 宋體 font server ans 1 轉https://www.jianshu.com/p/cf046ec1efd2，分享使用geoserver發布arcgis切片 2 轉 http://www.it610.com/articl