精华内容
下载资源
问答
  • 一、用 GeoServer 发布地图服务并且查看 选择 Tile Caching 里面的 Tile ...二、OpenLayers 调用 WMTS 服务 <template> <div id="map" ref="rootmap"> </div> </template> <scri..

    一、用 GeoServer 发布地图服务并且查看

    WMTS介绍参见:

    https://zhuanlan.zhihu.com/p/81258050;

    选择 Tile Caching 里面的 Tile Layers,选择预览方式为 EPSG:4326/png 

    点开预览该服务,然后在预览页面查看网页源码,查看具体的调用方式和所需的参数。

    二、OpenLayers 调用 WMTS 服务

    <template>
      <div id="map" ref="rootmap">
    
      </div>
    </template>
    
    <script>
      import "ol/ol.css";
      import { Map, View } from "ol";
      import Feature from 'ol/Feature';
      import {Vector as VectorLayer,Tile} from 'ol/layer'
      import {Point, LineString, Polygon} from 'ol/geom'
      import {Vector as VectorSource,OSM,WMTS} from 'ol/source';
      import WMTSTileGrid from 'ol/tilegrid/WMTS'
      import {Projection} from 'ol/proj'
    
      export default {
        name: 'OlWmts',
        data() {
          return {
            map: null
          };
        },
        mounted() {   //可以出来结果
          //切片名
          let matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3',
            'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8',
            'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13',
            'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18',
            'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
          //分辨率
          let resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625,
            0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625,
            0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
            1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5,
            1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6,
            6.705522537231445E-7, 3.3527612686157227E-7];
    
          let tileOSM = new Tile({
            source: new OSM()
          });
          //切片策略
          let tileGrid = new WMTSTileGrid({
            tileSize: [256,256],
            extent: [-180.0,-90.0,180.0,90.0],  //范围
            origin: [-180.0, 90.0],   //切片原点
            resolutions: resolutions,   //分辨率
            matrixIds: matrixIds    //层级标识列表,与地图级数保持一致
          });
          //设置地图投影
          let projection = new Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu'
          });
    
          let tileSource = new WMTS({
            url: 'http://localhost:8080/geoserver/gwc/service/wmts',
            layer:"tiger:china",
            format: "image/png",
            matrixSet:"EPSG:4326",
            projection: projection,
            tileGrid: tileGrid
          });
    
          let tileLayer = new Tile({
            opacity:0.7,    //透明度
            source: tileSource,
            wrapX:false,
          });
          let views = new View({
            center: [116.46, 39.92],
            projection: "EPSG:4326",
            zoom: 5,
            maxZoom: 8,
            minZoom:2
          });
          let map = new Map({
            layers: [tileOSM, tileLayer],
            view: views,
            target: 'map',
          });
    
        }
      };
    </script>
    
    <style>
      #map{
        height:800px;
        width: 1400px;
      }
      /*隐藏ol的一些自带元素*/
      .ol-attribution,.ol-zoom { display: none;}
    
    </style>
    

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • openlayers加载地图、加载WMTS、包引用

    千次阅读 2019-05-27 18:07:14
    (1)openlayers引入js、css方法: 官网的直接引入地址可能无效,可尝试引入以下地址的css、js: <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css"> <...

    (1)openlayers引入js、css方法:

    官网的直接引入地址可能无效,可尝试引入以下地址的css、js:

    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>

    (2)官方示例中import报错,解决办法:

    参考:https://www.jianshu.com/p/62b992aa2232

    采用webpack方式打开openlayers,示例项目地址:https://github.com/openlayers/ol-webpack

    在main.js中编写功能,再重新yarn run build即可。

     

    (3)打开WMTS的xml文件:

    WMTS的xml文件可以通过openlayers、ArcGIS API for JavaScript打开。

    openlayers打开WMTS的官方示例:

    https://openlayers.org/en/latest/examples/wmts-layer-from-capabilities.html?q=wmts

    https://openlayers.org/en/latest/examples/wmts.html?q=wmts

    https://openlayers.org/en/latest/examples/?q=wmts

     

    展开全文
  • OpenLayers 3 加载WMTS天地图

    千次阅读 2017-08-24 13:43:32
    使用哪个坐标系取决于加载的地图服务,如果坐标系与地图服务的不同,则可能出现无法加载地图的问题 var projection = ol.proj.get('EPSG:4326');//经纬度空间参考坐标系 var projection = ol.proj.get('EPSG:3857');...
    • 设置空间参考坐标系
      使用哪个坐标系取决于加载的地图服务,如果坐标系与地图服务的不同,则可能出现无法加载地图的问题
    var projection = ol.proj.get('EPSG:4326');//经纬度空间参考坐标系
    var projection = ol.proj.get('EPSG:3857');//墨卡托投影空间参考坐标系
    
    • 设置地图缩放层级分辨率
    var projectionExtent = projection.getExtent();
    var size = ol.extent.getWidth(projectionExtent) / 256;
    var resolutions = [];
    var matrixIds = [];
    for (var z = 2; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }
    
    • 创建tile layer
    var url = "http://www.sdmap.gov.cn/tileservice/SDPubMap";
    var tiandimap = new ol.layer.Tile({
                source: new ol.source.WMTS({
                    url: url,
                    projection: projection,
                    style: 'default',
                    format: 'image/png',
                    matrixSet: "EPSG:4326",
                    layer: "1",
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: ol.extent.getTopLeft(projectionExtent);,
                        resolutions: resolutions,
                        matrixIds: matrixIds
                    }),
                })
            });
    
    • 设置view
      如果不设置view,则地图无法加载
    var view = new ol.View({
                projection: projection,//坐标系参数如果不设置,则默认为墨卡托
                //resolutions:resolutions,//分辨率层级数组
                //resolution: resolutions[8],//初始展示分辨率,若不设置该参数,则需设置zoom参数,否则地图无法加载
                center: [120.151527, 35.99825595],//必须参数,否则地图无法加载
                zoom: 9
            })
    
    • 加载地图
    var map = new ol.Map({
            layers: [tiandimap] ,
            target: 'map',//为地图div的id
            controls: ol.control.defaults({//放缩控制组件
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }).extend([ // homebutton
                new ol.control.ZoomToExtent({
                    extent: [120.05144842, 35.95285152, 120.25160558, 36.04366038]
                })
            ]),
            view: view 
        });
    
    • 完整代码
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>WMTS</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
    </head>
    <style type="text/css">
    #map {
        width: 100%;
        height: 100%;
    }
    </style>
    
    <body>
        <div id="map" class="map"></div>
        <script>
        var projection = ol.proj.get('EPSG:4326');
        //var projection = ol.proj.get('EPSG:3857');
        var projectionExtent = projection.getExtent();
        var size = ol.extent.getWidth(projectionExtent) / 256;
        var resolutions = [];
        var matrixIds = [];
        for (var z = 0; z < 19; ++z) {
            resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = z;
        }
    
        var url = "http://www.sdmap.gov.cn/tileservice/SDPubMap";
        var tiandimap = new ol.layer.Tile({
                source: new ol.source.WMTS({
                    url: url,
                    projection: projection,
                    style: 'default',
                    format: 'image/png',
                    matrixSet: "EPSG:4326",
                    layer: "1",
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: ol.extent.getTopLeft(projectionExtent),
                        resolutions: resolutions,
                        matrixIds: matrixIds
                    }),
                })
            });
    
    	var view = new ol.View({
               projection: projection,//坐标系参数如果不设置,则默认为墨卡托
               //resolutions:resolutions,//分辨率层级数组
               //resolution: resolutions[8],//初始展示分辨率,若不设置该参数,则需设置zoom参数,否则地图无法加载
               center: [120.151527, 35.99825595],//必须参数,否则地图无法加载
               zoom: 9
           });        
    
        var map = new ol.Map({
            layers: [tiandimap],
            target: 'map',
            controls: ol.control.defaults({//放缩控制组件
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }).extend([ // homebutton
                new ol.control.ZoomToExtent({
                    extent: [120.05144842, 35.95285152, 120.25160558, 36.04366038]
                })
            ]),
            view: view
        });
        </script>
    </body>
    
    </html>
    
    展开全文
  • 首先看openlayers官网中wmts模块,https://openlayers.org/en/latest/apidoc/module-ol_source_WMTS-WMTS.html,里面的参数看你需要什么。 下面是我的代码 这个是需要地图需要参数,controlId是封装所需要的,...

    首先看openlayers官网中wmts模块,https://openlayers.org/en/latest/apidoc/module-ol_source_WMTS-WMTS.html,里面的参数看你需要什么。

    下面是我的代码

     

    这个是需要地图需要参数,controlId是封装所需要的,而这个layerName对应得就是openlayer的layer字段,url就是openlayers的url字段。

    怎么在geoserver中找他们呢?跟着图片来。

     

    选择png后看源码,这个源码也就是openlayer的代码,不会写可以在上面抄写。

    这里面会有你想要的,细心的伙伴你会发现,url对应不上,源码中的是../service/wmts,你这样写里面肯定是不行的啊,所以看上面的url,一定是你的域名+端口号+文件路径,到demo前面,

    所以最后的路径就是   http://www.***********.com:8080/geoserver/gwc/service/wmts

     

     希望有需要的小伙伴会有那么一丢丢的帮助,我也是初学者为自己记录,请大牛们多多指教。

     

    转载于:https://www.cnblogs.com/cqy1125/p/10978629.html

    展开全文
  • openlayers3中可以通过ol.source.WMTS、ol.source.XYZ等方式加载,无论哪一种,都需要根据上述几个参数进行配置, var tileGrid = new ol.tilegrid.TileGrid({ origin: origin, //原点(左上角) ...
  • 最近要了解Web GIS方面的知识,对我这些外行人来说比较吃力,用OpenLayers加载天地图也遇到了小打击,一番折腾,终于做到仅仅显示了,把过程简单记录下: 首先是百度一轮,看了不少博客,感觉差不多后,自己动手...
  • openlayers加载天地图WMTS服务

    千次阅读 2019-08-21 17:00:08
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel...
  • <!DOCTYPE html> <html> <head>...WMTS</title> <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css"> <!-- The ...
  • OpenLayers加载天地图方法——WMTS和XYZ

    万次阅读 2018-05-19 10:35:25
    1、ol.layer.Tile及数据源类结构openlayers中,图层(layer)不可缺少的组成部分是...从图可以看到,加载天地图的数据源,可以是ol.source.WMTS(简称WMTS) 和 ol.source.XYZ(简称XYZ)。下面首先以实际的代码对分...
  • OpenLayers4加载天地图WMTS注意事项

    千次阅读 2019-05-16 20:05:19
    openlayers4加载天地图注意事项 **天地图官网:**http://lbs.tianditu.gov.cn/home.html **OpenLayers官网:**https://openlayers.org/ 使用天地图之前需要申请密钥,我申请的是个人的浏览器端密钥。 申请的浏览器...
  • 我现在有离线切片坐标系为EPSG:4326,现在要使用openlayers加载,我看openlayers官网上 的例子,使用ol.source.TileWMS 数据源,我是不是要实现自己的数据源.
  • Geoserver Openlayers 加载数据总结

    千次阅读 2018-01-21 16:17:53
    经过一段时间的踩坑,现在总结一下利用Openlayers加载地图数据方法。 一 加载天地图、百度地图数据 openlayers3加载天地图数据 OpenLayers 3加载百度地图 注意其中的‘’确定服务地址‘’部分,在浏览器中F12...
  • 网上能查到的都太旧了,2020年... import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS'; import WMTSCapabilities from 'ol/format/WMTSCapabilities'; const namespace='xxx'; const layername='xxx..
  • 首先要阅读wfs文档,跟当初cesium加载wmts一样。 http://support.supermap.com.cn:8090/iserver/services/data-world/wfs100/utf-8 主要包括三个部分 Capability:指该服务具有的能力 查询具有哪些能力、获取...
  • wmts服务的部署见前面的文章,这里主要使用Openlayer来加载wmts服务 index.js文件如下: import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import WMTSCapabilities from 'ol/format/...
  • Openlayers3 添加WMTS图层

    2019-04-28 09:21:52
    'wmts' , matrixSet : 'EPSG:900913' , format : 'image/png' , projection : projection , tileGrid : new ol . tilegrid . WMTS ( { origin : ol . extent . getTopLeft ( projectionExtent ...
  • OpenLayers教程:多源数据加载WMTS

    千次阅读 2019-09-03 23:21:11
    目录 一、WMTS简介 ...三、加载ArcGIS产品发布的WMTS服务数据 3.1、加载ArcGIS Online发布的WMTS服务数据 3.2、加载ArcGIS Server发布的WMTS服务数据 四、加载GeoServer发布的WMTS服务数据 五、加载天...
  • Vue+OpenLayers加载天地图

    千次阅读 2019-04-22 09:53:02
    项目需要,实现功能:加载天地图,标注用户位置,定位到用户位置 <template> <div id="map" ref="rootmap"> <div id="mouse-position"></div> </div> </template> <...
  • OpenLayers5加载GeoServer WMS、WMTS服务

    千次阅读 2019-11-07 22:44:25
    OpenLayers 5.3.3 GeoServer 2.16.0 关于GeoServer如何发布WMS、WMTS服务请参考上一篇文章GeoServer数据服务发布及切片。如果您对什么是WMS、WMTS不太清楚的话,请参考WMS、WFS、WCS、WMTS服务。 WMS数据加载 直接上...
  • link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" /> <script src=...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 332
精华内容 132
关键字:

openlayers加载wmts