wangzhe
/
screen-demo


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基础地图</title>
    <link rel="stylesheet" href="../dist/ol/ol.css" />
    <script src="../dist/index.js"></script>
    <style>*{padding:0;margin:0;}</style>
  </head>
  <body>
    <div id="map1" style="height: 50vh; width: 100vw;"></div>
    <div id="map2" style="height: 100vh; width: 200vw;transform-origin: left top;transform:scale(0.5,0.5);"></div>
  </body>

  <script>
    const source1 = new CTMapOl.source.XYZ({
      url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=86db5390161c4da2abe96c3fca00f403'
    })
    const tileLayer1 = new CTMapOl.layer.Tile({
      title: '天地图',
      source: source1
    })
    var sourceMarker1 = new CTMapOl.source.XYZ({
      url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=86db5390161c4da2abe96c3fca00f403'
    })
    const tileMarker1 = new CTMapOl.layer.Tile({
      title: '标注图层',
      source: sourceMarker1
    })
    const map1 = new CTMapOl.Map({
      view: new CTMapOl.View({
        projection: 'EPSG:3857',
        center: CTMapOl.extend.formatLayer.transCooordinateToOpenlayer([116.39, 39.91]),
        // center: [0, 0],
        zoom: 16,
        maxZoom: 18,
        minZoom: 1
      }),
      layers: [tileLayer1, tileMarker1],
      target: 'map1'
    })
    const source2 = new CTMapOl.source.XYZ({
      url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=86db5390161c4da2abe96c3fca00f403'
    })
    const tileLayer2 = new CTMapOl.layer.Tile({
      title: '天地图',
      source: source2
    })
    var sourceMarker2 = new CTMapOl.source.XYZ({
      url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=86db5390161c4da2abe96c3fca00f403'
    })
    const tileMarker2 = new CTMapOl.layer.Tile({
      title: '标注图层',
      source: sourceMarker2
    })
    const map2 = new CTMapOl.Map({
      view: new CTMapOl.View({
        projection: 'EPSG:3857',
        center: CTMapOl.extend.formatLayer.transCooordinateToOpenlayer([116.39, 39.91]),
        // center: [0, 0],
        zoom: 16,
        maxZoom: 18,
        minZoom: 1
      }),
      layers: [tileLayer2, tileMarker2],
      target: 'map2'
    })
  </script>
</html>