arcgis for js 4.x wmts切片图层服务加载
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>切片地图加载</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 800px; width: 800px; overflow: hidden; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css" /> <script src="https://js.arcgis.com/4.11/init.js"></script> <script> require(["esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer", "../MyCustomTileLayer.js", '../4490.js', ], function( Map, MapView, WebTileLayer, MyCustomTileLayer, epsg4490 ) { var tileInfo = epsg4490.tileInfo var map = new Map({ // basemap: 'osm' }); var view = new MapView({ container: "viewDiv", map: map, spatialReference: { wkid: 4490 }, }); //4.9以上 function createWMTSlyr1(option) { var webLayer = new MyCustomTileLayer({ urlTemplate: createUrlTemplate(option), subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'], tileInfo: tileInfo }) return webLayer } //4.2-4.11版本 function createWMTSlyr(option) { let _this = this var webLayer = new WebTileLayer({ urlTemplate: createUrlTemplate(option), subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'], tileInfo: tileInfo }) return webLayer } function createUrlTemplate(option) { let urlTemplate if (option.url) { if (!urlTemplate) { let myUrl = option.url if (myUrl.indexOf('/wmts') === -1) { myUrl += '/wmts' } const index0 = myUrl.indexOf('services') const index1 = myUrl.indexOf('MapServer') const tempStr = myUrl.substring(index0 + 9, index1 - 1).replace(/\//g, '_') // eslint-disable-next-line new-cap const tempUrl = new this.gisConstructor.url(myUrl) // eslint-disable-next-line no-unused-vars const splits = tempUrl.path.split('/') const layer = option.layer ? option.layer : tempStr const style = option.style ? option.style : 'default' const matrixid = option.matrixid ? option.matrixid : 'default028mm' urlTemplate = myUrl + '?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=' + layer + '&STYLE=' + style + '&FORMAT=image/tile&TILEMATRIXSET=' + matrixid + '&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}' } } else { urlTemplate = 'http://t0.tianditu.gov.cn/' + option.layer + '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' + option.layer.substring(0, option.layer.indexOf('_')) + '&STYLE=default&TILEMATRIXSET=' + option.layer.substring(option.layer.indexOf('_') + 1, option.layer.length) + '&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=' + (option.key || 'fb1bfb9e06cd7681813a42f4c934e1ea') // urlTemplate = // 'http://{subDomain}.tianditu.gov.cn/DataServer?T=' + // option.layer + // '&x={col}&y={row}&l={level}&tk=' + // (option.key || 'fb1bfb9e06cd7681813a42f4c934e1ea') } return urlTemplate } var option = { id: '界线', type: 'wmts', listMode: 'hide', url: 'http://19.15.73.111/arcgisserver12/rest/services/SPJ_YGA/界线0602/MapServer' } var lyr = createWMTSlyr(option) map.add(lyr); }); </script> </head> <body class="calcite"> <div id="viewDiv"></div> </body> </html>
分类:
webgis前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了