精华内容
下载资源
问答
  • WMTS加载

    2020-08-12 16:24:16
    使用arcgis js api 加载wmts代码 直接访问http://www.supermap.com.cn:8090/iserver/services/map-china400/wmts-china可以直接查看wmts的GetCapabilities内容。等同于...

    使用arcgis js api 加载wmts代码

    直接访问http://www.supermap.com.cn:8090/iserver/services/map-china400/wmts-china 可以直接查看wmts的GetCapabilities内容。等同于http://www.supermap.com.cn:8090/iserver/services/map-china400/wmts-china?SERVICE=WMTS&request=GetCapabilities

    ResourceURl 可以通过http://www.supermap.com.cn:8090/iserver/services/map-china400/wmts-china/China/default/ChinaPublicServices_China/9/150/849.png进行访问。实际在web中查看network访问的地址是通过wmts的

    GetTile进行访问的:

    http://www.supermap.com.cn:8090/iserver/services/map-china400/wmts-china?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=China&STYLE=default&FORMAT=image/png&TILEMATRIXSET=ChinaPublicServices_China&TILEMATRIX=9&TILEROW=150&TILECOL=849

    在JS代码中TileInfo的rows和cols应该是对应TileMatrix的TileWidth和TileHeight。如果修改该值,虽然也可以显示,但是会出现图片显示有问题,位置不对。超图中TileInfo中LODS是标准<WellKnownScaleSet>ChinaPublicServices</WellKnownScaleSet>,天地图http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts&tk=41992f255f5c4efffceb41e0f06d3dc2也是采用这个切图比例。但是其它省的发布的服务不一定是采用这个比例的(天地图官网可以查询其它地图服务),比如浙江(也不需要申请key)。天地图每个种类的地图都有两种切图,一种是经纬度,一个是墨卡托。

    http://srv.zjditu.cn/ZJEMAP_2D/wmts?request=GetCapabilities&service=wmts

    • 加载esr的WMTS服务

    https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=SRTM_Color_Index&STYLE=default&FORMAT=image/png&TILEMATRIXSET=31.25m&TILEMATRIX=3&TILEROW=2&TILECOL=7

    可以通过上面访问具体某个图片,但是https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/?SERVICE=WMTS&request=GetCapabilities访问不到元数据信息,如何获取?还是该服务并没有提供此功能?

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Map with WMTS resourceinfo</title>
    
        <link rel="stylesheet" href="https://js.arcgis.com/3.33/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="https://js.arcgis.com/3.33/esri/css/esri.css">
        <style>
            html,
            body,
            #map {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script src="https://js.arcgis.com/3.33/"></script>
    
        <script>
            require([
                "esri/map",
                "esri/layers/WMTSLayer",
                "esri/layers/WMTSLayerInfo",
                "esri/geometry/Extent",
                "esri/layers/TileInfo",
                "esri/SpatialReference",
                "dojo/parser",
                "dijit/layout/BorderContainer",
                "dijit/layout/ContentPane",
                "dojo/domReady!"
            ], function(
                Map, WMTSLayer, WMTSLayerInfo,
                Extent, TileInfo, SpatialReference,
                parser
            ) {
                parser.parse();
    
                var map = new Map("map", {
                    center: [86.9, 28],
                    zoom: 3
                });
    
                var tileInfo = new TileInfo({
                    "dpi": 96,
                    "format": "format/png",
                    "compressionQuality": 0,
                    "spatialReference": new SpatialReference({
                        "wkid": 4326
                    }),
                    "rows": 512,
                    "cols": 512,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "lods": [{
                        "level": "0",
                        "scale": 236663484.36365247,
                        "resolution": 0.5624999999999999
                    }, {
                        "level": "1",
                        "scale": 118331742.18182631,
                        "resolution": 0.28125000000000017
                    }, {
                        "level": "2",
                        "scale": 59165871.090913124,
                        "resolution": 0.140625
                    }, {
                        "level": "3",
                        "scale": 29582935.545456562,
                        "resolution": 0.0703125
                    }, {
                        "level": "4",
                        "scale": 14791467.772728289,
                        "resolution": 0.03515625000000002
                    }, {
                        "level": "5",
                        "scale": 395733.8863641415,
                        "resolution": 0.017578125000000003
                    }, {
                        "level": "6",
                        "scale": 3697866.94318207,
                        "resolution": 0.008789062499999998
                    }, {
                        "level": "7",
                        "scale": 1848933.471591035,
                        "resolution": 0.004394531249999999
                    }, {
                        "level": "8",
                        "scale": 924466.7357955176,
                        "resolution": 0.002197265625
                    }, {
                        "level": "9",
                        "scale": 462233.3678977588,
                        "resolution": 0.0010986328125
                    }, {
                        "level": "10",
                        "scale": 231116.6839488794,
                        "resolution": 0.00054931640625
                    }, {
                        "level": "11",
                        "scale": 115558.3419744397,
                        "resolution": 0.000274658203125
                    }]
                });
                var tileExtent = new Extent(-180, -90, 180, 90, new SpatialReference({
                    wkid: 4326
                }));
    
                var layerInfo = new WMTSLayerInfo({
                    tileInfo: tileInfo,
                    fullExtent: tileExtent,
                    initialExtent: tileExtent,
                    identifier: "SRTM_Color_Index",
                    tileMatrixSet: "31.25m",
                    format: "png",
                    style: "default"
                });
    
                var resourceInfo = {
                    version: "1.0.0",
                    layerInfos: [layerInfo],
                    copyright: "earthdata"
                };
    
                var options = {
                    serviceMode: "KVP",
                    resourceInfo: resourceInfo,
                    layerInfo: layerInfo
                };
    
                wmtsLayer = new WMTSLayer("https://gibs.earthdata.nasa.gov/wmts/epsg4326/best", options);
                map.addLayer(wmtsLayer);
            });
        </script>
    </head>
    
    <body>
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%; margin: 0;">
    
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div id="citationInfo">
                <a href="https://earthdata.nasa.gov">Earthdata</a>
                served by
                <a href="https://www.nasa.gov">NASA</a>
            </div>
        </div>
    
    </div>
    </body>
    
    </html>
    • 加载supermap发布的wmts服务
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>WMTS地图服务</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.33/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="https://js.arcgis.com/3.33/esri/css/esri.css">
        <script src="https://js.arcgis.com/3.33/"></script>
    
        <style>
            html,
            body,
            #map {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    
        <script>
            require([
                "esri/map",
                "esri/layers/WMTSLayer",
                "esri/layers/WMTSLayerInfo",
                "esri/geometry/Extent",
                "esri/layers/TileInfo",
                "esri/SpatialReference",
                "dojo/domReady!"
            ], function (
                Map,
                WMTSLayer,
                WMTSLayerInfo,
                Extent,
                TileInfo,
                SpatialReference,
                parser
            ) {
                var map = new Map("map", {
                    center: [117,36.651],
                    zoom: 8
                });
    
                var tileInfo = new TileInfo({
                    "dpi": 96,
                    "format": "image/png",
                    "compressionQuality": 0,
                    "spatialReference": new SpatialReference({
                        "wkid": 4326
                    }),
                    "rows": 256,
                    "cols": 256,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "lods": [
                        {"level": "0","scale": 295829355.45,"resolution": 0.703125},
                        {"level": "1","scale": 147914677.725,"resolution": 0.3515625},
                        {"level": "2", "scale": 73957338.8625,"resolution": 0.17578125},
                        {"level": "3","scale": 36978669.43125,"resolution": 0.087890625},
                        {"level": "4","scale": 18489334.715625,"resolution": 0.0439453125},
                        {"level": "5","scale": 9244667.3578125,"resolution": 0.02197265625},
                        {"level": "6","scale": 4622333.67890625,"resolution": 0.010986328125},
                        {"level": "7","scale": 2311166.83945312,"resolution": 0.0054931640625},
                        {"level": "8","scale": 1155583.41972656,"resolution": 0.00274658203125},
                        {"level": "9","scale": 577791.709863281,"resolution": 0.001373291015625},
                        {"level": "10","scale": 288895.8549316406,"resolution": 0.0006866455078125},
                        {"level": "11","scale": 144447.9274658203,"resolution": 0.00034332275390625},
                        {"level": "12","scale": 4508.935440959931,"resolution": 0.000171661376953125},
                        {"level": "13","scale": 36111.98186645508,"resolution": 0.0000858306884765625},
                        {"level": "14","scale": 18055.99093322754,"resolution": 0.0000429153442382812},
                        {"level": "15","scale": 9027.99546661377,"resolution": 0.0000214576721191406},
                        {"level": "16","scale": 4513.997733306885,"resolution": 0.0000107288360595703},
                        {"level": "17","scale": 2256.9988666534423,"resolution": 0.00000536441802978515},
                        {"level": "18","scale": 1128.4994333267211,"resolution": 0.00000268220901489257},
                        {"level": "19","scale": 564.2497166633606,"resolution": 0.00000134110450744628}
                    ]
                });
                var tileExtent = new Extent(-180.0 , -85.0511287798065,180.0 , 85.05112877980648, new SpatialReference({
                    wkid: 4326
                }));
    
                var layerInfo = new WMTSLayerInfo({
                    tileInfo: tileInfo,
                    fullExtent: tileExtent,
                    initialExtent: tileExtent,
                    identifier: "China",
                    tileMatrixSet: "ChinaPublicServices_China",
                    format: "png",
                    style: "default"
                });
    
                var resourceInfo = {
                    version: "1.0.0",
                    layerInfos: [layerInfo],
                    copyright: ""
                };
                var options = {
                    serviceMode: "KVP",
                    resourceInfo: resourceInfo,
                    layerInfo: layerInfo
                };
                var wmtsLayer = new WMTSLayer("http://www.supermap.com.cn:8090/iserver/services/map-china400/wmts-china", options);
                map.addLayer(wmtsLayer);
            });
        </script>
    </head>
    <body>
    <div id="map"></div>
    </body>
    </html>
    • ArcMap加载天地图,因为需要tk,所以和其他的有所不同,(参数需要如下添加使用服务端tk)但是添加img_w平面的就无法显示?

    添加之后拖动到地图窗口就可以显示

    js加载 使用申请的浏览器的tk

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
        <title>天地图影像(经纬度) - 4.x</title>
    
        <!-- 用4.12的api会报错  -->
        <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css"/>
        <script src="https://js.arcgis.com/4.10/"></script>
    
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
        </style>
    
        <script>
            require([
                "esri/Map",
                "esri/layers/WebTileLayer",
                'esri/layers/support/TileInfo',
                'esri/views/MapView',
                'dojo/domReady!'
            ], function (Map, WebTileLayer, TileInfo, MapView) {
                var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
                var token = "41992f255f5c4efffceb41e0f06d3dc2"; //天地图token
    
                // 首先设定瓦片信息,天地图经纬度地图的切片信息全部使用该信息设定
                var tileInfo = new TileInfo({
                    dpi: 90.71428571427429,
                    rows: 256,
                    cols: 256,
                    compressionQuality: 0,
                    origin: {
                        x: -180,
                        y: 90
                    },
                    spatialReference: {
                        wkid: 4326
                    },
                    lods: [
                        {level: 2, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502},
                        {level: 3, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508},
                        {level: 4, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754},
                        {level: 5, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877},
                        {level: 6, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385},
                        {level: 7, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693},
                        {level: 8, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846},
                        {level: 9, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423},
                        {level: 10, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116},
                        {level: 11, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558},
                        {level: 12, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779},
                        {level: 13, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895},
                        {level: 14, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447},
                        {level: 15, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724},
                        {level: 16, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619},
                        {level: 17, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309},
                        {level: 18, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655},
                        {level: 19, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275},
                        {level: 20, levelValue: 2, resolution: 1.341104507446289075e-006, scale: 563.616930119991375}
                    ]
                })
    
                //地图(经纬度)
                var tiledLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo
                });
    
                //注记(经纬度)
                var tiledLayerAnno = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo
                });
    
                // 创建地图,不设置底图,如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
                var map = new Map({
                    spatialReference: {
                        wkid: 4326
                    },
                    basemap: {
                        baseLayers: [tiledLayer, tiledLayerAnno]
                    }
                });
    
                var view = new MapView({
                    container: "viewDiv",
                    spatialReference: {
                        wkid: 4326
                    },
                    map: map,
                    center: [108.953098279, 34.2777998978],
                    //1:scale的图
                    scale: 2000000
                });
    
            });
        </script>
    </head>
    
    <body>
    <div id="viewDiv"></div>
    </body>
    </html>

    对于3.x的js api可以使用扩展TiledMapServiceLayer方式,注意网上代码url地址最新t1.tianditu.gov.cn

    define(["dojo/_base/declare",
            "esri/layers/tiled"],
        function (declare) {
            return declare(esri.layers.TiledMapServiceLayer, {
                constructor: function () {
                    this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
                    this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
                    this.tileInfo = new esri.layers.TileInfo({
                        "rows": 256,
                        "cols": 256,
                        "compressionQuality": 0,
                        "origin": {
                            "x": -180,
                            "y": 90
                        },
                        "spatialReference": {
                            "wkid": 4326
                        },
                        "lods": [
                            { "level": 2, "resolution": 0.3515625, "scale": 147748796.52937502 },
                            { "level": 3, "resolution": 0.17578125, "scale": 73874398.264687508 },
                            { "level": 4, "resolution": 0.087890625, "scale": 36937199.132343754 },
                            { "level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877 },
                            { "level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385 },
                            { "level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693 },
                            { "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },
                            { "level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },
                            { "level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116 },
                            { "level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },
                            { "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },
                            { "level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },
                            { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },
                            { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },
                            { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },
                            { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },
                            { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }
                        ]
                    });
                    this.loaded = true;
                    this.onLoad(this);
                },
                getTileUrl: function (level, row, col) {
                    return "http://t1.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles&tk=41992f255f5c4efffceb41e0f06d3dc2";
                }
            });
        });
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>TianDi Map</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
        <style>
            html, body, #map {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="text/javascript">
            dojoConfig = {
                parseOnLoad: true,
                packages: [{
                    name: 'bdlib',
                    location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js/bdlib"
                }]
            };
        </script>
        <script src="https://js.arcgis.com/3.26/"></script>
        <script>
            var map;
            require(["esri/map",
                    "bdlib/TDTLayer",
                    "esri/layers/FeatureLayer",
                    "esri/geometry/Point",
                    "esri/symbols/SimpleFillSymbol",
                    "esri/symbols/SimpleLineSymbol",
                    "dojo/_base/Color",
                    "dojo/domReady!"],
                function (Map,
                          TDTLayer,
                          FeatureLayer,
                          Point,
                          SimpleFillSymbol,
                          SimpleLineSymbol,
                          Color
                ){
                    map = new Map("map", { logo: false });
                    var basemap = new TDTLayer();
                    map.addLayer(basemap);
                    var pt = new Point(103.847, 36.0473);
                    map.centerAndZoom(pt, 3);
                });
        </script>
    </head>
    <body>
    <div id="map"></div>
    </body>
    </html>

    目录结构如下:

    注意上面天地图使用的是经纬度的,如果是墨卡托地图只是修改了url地址这样虽然可以显示地图,但是经纬度定位是不对的。

     http://www.supermap.com.cn:8090/iserver/services    超图官方的IServer

     

    另外使用js3.x版本使用WMTSLayer加载天地图,(ArcGIS源码会给WMTSLayer的format字段自动加上“image/”,而天地图支持的格式“tiles”不接受format=image/png这样的参数)。可以参考https://blog.csdn.net/OldMonkeyYu_s/article/details/53710779?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>test</title>
    
        <style>
            html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
            #map { padding:0; }
            #citationInfo { position:absolute; color:black; font-weight:bold; font-size:12pt; left:10px; bottom:10px; z-Index:999; }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    
        <script type="text/javascript" src="https://js.arcgis.com/3.18compact/"></script>
        <script type="text/javascript" src="WMTSLayer.js"></script>
        <script>
            var map, wmtsLayer;
            require([
                "esri/map", "esri/layers/WMTSLayer", "esri/layers/WMTSLayerInfo",
                "esri/geometry/Extent", "esri/layers/TileInfo", "esri/SpatialReference",
                "dojo/parser",
    
                "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
            ], function (
                Map, WMTSLayer, WMTSLayerInfo,
                Extent, TileInfo, SpatialReference,
                parser
            ) {
                parser.parse();
    
                var bounds = new Extent({
                    "xmin": -128.816, "ymin": 25.076, "xmax": -72.855, "ymax": 51.385,
                    "spatialReference": { "wkid": 4326 }
                });
                map = new Map("map", {
                    extent: bounds
                });
    
                var tileInfo1 = new TileInfo({
                    "dpi": 96,
                    "format": "tiles",
                    "compressionQuality": 0,
                    "spatialReference": new SpatialReference({
                        "wkid": 4326
                    }),
                    "rows": 256,
                    "cols": 256,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "lods": [{
                        "level": "1",
                        "scale": 295829355.455,
                        "resolution": 0.703914402554
                    }, {
                        "level": "2",
                        "scale": 147914677.727,
                        "resolution": 0.351957201277
                    }, {
                        "level": "3",
                        "scale": 73957338.8636,
                        "resolution": 0.175978600638
                    }, {
                        "level": "4",
                        "scale": 36978669.4318,
                        "resolution": 0.0879893003192
                    }, {
                        "level": "5",
                        "scale": 18489334.7159,
                        "resolution": 0.0439946501596
                    }, {
                        "level": "6",
                        "scale": 9244667.35796,
                        "resolution": 0.0219973250798
                    }, {
                        "level": "7",
                        "scale": 4622333.67898,
                        "resolution": 0.0109986625399
                    }, {
                        "level": "8",
                        "scale": 2311166.83949,
                        "resolution": 0.00549933126995
                    }, {
                        "level": "9",
                        "scale": 1155583.41974,
                        "resolution": 0.00274966563497
                    }, {
                        "level": "10",
                        "scale": 577791.709872,
                        "resolution": 0.00137483281749
                    }]
                });
                var tileExtent1 = new Extent(-179.99999, -89.99999, 179.99999, 89.99999, new SpatialReference({
                    wkid: 4326
                }));
                var layerInfo1 = new WMTSLayerInfo({
                    tileInfo: tileInfo1,
                    fullExtent: tileExtent1,
                    initialExtent: tileExtent1,
                    identifier: "vec",
                    tileMatrixSet: "c",
                    format: "png",
                    style: "default"
                });
    
                var resourceInfo = {
                    version: "1.0.0",
                    layerInfos: [layerInfo1],
                    copyright: "天地图"
                };
    
                var options = {
                    serviceMode: "KVP",
                    resourceInfo: resourceInfo,
                    //如果没有配置resourceinfo会通过getCapacities获取
                    layerInfo: layerInfo1,
                    //附加参数
                    customParameters:{tk:"41992f255f5c4efffceb41e0f06d3dc2"}
                };
    
                wmtsLayer = new WMTSLayer("http://t0.tianditu.gov.cn/vec_c/wmts", options);
                map.addLayer(wmtsLayer);
            });
    
        </script>
    </head>
    
    <body>
    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
    
        <div id="map"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'center'">
            <div id="citationInfo">
                <a href="http://v2.suite.opengeo.org/geoserver/gwc/service/wmts">WMTS</a>
                served by
                <a href="http://opengeo.org/">天地图</a>
            </div>
        </div>
    
    </div>
    </body>
    </html>

    还可以参考https://gitee.com/MrHuanLiu/TDTLib

    展开全文
  • 【arcgis天地图wmts加载显示空白】

    千次阅读 2020-05-25 16:29:36
    今天实践遇到一个问题——arcgis天地图wmts加载显示空白 要点: 1 矢量地图的经纬度投影 网址为 “http://t0.tianditu.gov.cn/vec_c/wmts?tk=您的密钥”,没有提供arcgis/esri地图服务网址,直接使用加载进去会显示...

    【argis问题记录0525】
    今天实践遇到一个问题——arcgis天地图wmts加载显示空白
    要点:
    1 网址问题
    矢量地图的经纬度投影 网址为
    “http://t0.tianditu.gov.cn/vec_c/wmts?tk=您的密钥”,没有提供arcgis/esri地图服务网址,直接使用加载进去会显示空白。arcgis的wmts网址为“http://t0.tianditu.gov.cn/vec_c/esri/wmts?tk=您的密钥”。若是用“http://t0.tianditu.gov.cn/vec_w/wmts?tk=您的密钥”(球面墨卡托投影)可以加载上但是坐标错乱,对像我这样第一次用的人来说也是坑啊。
    2 密钥问题
    密钥规则做了改动,服务器端和浏览器端做了区分,应该申请服务器端key
    服务截图

    展开全文
  • Openlayer使用WMS、WFS、WMTS服务加载Geoserver发布矢量数据地理信息服务2、需求3、项目实现 地理信息服务 OGC地理信息服务包括WFS、WMS、WMTS、WCS。 WMS服务(Web Map Service):通过具有地理空间位置信息的数据...

    Openlayer使用WMS、WFS、WMTS服务加载Geoserver发布矢量数据

    1、地理信息服务

    OGC地理信息服务包括WFS、WMS、WMTS、WCS。
    WMS服务(Web Map Service):通过具有地理空间位置信息的数据制作地图,格式类型可以是PNG、GIF、JPEG,SVG等。
    WFS(Web Feature Service):通过GML传递地理空间数据,支持基于HTTP协议再分布式计算平台上对地理要素增删查改。
    WMTS(Web Map Tiles Service):地图切片Web服务。
    WCS(Web Coverage Service):提供的是包含了地理位置信息或属性的空间栅格图层。

    2、需求

    项目需要在geoserver上发布矢量数据,昂开始使用WMTS服务加载矢量切片,后来发现使用矢量切片渲染文本标注是缩放视图,出现大量重复的文本标注。后来又改用WFS加载矢量数据,观察到geoserver官网使用WMS加载矢量数据。所以我将三种方式整理于此。

    3、项目实现

    • 使用WMS方式加载矢量数据
      这种方式若在geoserver中配置了样式,加载数据后样式不会丢失。
    import Image from 'ol/layer/Image'
    import ImageWMS from 'ol/source/ImageWMS'
     var format = 'image/png';
        var bounds = [375599.8540000012, 3386915.9619999994,
          386213.8540000003, 3412573.9619999994];
        var source=new ImageWMS({
          ratio: 1,
          url: 'http://localhost:8080/geoserver/waterEutrophication/wms',
          params: {'FORMAT': format,
            'VERSION': '1.1.1',
            "LAYERS": this.checkLayerPoint(this.title),
            "exceptions": 'application/vnd.ogc.se_inimage',
          }
        })
         layerclassindex = new Image({
          opacity:0.1,
          source: source,
        });
        map.addLayer(layerclassindex)
    

    也可以查看geoserver官网提供的代码,查看方式我在加载矢量切片一节中已经提到。可以点击查找Openlayer加载矢量切片

    • 使用WFS方式加载矢量数据
      采用WFS加载矢量数据使用ol/layer/Vector、ol/source/Vector
      其中source 可以通过读取geojson文件方式加载,也可以通过查看调用geoserver发布的服务
      采用WFS方式需要自己添加style样式。
      1、读取geojson方式加载
    import VectorSource1 from 'ol/source/Vector';
    import VectorLayer from 'ol/layer/Vector';
    import Map from "ol/Map";
    import View from "ol/View";
    import bounderyJson from '../../assets/FeaturesData/clip_water_16.GeoJson'
    let  singleLayer_Mark1 = new VectorLayer({
      opacity:0.1,
      source: markVector_Res1,
    });
    let markVector_Res1.addFeatures(
     markVector_Res1.getFormat().readFeatures(bounderyJson),{
        dataProjection: 'EPSG:4326',    // 设定JSON数据使用的坐标系
        featureProjection: 'EPSG:4326' // 设定当前地图使用的feature的坐标系
      });
      view= new View({
          center: [103.83,30.70],
          zoom: 12,
          maxZoom:20,
          minZoom:8,
          projection: projection,
          extent: [-180.0,-90.0,180.0,90.0]
        });
        map = new Map({
        view:view,
        layers: [],
        target: 'mapDIv',
    })
     map.addLayer(singleLayer_Mark)
    

    2、使用geoserver发布的WFS服务
    关于查看Geoserver发布的服务地址可在官网进行查看。点击对应服务类型
    在这里插入图片描述
    查看对应服务地址所需参数,从而构造地址
    在这里插入图片描述

    import VectorSource1 from 'ol/source/Vector';
    import VectorLayer from 'ol/layer/Vector';
    import {bbox} from 'ol/loadingstrategy'
    import Map from "ol/Map";
    import View from "ol/View";
     var layerTypename="waterEutrophication:roadnetwork";//图层名
        var pointVectorSource = new VectorSource1({
          format: new GeoJSON(),
          url: function(extent) {
            return 'http://localhost:8080/geoserver/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName='+layerTypename+'&outputFormat=application/json';
          },
          strategy:bbox
        });
        layernetwork = new VectorLayer({
          source: pointVectorSource,
          style:  (feature)=> {
                 if(view.getZoom()>=15.5){
                     return this.getFeatureNameColor(feature.get("name"))
                 }
                 else{
                   return this.getFeatureNameColor()
                 }
               }
        })
        getFeatureNameColor(name) {
          var style_highlighted = new Style({
            fill: new Fill({
              color: '#ADD8E6'
            }),
            stroke: new Stroke({
              color: '#880000',
              width: 2
            }),
            text: new Text({
              text: (name !== undefined) ? `${name}` : '',//feature.get("name"),
              fill: new Fill({
                color: 'yellow'
              }),
              stroke: new Stroke({
                color: '#880000',
                width: 4
              }),
              scale: 1.2,
            })
          });
          return style_highlighted;
      }
        view= new View({
          center: [103.83,30.70],
          zoom: 12,
          maxZoom:20,
          minZoom:8,
          projection: projection,
          extent: [-180.0,-90.0,180.0,90.0]
        });
        map = new Map({
        view:view,
        layers: [layernetwork],
        target: 'mapDIv',
    })
    

    3、使用geoserver发布的WMTS服务去加载矢量切片
    这种方法我在Geoserver发布矢量切片服务及使用openlayer调用展示已经写过,这里不做赘述。
    但是这种方式我采用样式渲染,出现太多重复label,查询资料说是ol/layer/VectorTile没有计算geom的重复。我采用ol/layer/Vector则不会出现重复文本标注。
    在这里插入图片描述

    展开全文
  • leaflet加载wmts图层 L.tileLayer.wmts("http://www.ais.msa.gov.cn/MapService",{ "layer": "default", "style": "default", "format": "image/png", "tilematrixSet": "advsea" //高级海图 advsea ,基础海陆...
  • ArcEngine10.1 CS端加载WMTS图层

    千次阅读 2015-12-01 15:40:17
    AE 加载WMTS服务
    using ESRI.ArcGIS.esriSystem;
    using ESRI.ArcGIS.GISClient;
    using ESRI.ArcGIS.Carto;
    
    public class MapWMTSLayer
    {
        public IWMTSLayer GetWMTSLayer(string location)
        {
            IPropertySet pPropertyset = new PropertySetClass();
            pPropertyset.SetProperty("url", location);
            IWMTSConnectionFactory pwmtsconnectionfactory = new WMTSConnectionFactory();
            IWMTSConnection con = pwmtsconnectionfactory.Open(pPropertyset, 0, null);
            IWMTSLayer ly = new WMTSLayer();
            IName n = con.FullName;
            ly.Connect(n);
            return ly;
        }
    }


    测试图层:

    http://t0.tianditu.com/vec_c/wmts


    加载结果:



    展开全文
  • Cesium加载月球WMTS服务

    千次阅读 2020-04-13 21:55:13
    今天给大家介绍一个好东西:月球的各种WMTS服务。 对于地球的各种地图服务,如卫星图片、街道地图等各种地图服务,已有多种服务提供商(百度、微软、谷歌),并且提供多种方式,如WMTS、WMS、TMS等等。 对于地球以外...
  • openlayer2.X通过WMTS服务加载ArcGIS服务

    千次阅读 2015-10-14 16:14:12
    ArcGIS10.1开始的Server版本切片服务可以支持WMTS服务,服务切片后自动支持WMTS服务,那么如何在一些开源客户端中使用WMTS服务,例如openlayer;首先要说的是openlayer2.X版本和ol3版本略有不同。 在使用之前首先要...
  • arcgis 加载wmts服务

    千次阅读 2020-06-03 16:01:38
    <!... <... <head> ...meta charset="UTF-8">...简单加载一张图</title> <link type="text/css" rel="stylesheet" href="http://58.220.249.164:8084/arcgis_api/js/esri/css/esri.css"/> <...
  • (1)场景:使用Cesium加载ArcGIS的WMTS瓦片服务 最近在项目中需要使用Cesium添加ArcGIS的WMTS服务,虽然根据网上的相关资料加载成功,但是还是遇到一些参数调整相关的问题,所以将过程中的一些步骤心得记录下来。 ...
  • maptalks 加载 wmts服务的实现

    千次阅读 2019-08-13 19:25:32
    maptalks 截止 0.44.2 还没有提供直接加载 wmts 服务的接口,在遇到这个需求时只好自己解决,最后发现 gitHub 上有以为大神自己封装了 maptalks 加载 wmts 服务的接口 点击这里查看:maptalks-demo。 但是我的开发...
  • 1.ArcMap加载WMTS服务 (1).打开ArcMap找到如下功能双击打开 (2).在打开的窗体中输入你需要连接的WMTS服务服务地址,此处注意地址应该填写获取元数据的地址因增加以下参数(具体参数说明请自行百度WMTS规范) ...
  • OpenLayers教程:多源数据加载WMTS

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

    2019-04-01 06:09:00
    不用担心,Skyline支持多种影像图层,包括WFS、WMS、WMTS地图服务。使用地图作为底图有两个好处: (1)不必重新准备底图背景数据,特别是背景影像级别要求高时,数据量特别大,不便于准备和部署; (2)不需要写...
  • ARCGIS搭建离线地图服务器,进行离线地图二次开发 1.离线地图金字塔瓦片数据 (下载数据教程:http://www.bigemap.com/helps/doc20190312126.html) 安装并启动BIGEMAP地图... 2.离线地图服务发布(WMTS服务...
  • 在前一篇中说到我们可以通过加载WMS服务解决用ArcGIS API加载超图发布的服务,但是WMS服务在加载效率上是低于切片服务的,加上超图的IServer,无力吐槽,所以,在加载速度的要求下,切片的WMTS服务更符合要求。...
  • Cesium 加载GeoServer WMTS 服务

    千次阅读 2019-12-18 12:46:22
    前提 Cesium ...点击 WMTS,查看发布的WMTS服务列表 如果遇到如下情况,则需要重新载入列表: 在 Caching Defaults 下,打开GWC的主页 点击 A list of all the layers and automatic demos 在...
  • arcgis 加载天地图WMTS服务

    万次阅读 2018-08-23 00:26:28
    arcgis加载天地图的WMTS服务网络上教程也有很多,并且很多GIS开发人员都将其进行了相应的封装,但是大部分对于初学者而言,存在代码不全的情况,因此,这里将真个天地图的WMTS服务地图的加载的代码全部展现出来,...
  • ArcGIS JS API加载WMTS地图服务

    千次阅读 2019-02-01 18:48:18
    前言:本来是想用ArcGIS发布的WMTS地图,可是ArcGIS的WMTS没弄明白怎么用,就用IServer发布的WMTS作为案例基础数据。  http://www.supermap.com.cn:8090/iserver/services 超图官方的IServer   具体代码如下:...
  • ArcGIS Engine加载WMTS影像服务

    千次阅读 2019-06-02 10:35:30
    /// 加载WMTS服务 /// </summary> /// <param name="sUrl"></param> /// <returns></returns> public List<ILayer> GetWMTSLayer(string sUrl) { var lstL...
  • Leaflet js api中加载WMTS服务,在地图对象初始化是设置坐标系,一旦设定,切片划分的格网规则就确定了 1.4326坐标系 加载标准的WMTS服务,http://localhost:8080/geoserver/gwc/service/wmts 重载L.TileLayer类...
  • 自己的关于ol加载ArcGis发布的wmts的总结记录,总结了一些通用步骤,和常见错误,希望对大家有所帮助。
  • OpenLayers 3 加载WMTS天地图

    千次阅读 2017-08-24 13:43:32
    使用哪个坐标系取决于加载的地图服务,如果坐标系与地图服务的不同,则可能出现无法加载地图的问题 var projection = ol.proj.get('EPSG:4326');//经纬度空间参考坐标系 var projection = ol.proj.get('EPSG:3857');...
  • openlayers加载天地图WMTS服务

    千次阅读 2019-08-21 17:00:08
    tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent), //resolutions: res.slice(0, 15), resolutions: resolutions, matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, ...
  • NULL 博文链接:https://wzg866.iteye.com/blog/2110958
  • openlayers加载地图、加载WMTS、包引用

    千次阅读 2019-05-27 18:07:14
    WMTS的xml文件可以通过openlayers、ArcGIS API for JavaScript打开。 openlayers打开WMTS的官方示例: https://openlayers.org/en/latest/examples/wmts-layer-from-capabilities.html?q=wmts ...
  • wmts服务的部署见前面的文章,这里主要使用Openlayer来加载wmts服务 index.js文件如下: import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import WMTSCapabilities from 'ol/format/...
  • Cesium加载WMTS服务,4326和3857

    千次阅读 2021-01-05 15:21:39
    Cesium加载WMTS地图切片服务,通常有两种坐标系,即互联网常用的3857,局域网内常用的4326。 在Cesium.WebMapTileServiceImageryProvider 支持这两种tilingScheme加载,主要由以下两个参数控制: 1. 3857 this._...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,618
精华内容 647
关键字:

wmts的加载