首页 > 程序开发 > 综合编程 > 其他综合 >

通过OpenLayers3调用TileMapServer的栅格瓦片服务与失量瓦片服务

2017-01-11

通过OpenLayers3调用TileMapServer的栅格瓦片服务与失量瓦片服务。TileMapServer是一个高性能的Web地图服务器,可以非常方便快速的将己有的失量地图发布为Web地图服务。

TileMapServer是一个高性能的Web地图服务器,可以非常方便快速的将己有的失量地图发布为Web地图服务。失量地图支持shp、tab、mif三种文件格式的导入,并可以支持栅格瓦片,失量瓦片及空间信息查询等常用的web地图服务。

以下是调用TileMapServer的栅格瓦片服务js方法:

<script>
var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM({url:"https://127.0.0.1:8080/tilemap?level={z}&ix={x}&iy={y}"})
        })
    ],
    target: &#39;map&#39;,
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }),
        view: new ol.View({ center: [112, 21], zoom: 5 })
    });
</script>

以下是调用TileMapServer失量瓦片的方法:

<script>
    var map = new ol.Map({
        layers: [
          new ol.layer.VectorTile({
              source: new ol.source.VectorTile({
                  format: new ol.format.MVT(),
                  tileGrid: ol.tilegrid.createXYZ({ maxZoom: 22 }),
                  tilePixelRatio: 16,
                  url: &#39;https://127.0.0.1:8080/vector-tile?level={z}&ix={x}&iy={y}&#39;
              }),
              style: createMapboxStreetsV6Style()
          })
        ],
        target: &#39;map&#39;,
        controls: ol.control.defaults().extend([
            new ol.control.MousePosition()
        ]),
        view: new ol.View({
            projection: &#39;EPSG:3857&#39;,
            center: [0, 0],
            zoom: 2
        })
    });
</script>

以下是服务器的配制文件:

<server>


 <!--服务器提供http服务的端口-->
  <port>8080</port>
  <!--该文件为TileMap生成的地图文件,需要将同名的cfg文件放在同一文件夹-->
  <database>D:\test11.gid</database>
  <tile>
    <!--地图背景,也可以配制为图片文件,图片的颜色应尽可能的简单-->
    <background>#ffcae2f0</background>
    <!--瓦片缓存级别,大于该级别的瓦片不会缓存到文件中-->
    <cache-level>16</cache-level>
    <!--服务器在内存中缓存瓦片的数量,当级别大于cache-level时会缓存在内存中-->
    <cache_count>500</cache_count>
    <!--瓦片缓存路径,请确保有足够的存储空间-->
    <cache-path>d:\map\tile</cache-path>
  </tile>
  <vectortile>
    <!--失量瓦片缓存级别,大于该级别的瓦片不会缓存到文件中-->
    <cache-level>10</cache-level>
    <!--服务器在内存中缓存瓦片的数量,当级别大于cache-level时会缓存在内存中-->
    <cache_count>500</cache_count>
    <!--渲染精度,长度长于该值的线条均会被忽略-->
    <accuracy>20</accuracy>
    <!--失量瓦片缓存路径,请确保有足够的存储空间-->
    <cache-path>d:\map\vectortile</cache-path>
  </vectortile>
  <!--服务器执行http请求的线程数量-->
  <threads>1</threads>
  <headers>
    <!--该内容服务器会直接加入http头里面,可根据需要自行设置-->
    <header name="Cache_control" value="max-age=30"/>
    <header name="Access-Control-Allow-Origin" value="*"/>
  </headers>
</server>
相关文章
最新文章
热点推荐