SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://58.42.10.96:1733/openlayers/v6.13.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://58.42.10.96:1733/openlayers/v6.13.0/build/ol.js"></script>
    
    <!-- 引入坐标转换库 -->
    <script src="//cdn.bootcdn.net/ajax/libs/proj4js/2.7.4/proj4.min.js"></script>
    <title>加载一张地图</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

        // 定义坐标系, 这里定义之后后续代码中的坐标系代码 4490 才会有效
        proj4.defs("EPSG:4490","+proj=longlat +ellps=GRS80 +no_defs");
        ol.proj.proj4.register(proj4);

        var olMap = new ol.Map({
            target: 'map',
            layers: [],
            view: new ol.View({
            projection: 'EPSG:4490',
            center: [106, 27],
            zoom: 8
            })
        });

    const ArcGISTileMapServerUrl = 'http://58.42.237.175:26080/geoscene/rest/services/矢量底图/guizhou_white_1021/MapServer'

    addLayer(ArcGISTileMapServerUrl)

    /**
     * 加载ArcGIS标准的要素服务
     * options {FeatureServerUrl}
     */
    function addLayer(url) {


      // 计算各个缩放级别的分辨率
      const maxZoom = 21; // 从服务说明中获取
      const minResolution = 1.40782601571006; // 从服务说明中获取
      // 计算
      const resolutions = [];
      const matrixIds = [];

      for (let z = 0; z < maxZoom; ++z) {
        resolutions[z] = minResolution / Math.pow(2, z);
        matrixIds[z] = z;
      }

      const layer = new ol.layer.Tile({
        opacity: 0.6,
        source: new ol.source.XYZ({
          // url 模板，从服务中读取
          url: `${url}/WMTS/tile/1.0.0/矢量底图_guizhou_white_1021/default/default/{z}/{y}/{x}.png`,
          requestEncoding: 'REST',
          style: 'default',
          format: 'image/png',
          matrixSet: 'default',
          tileGrid: new ol.tilegrid.TileGrid({
            origin: [-180, 90],// 从服务说明中获取
            extent: [98.3758237, 22.3195474, 113.159957, 31.5309446],
            resolutions: resolutions,
            // matrixIds: matrixIds
          }),
          projection: 'EPSG:4490'
        }),
        // source: new ol.source.XYZ({
        //   // url 模板，从服务中读取
        //   url: `${url}/tile/{z}/{y}/{x}`,
        //   projection: 'EPSG:4326'
        // })
      })

      olMap.addLayer(layer)
    }
    </script>
  </body>
</html>