时间戳

首页 > 解决方案 > 如何在开放层 v6 中使用离线地图

asp.net-core - 如何在开放层 v6 中使用离线地图

问题描述

我在asp.net core有一个项目，想用离线地图，open layer v6支持离线地图吗？我找不到例子，任何人都可以帮忙吗？

标签： asp.net-coreopenlayersopenlayers-6

解决方案

  1. 您需要下载ol.js和ol.css或使用文档中的链接。

  2. 然后您需要使用 bigemap 下载地图文件（png）。

  3. 将它们放在 wwwroot 中，然后在布局中引用它们。

    <link href="./ol.css" rel="stylesheet" />
<script src="./ol.js"></script>

  4. 选择放置地图的位置，并调整大小。

    <div id="map" class="map"></div>

  5. 使用js绘制此地图。

    <script type="text/javascript">
   var map = new ol.Map({
   target: 'map', //the id of map 
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM()
     })
   ],
   view: new ol.View({
   center: ol.proj.fromLonLat([37.41, 8.82]),//Set the map center
   zoom: 4 //Default load level
  })
 });

  var offLineMap = new ol.layer.Tile({
   source: new ol.source.XYZ({
     url: 'tile/a.png' // the map has been downloaded
   })
  });
  map.addLayer(offLineMap);
</script>

推荐阅读