526互联

arcgis for js 4.x 加载 geoserver WMS WMTS

发布时间 2023-07-26 15:59:15作者: 小鱼写代码的过往
  1. arcgis for js 4.x 加载 geoserver wms
    1. 代码如下
    2. <html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>WMSLayer</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.24/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.24/"></script>

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/layers/WMSLayer"], (
        Map,
        MapView,
        WMSLayer
      ) => {

        const layer = new WMSLayer({
          url: "http://localhost:8880/geoserver/postgis/wms",
		  title:"postgis:ceshi0606",
		  sublayers:[{
			  name:'ceshi0606'
		  }],
		  spatialReference:{wkid:4490}
        });
		
		layer.load().then(() => {
		  const names = layer.allSublayers
		                     .filter((sublayer) => !sublayer.sublayers) // Non-grouping layers will not have any "sublayers".
		                     .map((sublayer) => sublayer.name);
		  console.log("Names of all child sublayers", names.join());
		});

        const map = new Map({
          basemap: {
            baseLayers: [layer]
          }
        });

		let p = {
			type:'point',
			x:113,
			y:23.22,
			spatialReference:{wkid:4490}
		}
        const view = new MapView({
          container: "viewDiv",
          map: map,
		  center:p,
		  zoom:15,
          spatialReference: {
            wkid: 4490
          }
        });
		view.when(function(e){
			view.scale = 3000000
		})
		window.view = view
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

      　　

  2. arcgis for js 4.x 加载 geoserver wmts
    1. 代码如下
    2. <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: 1600px;
				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/GraphicsLayer",
				"esri/Graphic",
				"esri/PopupTemplate",
				"esri/widgets/Popup",
				"esri/layers/MapImageLayer",
				"esri/widgets/Legend",
				"esri/layers/WebTileLayer",
				"esri/layers/WMTSLayer",
				"esri/layers/VectorTileLayer",
				"esri/widgets/BasemapGallery/support/LocalBasemapsSource",
				"esri/widgets/BasemapGallery",
				"esri/Basemap",
				"esri/layers/FeatureLayer",
				"esri/geometry/Extent",
				"esri/geometry/SpatialReference",
				'esri/config',
				'esri/layers/support/TileInfo',
				"esri/layers/TileLayer",
				"dojo/on",
				"dojo/dom",
				"esri/config",
				"dojo/domReady!"
			], function(
				Map,
				MapView,
				GraphicsLayer,
				Graphic,
				PopupTemplate,
				Popup,
				MapImageLayer,
				Legend,
				WebTileLayer,
				WMTSLayer,
				VectorTileLayer,
				LocalBasemapsSource,
				BasemapGallery,
				Basemap,
				FeatureLayer,
				Extent,
				SpatialReference,
				esriConfig,
				TileInfo,
				TileLayer,
				on,
				dom,
				esriConfig
			) {

				const lods1 = [{
						"level": 0,
						"resolution": 1.4062500000000004,
						"scale": 558455272.596151
					},
					{
						"level": 1,
						"resolution": 0.70312500000000022,
						"scale": 279227636.298076
					},
					{
						"level": 2,
						"resolution": 0.35156250000000011,
						"scale": 139613818.149038
					},
					{
						"level": 3,
						"resolution": 0.17578125000000006,
						"scale": 69806909.0745189
					},
					{
						"level": 4,
						"resolution": 0.087890625000000028,
						"scale": 34903454.5372594
					},
					{
						"level": 5,
						"resolution": 0.043945312500000014,
						"scale": 17451727.2686297
					},
					{
						"level": 6,
						"resolution": 0.021972656250000007,
						"scale": 8725863.63431486
					},
					{
						"level": 7,
						"resolution": 0.010986328125000003,
						"scale": 4362931.81715742
					},
					{
						"level": 8,
						"resolution": 0.0054931640625000017,
						"scale": 2181465.90857871
					},
					{
						"level": 9,
						"resolution": 0.0027465820312500009,
						"scale": 1090732.95428936
					},
					{
						"level": 10,
						"resolution": 0.0013732910156250004,
						"scale": 545366.477144679
					}
				]

				let lods = [{
						level: 1,
						levelValue: 1,
						resolution: 0.703125,
						scale: 295497593.05875003
					},
					{
						level: 2,
						levelValue: 2,
						resolution: 0.3515625,
						scale: 147748796.52937502
					},
					{
						level: 3,
						levelValue: 3,
						resolution: 0.17578125,
						scale: 73874398.264687508
					},
					{
						level: 4,
						levelValue: 4,
						resolution: 0.087890625,
						scale: 36937199.132343754
					},
					{
						level: 5,
						levelValue: 5,
						resolution: 0.0439453125,
						scale: 18468599.566171877
					},
					{
						level: 6,
						levelValue: 6,
						resolution: 0.02197265625,
						scale: 9234299.7830859385
					},
					{
						level: 7,
						levelValue: 7,
						resolution: 0.010986328125,
						scale: 4617149.8915429693
					},
					{
						level: 8,
						levelValue: 8,
						resolution: 0.0054931640625,
						scale: 2308574.9457714846
					},
					{
						level: 9,
						levelValue: 9,
						resolution: 0.00274658203125,
						scale: 1154287.4728857423
					},
					{
						level: 10,
						levelValue: 10,
						resolution: 0.001373291015625,
						scale: 577143.73644287116
					},
					{
						level: 11,
						levelValue: 11,
						resolution: 0.0006866455078125,
						scale: 288571.86822143558
					},
					{
						level: 12,
						levelValue: 12,
						resolution: 0.00034332275390625,
						scale: 144285.93411071779
					},
					{
						level: 13,
						levelValue: 13,
						resolution: 0.000171661376953125,
						scale: 72142.967055358895
					},
					{
						level: 14,
						levelValue: 14,
						resolution: 8.58306884765625e-5,
						scale: 36071.483527679447
					},
					{
						level: 15,
						levelValue: 15,
						resolution: 4.291534423828125e-5,
						scale: 18035.741763839724
					},
					{
						level: 16,
						levelValue: 16,
						resolution: 2.1457672119140625e-5,
						scale: 9017.8708819198619
					},
					{
						level: 17,
						levelValue: 17,
						resolution: 1.0728836059570313e-5,
						scale: 4508.9354409599309
					},
					{
						level: 18,
						levelValue: 18,
						resolution: 5.3644180297851563e-6,
						scale: 2254.4677204799655
					},
					{
						level: 19,
						levelValue: 19,
						resolution: 2.68220901489257815e-6,
						scale: 1127.23386023998275
					},
					{
						level: 20,
						levelValue: 20,
						resolution: 1.341104507446289075e-6,
						scale: 563.616930119991375
					}
				]

				const tileInfo = new TileInfo({
					// dpi: 96,
					// rows: 256,
					// cols: 256,
					// format: 'MIXED',
					// compressionQuality: 75,
					// origin: {
					// 	x: -5123200,
					// 	y: 10002100
					// },
					dpi: 96,
					rows: 256,
					cols: 256,
					format: 'PNG8',
					compressionQuality: 0,
					origin: {
						x: -180,
						y: 90
					},
					spatialReference: {
						wkid: 4490,
						latestWkid: 4490
					},
					lods: lods
				})
				const tileInfo1 = new TileInfo({
					dpi: 96,
					rows: 256,
					cols: 256,
					format: 'PNG8',
					compressionQuality: 0,
					origin: {
						x: -180,
						y: 90
					},
					spatialReference: {
						wkid: 4490,
						latestWkid: 4490
					},
					lods: lods1
				})
				let layer = "arctest_614"
				let tilelyr = new WebTileLayer({

					urlTemplate: "http://localhost:8880/geoserver/gwc/service/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=" +
						layer +
						"&STYLE=default&FORMAT=image/png&TILEMATRIXSET=EPSG:4490_" + layer +
						"&TILEMATRIX=EPSG:4490_" + layer + ":{level}&TILEROW={row}&TILECOL={col}",
					// urlTemplate: "http://localhost:8880/geoserver/gwc/service/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=arctest&STYLE=default&FORMAT=image/png&TILEMATRIXSET=EPSG:4490_arctest&TILEMATRIX=EPSG:4490_arctest:{level}&TILEROW={row}&TILECOL={col}",
					tileInfo: tileInfo1,
					spatialReference: {
						wkid: 4490
					}
				})

				var key = "天地图key"
				key = "6b24042499c4f917659462b7816f8a2b"
				var tiledLayer = new WebTileLayer({
					urlTemplate: "http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
						key,
					tileInfo: tileInfo,
					id: '影像',
					visible: true,
					listMode: 'hide' //这个属性设置是为了在layerlist不显示出来
				});

				var map = new Map({
					layers: [tiledLayer, tilelyr]
				});

				var pp = {
					type: 'point',
					x: 113,
					y: 23,
					spatialReference: {
						wkid: 4490
					},
				}

				var view = new MapView({
					container: "viewDiv",
					map: map,
					spatialReference: {
						wkid: 4490
					},
					// scale: tileInfo.lods[6],
					// center: pp, //113.27434372047993,22.722786885699826
					// linked: false,
					// zoom:6,
					constraints: {
						lods: tileInfo.lods,
						minScale: tileInfo.lods[0].scale
					},
				});
				// view.extent = new Extent({
				//   xmin: 477906.13175840373,
				//   ymin: 2486847.166801853,
				//   xmax: 541644.3842349087,
				//   ymax: 2555347.928803377,
				//   spatialReference: {
				//     wkid: 4547
				//   }
				// });

				view.on('click', function(e) {
					console.log(e)
				})

				// view.extent = new Extent({
				// 	xmin:114.059346,
				// 	ymin:22.237519,
				// 	xmax:114.459346,
				// 	ymax:23.137519,
				// 	spatialReference: {
				// 		wkid: 4490
				// 	}
				// });

				view.extent = new Extent({
					xmin: -180,
					ymin: -90,
					xmax: 180,
					ymax: 90,
					spatialReference: {
						wkid: 4490
					}
				});
				view.when(() => {
					console.log(1111);
					view.center = pp
					view.zoom = 6
				})
				window.view = view

			});
		</script>
	</head>

	<body class="calcite">
		<div id="viewDiv"></div>
	</body>
</html>