wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<!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="map" style="height: 100vh; width: 100vw;"></div>
</body>

<script>
  const source = 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 tileLayer = new CTMapOl.layer.Tile({
    title: '天地图',
    source: source
  })
  var sourceMarker = 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 tileMarker = new CTMapOl.layer.Tile({
    title: '标注图层',
    source: sourceMarker
  })
  // CTMapOl.proj4.defs("EPSG:4513", "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=25500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4514", "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=26500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4515", "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=27500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4516", "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=28500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4517", "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=29500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4518", "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=30500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4519", "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=31500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4520", "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=32500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4521", "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=33500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4522", "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4523", "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4524", "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4525", "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4526", "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4527", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4528", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4529", "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=41500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4530", "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=42500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4531", "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=43500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4532", "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=44500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4.defs("EPSG:4533", "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=45500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
  // CTMapOl.proj4register(CTMapOl.proj4)
  CTMapOl.extend.initcgcs2000()
  const epsg4527 = new CTMapOl.proj.Projection({
    code: 'EPSG:4527',
    extent: [-Infinity, -Infinity, Infinity, Infinity],
    WorldExtent: [-180, -90, 180, 90]
  });
  const epsg4326 = new CTMapOl.proj.Projection({
    code: 'EPSG:4326',
    extent: [-180, -90, 180, 90],
    WorldExtent: [-180, -90, 180, 90]
  });
  const map = 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: [tileLayer, tileMarker],
    target: 'map'
  })

  console.log(epsg4527, epsg4326)
  let geom = (new CTMapOl.format.WKT).readGeometry('POLYGON((116.36 39.92,116.39 39.93,116.41 39.92,116.41 39.89,116.39 39.89,116.35 39.91,116.36 39.92))', {
    dataProjection: epsg4326
  })
  console.log(geom, geom.getArea())
  // let geom4527 = geom.transform('EPSG:4326', 'EPSG:4527')
  // console.log(geom4527.getCoordinates(), geom4527.getArea())
  // function getarea(geom)
  // {
  //   let temp=geom.clone()
  //   let center=CTMapOl.extent.getCenter(geom.getExtent())
  //   let srid=0;
  //   if(center[0]<=73.5)
  //   {
  //     srid=4513
  //   }else if(center[0]>=136.5)
  //   {
  //     srid=4533
  //   }else
  //   {
  //     srid=Math.floor((center[0]-73.5)/3+4513)
  //   }
  //   let targeom = temp.transform('EPSG:4326', 'EPSG:'+srid)
  //   return targeom.getArea()
  // }
  console.log(CTMapOl.extend.getarea(geom)) 
  // let area=0
  // for(let i=0;i<geom4527.getCoordinates()[0].length;i++)
  // {
  //   area += geom4527.getCoordinates()[0][i][0] * geom4527.getCoordinates()[0][(i+1)%geom4527.getCoordinates()[0].length][1] - geom4527.getCoordinates()[0][i][1] * geom4527.getCoordinates()[0][(i+1)%geom4527.getCoordinates()[0].length][0];
  // }
  // console.log(Math.abs(area)/2)
</script>

</html>