首页 > 其他分享 >arcgis for js 4.x 加载 geoserver WMS WMTS

arcgis for js 4.x 加载 geoserver WMS WMTS

时间：2023-07-26 16:02:27浏览次数：40  
标签：scale level WMS 4490 js arcgis levelValue resolution esri

  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>

       

标签：scale,level,WMS,4490,js,arcgis,levelValue,resolution,esri
From： https://www.cnblogs.com/hjyjack9563-bk/p/17582686.html

相关文章

  • three.js报错依赖，原因：three版本过高
    vue版本"devDependencies":{"webpack":"^3.6.0","webpack-bundle-analyzer":"^2.9.0","webpack-dev-server":"^2.9.1","webpack-merge":"^4.1.0"}&quo......
  • js值Set和Map类使用
    <script>//----------------------------------------------------Set----------------------//Set（集合）是一组唯一值的集合。每个值只能在Set中出现一次。Set可以容纳任何数据类型的值。//创建Setconstletters=newSet(["b","a","c"]);console.log(t......
  • ol 加载geoserver wms wmts mvt
    ol加载geoserverwms代码如下<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>geoserver-wms</title><linkhref="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/o......
  • js校验IPv4/IPv6/域名/url等相关正则
    /***域名校验eg:www.baidu.com*@param{*}val需要校验的值*/exportfunctionisDomain(val){constreg=/^([0-9a-zA-Z-]{1,}\.)+([a-zA-Z]{2,})$/;returnreg.test(val);}/***ipv4校验eg:10.0.0.1*@param{*}val需要校验的值*/exportfunc......
  • Node.js低代码管理系统：只需点击鼠标，搭建属于你的企业应用
    低代码管理系统是一种通过可视化界面和简化的开发工具，使非专业开发人员能够快速构建和管理应用程序的系统。它提供了一套预先定义的组件和模块，使用户可以通过拖放操作来设计应用程序的界面和逻辑。低代码管理系统还提供了自动化的工作流程、数据管理和集成功能，使用户能够快速创建和......
  • EaselJS 源码分析系列--第四篇
    鼠标交互事件前几篇关注的是如何渲染，那么鼠标交互如何实现呢？Canvascontext本身没有像浏览器DOM一样的交互事件EaselJS如何在canvas内实现自己的鼠标事件系统？原理大致如下：Stage类内的canvas监听标准DOM鼠标事件(比如：mousedown)，window或document对象下监听......
  • Njs 0.8.0发布
    导读Njs0.8.0发布,分为nginx模块和核心进行介绍。nginx模块更改：删除了0.7.10版本中引入的FetchAPI中对禁止的头信息的特殊处理。更改：删除了http模块中自0.5.0以来废弃的r.requestBody()和r.responseBody()。更改：在http模块中过滤时，在r.internalRedirect()中抛出一......
  • 转载：PageOffice在线打开office文件通过js调用vba可实现的功能
    pageoffice封装的js接口有限，某些比较复杂的设置用到的客户不多，所以没有提供直接的js方法，但是pageoffice提供了Document属性和RunMacro方法，可以调vba或直接运行宏指令实现比较小众的一些需求   Word相关功能1、给word表格中的单元格赋值document.getElementById("Page......
  • Using PL/SQL Object Types for JSON
    #https://docs.oracle.com/en/database/oracle/oracle-database/12.2/adjsn/using-PLSQL-object-types-for-JSON.html#GUID-F0561593-D0B9-44EA-9C8C-ACB6AA9474EEDECLAREjeJSON_ELEMENT_T;joJSON_OBJECT_T;BEGINje:=JSON_ELEMENT_T.parse('{"name......
  • 30 天精通 RxJS (02)：Functional Programming 基本观念
    FunctionalProgramming是Rx最重要的观念之一，基本上只要学会FP要上手Rx就不难了！FunctionalProgramming可以说是近年来的显学，各种新的函式编程语言推出之外，其他旧有的语言也都在新版中加强对FP的支持！什么是FunctionalProgramming？FunctionalProgramming是一种编程......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99