ArcGIS緊湊型切片讀取與應用2-webgis動態加載緊湊型切片(附源碼)

時間 2019-12-05

標籤 arcgis 緊湊切片讀取應用 webgis 動態加載源碼简体版

原文原文鏈接

系列文章目錄

ArcGIS緊湊型切片讀取與應用1-解析（附源碼）javascript

ArcGIS緊湊型切片讀取與應用2-webgis動態加載緊湊型切片(附源碼)html

ArcGIS緊湊型切片讀取與應用3-緊湊型批量轉分散型(附源碼)java

1.前言git

上篇主要講了一下緊湊型切片的的解析邏輯，這一篇主要講一下使用openlayers動態加載緊湊型切片的web地圖服務。github

2.代碼實現web

上篇已經能夠經過切片的x、y、z得對應的切片圖片，如今使用asp.net mvc方式提供讀取服務，這裏有一問題就是頻繁打開切文件會存在資源未釋放的佔用的狀況，致使請求失敗，這裏使用單例模式保證相同切片文件只打開一次，而且提供文件緩存與過時釋放機制，加快服務的請求返回速率。緩存

1.切片請求服務入口，提供基本的參數x、y、z以及緊湊切片文件路徑，系統返回對應的切片數據。安全

// 切片請求控制器
public ActionResult GetTile(int x, int y, int z)
{
     try
     {
         ArcgisBundleHelper Helper = new ArcgisBundleHelper(@"G:\feiq\Recv Files\Map_test\map");
         var data = Helper.GetTile(x, y, z);
         return File(data, "image/jpeg");
     }
     catch (Exception ex)
     {
         throw;
     }
}

2.單例模式實現的切文件緩存類，實現切片文件的新增緩存、過時緩存清除，以及經過索引的方式訪問切片文件。mvc

/// <summary>
/// 緩存切片單例類
/// </summary>
public class TileCache
{
     /// <summary>
     /// 獲取切片文件索引
     /// </summary>
     /// <param name="id"></param>
     /// <returns></returns>
     public BundleCache this[bundlx id]
     {
         get
         {
                 lock (obj)
                 {
                     return AddBundleCache(id);
                 }

        }
     }
     private static volatile TileCache instance;
     private static readonly object obj = new object();
     private TileCache() { }
     //線程安全單例
     public static TileCache Instance
     {
         get
         {
             if (null == instance)
             {
                 lock (obj)
                 {
                     if (null == instance)
                     {
                         instance = new TileCache();
                     }
                 }

            }
             return instance;
         }
     }
     /// <summary>
     /// 設置最多緩存文件數目
     /// </summary>
     private static int cacheCount = 20;
     /// <summary>
     /// 切片文件緩存集合類
     /// </summary>
     private static List<BundleCache> bundleCacheList = new List<BundleCache>();
     /// <summary>
     /// 經過id返回切片緩存
     /// </summary>
     /// <param name="cache"></param>
     /// <returns></returns>
     private static BundleCache AddBundleCache(bundlx cache)
     {
         string cacheid = cache.id;

            if (bundleCacheList.Select(e => e.BundleId).ToList().Contains(cacheid))
             {
                 //更新最後訪問時間
                 BundleCache tem = bundleCacheList.Where(e => e.BundleId == cacheid).FirstOrDefault();
                 tem.LastTime = DateTime.Now;
                 changeCache();
                 return bundleCacheList.Where(e => e.BundleId == cacheid).FirstOrDefault();
             }
             else
             {
                 //未添加的文件，寫入緩存集合
                 BundleCache bc = new BundleCache();
                 bc.BundleId = cache.id;
                 bc.CTime = DateTime.Now;
                 bc.LastTime = DateTime.Now;
                 using (FileStream file = new FileStream(cache.bundlxFileName, FileMode.Open))
                 {
                     byte[] bufferfile = new byte[file.Length];
                     file.Read(bufferfile, 0, (int)file.Length);
                     //寫入數據
                     bc.BundlxData = bufferfile;
                 }
                 using (FileStream file = new FileStream(cache.bundleFileName, FileMode.Open))
                 {
                     byte[] bufferfile = new byte[file.Length];
                     file.Read(bufferfile, 0, (int)file.Length);
                     //寫入數據
                     bc.BundleData = bufferfile;
                 }
                 bundleCacheList.Add(bc);
                 changeCache();
                 return bc;
         }
     }
     /// <summary>
     /// 保證緩存文件數目必定
     /// </summary>
     private static void changeCache()
     {
         if (bundleCacheList.Count>cacheCount)
         {
             bundleCacheList= bundleCacheList.OrderByDescending(e => e.LastTime).ToList().Take(cacheCount).ToList();
         }
     }
}

3.咱們的服務地址爲 "/Tile/GetTile?x={x}&y={y}&z={z}"，使用openlayers動態加載緊湊型切片。加載的結果如圖。asp.net

@{
     ViewBag.Title = "Index";
     Layout = null;
}
<style>

    html, body, #map {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
     }
</style>
<div id="map">

</div>
<script src="~/Content/openlayer4.64/ol.js"></script>
<script type="text/javascript">
     var mapurl = "/Tile/GetTile?x={x}&y={y}&z={z}";
     var maplayer = new ol.layer.Tile({
         name: "testLayer",
         // 瓦片圖像數據源
         source: new ol.source.XYZ({
             crossOrigin: 'anonymous',
             url: mapurl
         }),
         opacity: 1
     });
     var map = new ol.Map({
         target: 'map',
         layers: [
             maplayer
         ],
         view: new ol.View({
             center: ol.proj.fromLonLat([104.41, 33.82]),
             zoom: 4
         })
     });
</script>