加载高德底图和自定义瓦片

  1. <!DOCTYPE>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  8.   <title>高德瓦片</title>
  9.   <link rel="stylesheet" href="./dist/zyzc.css">
  10.   <script type="text/javascript" src="dist/maptalks.js"></script>
  11.   <style>
  12.     * {
  13.       margin: 0;
  14.       padding: 0;
  15.     }
  16.     #map {
  17.       width: 100vw;
  18.       height: 100vh;
  19.     }
  20.   </style>
  21. </head>
  23. <body>
  24.   <div id="map"></div>
  25.   <script type="text/javascript">
  26.     const config = {
  27.       tileGD: "http://www.zyzcgis.xyz/tile/wg/mobile/gaode/",
  28.       tileGDBZ: 'https://www.zyzcgis.xyz/tile/wg/mobile/gaodeBiaoZhu/',
  29.     }
  30.     var map = new maptalks.Map('map', {
  31.       center: [114.426383, 30.62696],
  32.       zoom: 14,
  33.       minZoom: 10,
  34.       maxZoom: 19,
  35.       attribution: false
  36.       baseLayer: new maptalks.TileLayer('base', {
  37.         urlTemplate: 'http://wprd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&z={z}&x={x}&y={y}&scl=1&ltype=11',
  38.         subdomains: ['01', '02', '03', '04']
  39.       }),
  40.       layers: [
  41.         new maptalks.TileLayer('wg', {
  42.           urlTemplate: (x, y, z) => {
  43.             return `${config.tileGD}${z}/${y}/${x}.png`;
  44.           }
  45.         }),
  46.         new maptalks.TileLayer('wgbz', {
  47.           urlTemplate: (x, y, z) => {
  48.             return `${config.tileGDBZ}${z}/${y}/${x}.png`;
  49.           }
  50.         }),
  51.       ]
  52.     });
  53.   </script>
  54. </body>
  56. </html>

加载百度底图和自定义瓦片

  1. <!DOCTYPE>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  8.   <title>百度瓦片</title>
  9.   <link rel="stylesheet" href="./dist/zyzc.css">
  10.   <script type="text/javascript" src="dist/maptalks.js"></script>
  11.   <style>
  12.     * {
  13.       margin: 0;
  14.       padding: 0;
  15.     }
  16.     #map {
  17.       width: 100vw;
  18.       height: 100vh;
  19.     }
  20.   </style>
  21. </head>
  23. <body>
  24.   <div id="map"></div>
  25.   <script type="text/javascript">
  26.     const config = {
  27.       tileBZ: "http://www.zyzcgis.xyz/tile/wg/pc/baidu/"
  28.     }
  29.     var map = new maptalks.Map('map', {
  30.       center: [114.426383, 30.62696],
  31.       zoom: 14,
  32.       minZoom: 10,
  33.       maxZoom: 19,
  34.       attribution: false,
  35.       spatialReference: {
  36.         projection: 'baidu'
  37.       },
  38.       baseLayer: new maptalks.TileLayer('base', {
  39.         urlTemplate: 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1',
  40.         subdomains: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  41.       }),
  42.       layers: [
  43.         new maptalks.TileLayer('wg', {
  44.           urlTemplate: (x, y, z) => {
  45.             let diff = Math.pow(2, z - 1);
  46.             return config.tileBZ + 'L' + z + '/R' + toHex(diff - 1 - y, 8) + '/C' + toHex(x + diff, 8) +
  47.               '.png';
  48.           },
  49.           subdomains: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  50.         }),
  51.       ]
  52.     });
  53.     function toHex(num, length) {
  54.       let zero = "";
  55.       for (let i = 0; i < length; i++) {
  56.         zero += "0";
  57.       }
  58.       let temp = num.toString(16);
  59.       let result = zero + temp;
  60.       result = result.substr(temp.length, length);
  61.       return result;
  62.     }
  63.   </script>
  64. </body>
  66. </html>