ArcGIS for js 4.x 加载图层

已于 2024-07-26 10:50:36 修改
阅读量485 收藏
点赞数 3
文章标签： arcgis
于 2024-06-05 14:01:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19688207/article/details/139470418
版权

二维：

1、创建vue项目

npm create vite@latest

2、安装ArcGIS JS API依赖包

npm install @arcgis/core

3、引入ArcGIS API for JavaScript模块

<script setup>
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
import TileLayer from '@arcgis/core/layers/TileLayer.js'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer.js'
import Locate from "@arcgis/core/widgets/Locate.js";
import Compass from "@arcgis/core/widgets/Compass.js";
import ScaleBar from "@/pages/demo9/scaleBar.js"
import { onMounted } from "vue";

***
***
</script>

4、创建vue组件

<template>

	<view class="map" id="mapView"></view>
	
</template>

5、创建一个初始化函数initArcGisMap()用于创建Map实例和MapView实例

	
<script setup>

***
***

onMounted(()=>{
	//initMap();
	initTDTMap();
});

// geo地图加载
const initMap = () =>{
	const map = new Map({
		basemap:{
			baseLayers:[
				new TileLayer({
					url:"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer"
				})
			]	
		}
	});
	
	const mapView = new MapView({
		// 长春坐标系
		center:[125.331345,43.8328],
		// 初始层级
		zoom:10,
		container:"mapView",
		map:map,
		constraints: {
			minZoom: 10,// 最小层级
			maxZoom: 19 // 最大层级
		}
	});

}
	
// 天地图加载
const initTDTMap = () =>{
	
	let webLayer = new WebTileLayer({
		urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=352d4b1313777a8643542046a28d17e5",
		subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
	});
	
	
	const map = new Map({
		basemap:{
			baseLayers:[webLayer]
		}
	});
	
	 const mapView = new MapView({
		// 默认中心点位
		center: [125.338, 43.882],
		map: map,
		// 初始层级
		zoom: 10,
		container: "mapView",
		constraints: {
			minZoom: 9,// 最小层级
			maxZoom: 17// 最大层级
		},
	});
	
	let compass = new Compass({
			view: mapView
		});

	let locateWidget = new Locate({
		view: mapView, // Attaches the Locate button to the view
	});


	// 移动默认的放大缩小按钮
    mapView.ui.move("zoom", "bottom-right");
    // 恢复方向和定位按钮
	mapView.ui.add([compass, locateWidget], "bottom-left");
	// 恢复方向和定位按钮位置
	mapView.ui.padding = {top:0,left:0,right:10,bottom:60}	
    //清除放大缩小按钮
    //mapView.ui.remove('zoom')
    // 清除底部powered by ESRI
	mapView.ui.remove("attribution");

	// 比例尺方法调用
	ScaleBar(mapView);
}
	
</script>

<style lang="scss" scoped>
    .map ::v-deep .esri-view-surface.esri-view-surface--touch-none:focus::after {
		outline: none !important;
	}
	.map {
		width: 100%;
		/* height: 185vw; */
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	#mapView{
		width: 100%;
		height:100%;
	}
	
	

</style>

加载地图可后设置container，使得mapView在方法外使用:

// mapView容器
const mapView = new MapView({
    // 长春坐标系
    center:[125.331345,43.8328],
    // 初始层级
    zoom:10,
    //container:"mapView",
    map:map,
    constraints: {
        minZoom: 10,// 最小层级
        maxZoom: 19 // 最大层级
    }
});
	
    
mapView.ui.remove('zoom')//清除放大缩小按钮
// 清除底部powered by ESRI
mapView.ui.remove("attribution");

const initMap = function(){
    mapView.container = "mapView";

};

封装加载地图：

let myMapView = ref();
// 封装map,mapView，zoom
let ToolsConfig = {
    map:null,
    view:null,
    zoom:10,
    viewpoint:null
};

onMounted(()=>{
    initMap();
})

// 地图
const dzLayer = new WebTileLayer({
	urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
	subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
});
 
// 标注
const dzbzLayer = new WebTileLayer({
	urlTemplate: "https://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
	subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
});

ToolsConfig.map = new Map({
    basemap:{
        baseLayers:[dzLayer],
		referenceLayers:[dzbzLayer]
    }
});


const map = new Map({
    basemap:{
        baseLayers:[dzLayer],
		referenceLayers:[dzbzLayer]
    }
});


ToolsConfig.view = new MapView({
    // 长春坐标系
    center:[125.331345,43.8328],
    // 初始层级
    zoom:10,
    //container:"mapView",
    map:ToolsConfig.map,
    constraints: {
        minZoom: 10,// 最小层级
        maxZoom: 19 // 最大层级
    }
});

//清除放大缩小按钮
ToolsConfig.view.ui.remove('zoom')
// 清除底部powered by ESRI
ToolsConfig.view.ui.remove("attribution");

const initMap = function(){
    ToolsConfig.view.container = "mapView";
    // 下面的方法也可以
    //ToolsConfig.view.container = myMapView.value.id;

     // 地图加载后调用
    ToolsConfig.view.when(function () {
        // 赋值初始化位置
        ToolsConfig.viewpoint = ToolsConfig.view.viewpoint.clone();
    });
    
};

 ToolsConfig.zoom = new Zoom({
    view:ToolsConfig.view,
});


// 放大缩小
 ToolsConfig.zoom.zoomIn();// 放大
 ToolsConfig.zoom.zoomOut();// 缩小
// 复位
// 设置后会自动视角定位
ToolsConfig.view.viewpoint = ToolsConfig.viewpoint;

 

比例尺设置（scaleBar.js文件）：

import ScaleBar from "@arcgis/core/widgets/ScaleBar";
// 比例尺
const scale = ((mapView) =>{
	let scaleBar = new ScaleBar({
		view:mapView
	});
	
	// Add widget to the bottom left corner of the view
	mapView.ui.add(scaleBar, {
		position: "bottom-left"
	});
	
});

export default scale;

天地图： 

  

let basemap = new Basemap({
          baseLayers: [
            new WebTileLayer({
              //天地图电子地图
              urlTemplate:"http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
              subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
              copyright: "天地图",
            }),
          ],
          referenceLayers: [
            new WebTileLayer({
              //天地图电子地图注记
              // urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
              urlTemplate:window.PLATFROM_CONFIG.tdtMapdzdzzjUrl,
              subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
              copyright: "天地图注记",
            }),
          ],
          title: "basemap",
          id: "basemap",
        });

        let basemapyx = new Basemap({
          baseLayers: [
            new WebTileLayer({
              //天地图影像
              urlTemplate:"http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
              subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
              copyright: "天地图",
            }),
          ],
          referenceLayers: [
            new WebTileLayer({
              //天地图注记
              // urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
              urlTemplate:window.PLATFROM_CONFIG.tdtMapyxzjUrl,
              subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
              copyright: "天地图注记",
            }),
          ],
          title: "basemapxy",
          id: "basemapxy",
        });
        // basemap:{ baseLayers:[tdtMap, tdtMap_anno]},
        this.basemaps[0] = basemap;
        this.basemaps[1] = basemapyx;
        this.map = new Map({
          // basemap: "streets-vector",
          basemap: basemap,
          //layers: [layer]
        });

加载天地图示例：

<template>
	
		<view class="map" id="mapView">
		</view>
		 
	
</template>

<script setup>
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer.js";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js"
import { onMounted } from "vue";	


onMounted(()=>{
	init();
});

const dzLayer = new WebTileLayer({
	urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
	subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
});

const dzbzLayer = new WebTileLayer({
	urlTemplate: "https://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=7b79e37115f10c512f76cdecda599902",
	subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
});

// 加载FeatureLayer
const featureLayer = new FeatureLayer({
	url:"http://116.141.0.114:48080/geoscene/rest/services/%E8%80%95%E4%BF%9D/%E5%8F%8C%E9%98%B3%E5%8C%BA%E5%9B%BE%E6%96%91/FeatureServer/0",
	outFields: ["*"], //加载所有要素字段
	opacity:0.5,//透明度
	//popupTemplate: TuCeng03TC, //加载模板,
	//definitionExpression: "",// 筛查
	// 渲染
	renderer: {
		type: "simple",
		symbol: {
			type: "simple-fill",//simple-line(线)、simple-fill（面）
			style: "solid",// solid 全部填充、cross十字交错、diamond菱形、square矩形、triangle三角形
			color: [255,20,60, 0.4],
			outline: {
				color: [255, 0, 0, 1],
				width: 2,
			},
		},
	}
});



// map初始化
const map = new Map({
	basemap:{
		baseLayers:[dzLayer],
		referenceLayers:[dzbzLayer]
	}
});


// 地图初始化
const init = function(){
	// mapView容器
	const mapView = new MapView({
		// 长春坐标系
		center:[125.331345,43.8328],
		// 初始层级
		zoom:10,
		container:"mapView",
		map:map,
		constraints: {
			minZoom: 10,// 最小层级
			maxZoom: 19 // 最大层级
		}
	});
	
	// 清除底部powered by ESRI
	mapView.ui.remove("attribution");
	
	map.add(featureLayer);
	

};

	
</script>

<style lang="scss" scoped>
	.map ::v-deep .esri-view-surface.esri-view-surface--touch-none:focus::after {
		outline: none !important;
	}
	.map {
		width: 100%;
		/* height: 185vw; */
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	#mapView{
		width: 100%;
		height:100%;
		padding: 0;
		margin: 0;
		
		.custom_popup{
			width: 50%;
			height: 30%;
			border: 1px solid red;
			background-color: #fff;
			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			
			input{
				border: 1px solid yellow;
			}
			
			.scrollView{
				width: 100%;
				height:80%;
				border: 1px solid green;
			}
				
			.submit{
				background-color: blue;
			}
			
		}
	
	}
	
</style>

三维：

创建一个初始化函数initArcGisMap()用于创建Map实例和SceneView实例(三维场景)

注意：三维和二维引入的东西不一样

<template>
	<view id="sceneView">
		
</view>
</template>

<script setup>
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
import SceneView from '@arcgis/core/views/SceneView.js';
import { onMounted } from "vue";
	onMounted(()=>{
		initArcGisMap();
	})
	
	const initArcGisMap = () => {
		const map = new Map({
			basemap:"topo-vector"
		});
		
		const sceneView = new SceneView({
			 center: [-118.80500, 34.02700],
				zoom: 4,
				container: "sceneView",
				map: map
		});
		
		sceneView.ui.components = []
	
	}
	
</script>

<style lang="scss" scoped>
	#sceneView{
		width: 100%;
		height: 100vh;
	}

</style>

破z晓
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
arcgis js 4.x加载自定义坐标系的arcgis server发布的wms服务
傲骨雄风的博客
07-08 1580
一般城市本身用的都是自己定义的城市（本地）坐标系，没有对应公开的EPSG代码，如下图如果直接加载自定义坐标系的wms服务，直接会报错。参数，参数为对象，对象里包含一个wms的crs属性，值为自定义坐标系的wkt串，这样就能加载wmslayer了。点击报错连接，可以看到报错详情：大致意思是坐标系统是错误的值，在arcgis js api中我们看到wmslayer有这个属性。最终加载效果，多边形为自定义坐标系的wmslayer.添加不同的wms参数来进行地图的请求。与之前的代码的区别就是加了这个。
arcgis js api 4.x加载geoserver发布的地方坐标系（自定义坐标系）的wms服务
傲骨雄风的博客
10-22 901
arcgis js api 地方坐标系 geoserver wms服务
arcgis javascript api4.x加载非公开或者私有的arcgis地图服务
gislaozhang
02-02 577
如果有portal可以参考链接：https://mp.weixin.qq.com/s/WB09URxnPkaW9RvjHqAoSg。加载arcgis没有公开或者私有的地图服务，同时还想实现加载时不弹出登录窗口。下述是针对独立的arcgis server，没有portal的应用场景；
Arcgis api for JavaScript 4.X 学习——图层加载（要素图层、栅格图层、切片图层）
Yuewayio的博客
04-18 5151
WebGIS、ArcGIS API for JavaScript
arcgis js 4.x加载SceneLayer并实现基于属性查询定位及高亮
傲骨雄风的博客
04-26 515
【代码】arcgis js 4.x加载scenelayer并实现基于属性查询定位及高亮。
arcgis api for javascript 4.x 聚合
07-23
《ArcGIS API for JavaScript 4.x 聚合技术详解》 在GIS（地理信息系统）领域，ArcGIS API for JavaScript 是Esri公司提供的一款强大的Web GIS开发工具，它允许开发者在网页上创建交互式的地图应用。本文将深入探讨...
ArcGIS for js 4.X-热力图.rar
10-12
在ArcGIS for JavaScript（简称ArcGIS for JS）4.X版本中，热力图的实现相比3.X版本有所改变。在3.X版本中，热力图的加载通常依赖于内置的插件，操作相对简单。然而，随着4.X版本的发布，开发者发现热力图的创建多...
Arcgis api 4.x 加载json.zip
01-26
本文将深入探讨如何使用ArcGIS API 4.x版本加载JSON数据，以实现前端的数据可视化。 首先，ArcGIS API 4.x是Esri为Web开发人员提供的JavaScript库，它允许我们创建交互式地图和地理分析应用程序。这个API包含了丰富...
arcgis for js加载百度地图高德地图天地图
05-09
在GIS领域，ArcGIS for JavaScript（arcgis for js）是一个强大的Web地图开发库，它允许开发者将地理信息系统功能集成到Web应用中。本教程将详细阐述如何利用ArcGIS for JavaScript API来加载百度地图、高德地图和天...
arcgis for js 4.x 离线fonts.rar
01-12
1. **获取字体资源**：在"arcgis for js 4.x 离线fonts"这个压缩包中，包含了ArcGIS for JavaScript 4.x 需要的字体文件。这些文件通常为.ttf或.woff格式，包含了各种地图标记和图例所需的字符集。 2. **集成到项目...
arcgis api for js 4.x 绕过arcgis server加载arcgis切片服务
qq_33674300的博客
06-09 604
背景 前端使用arcgis api for 4.x，想使用arcgis server切片服务，但又不想买arcgis server。 准备切片 思路来自以下老哥 https://blog.csdn.net/lihao432/article/details/99710796 先在已有的arcgis server中发布服务，并且切好片。注意切片时，存储格式选为松散。切片方案我选择的arcgis online，其他的没试过。 切片转换 ArcGIS切片规则为：L+Z(级别)；R+Y(行号8位16进制)；C+
vue+ArcGIS API for JavaScript(1)——加载地图
子时不睡的博客
07-30 1668
前言 因为要做一个和ArcGIS相关的项目，所以记录一下自己的学习过程。 我使用的版本 ： VScode vue-cli 版本：4.5.13 ArcGIS API for JavaScript 文档（4.20版本）： ArcGIS API for JavaScript 主要还是跟着文档走 正文 有多种方式来将ArcGIS API for JavaScript引入自己的应用程序中，我是通过ES模块来构建的项目。 1. 先安装模块。 npm install @arcgis/core 安装之后看一下node_m
ArcGIS JS 4.X 加载天地图
long的博客
10-30 3354
网上有很多，但是有些没有用。这里记录一下可以使用的ArcGIS JavaScript 4.x 加载天地图的关键代码。 //实例化影像图 let satelliteLayer = new modules.WebTileLayer({ urlTemplate: "http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STY
Vue+Vite+Element Plus基础操作
m0_61517307的博客
08-07 935
Vue.js 是一个流行的前端框架，‌而 Vite 是一个快速构建前端应用的新型开发服务器和构建工具，‌两者结合可以显著提升开发效率和体验
ArcGIS基础：自定义创建点线面等样式符号以方便使用
yuanYW7556的博客
08-08 368
有时，使用ArcGIS自带的符号样式库无法满足我们使用要求，还需要进行调整，可能会浪费一些时间，那么自己新建一些样式符号备用，接下来，操作演示一下，新建【标记符号】的一个新样式符号，先在1处右键，然后在2空白处，右键新建，之后会打开【符号属性编辑器】如下所示，属于本机样式库，如果自己从来没有新建过样式库，里面就是空的，其文件夹颜色就是右图所示为灰色的文件夹。点击颜色比较清晰的【线符号】，显示右侧为一个线符号要素，表示新建过一个样式，也就是2处显示的。同样的，新建一个【线符号】，参数设置如下图。
Dom 元素转换 Image 图片 (截图)
最新发布
i_Satan的博客
08-08 874
安装使用案例解释vue2 项目,复制代码即可看见效果stylewidth100%</</</</</</stylebackgroundtomato;datareturnimageUrl""tableDatadatename"王小虎"address"上海市普陀区金沙江路 1518 弄"datename"王小虎"
ArcGIS基础：二维点转三维点 二维线转三维线
yuanYW7556的博客
08-06 271
处理前数据为一个二维线和一个DEM数据（数据来源于网络，来源于汤老师的书）在DEM上右键，打开图层属性，找到【基本高度】字段，选择在DEM表面上浮动。如下，为三维线的结果，可以看到二者没有贴合，可以改变以下基本高度。使用到的工具是：【依据属性实现要素转3D】，工具位置如下所示。将处理后得到3D点要素结果进行展示，就可以看到三维效果。按照如下顺序，进行参数设置，即可得到三维点数据。展示处理后的结果：黄色的线就贴合在DEM上了。使用到的工具是【插值shape】，其位置如下。二维点数据需要用到的是高程字段。
arcgis for js 4.X 加载geoserver WFS服务 指定图层
04-29
要加载 Geoserver WFS 服务中的指定图层，可以使用 ArcGIS API for JavaScript 4.x 的 `FeatureLayer` 类。以下是加载 Geoserver WFS 服务中指定图层的示例代码： ```javascript // 创建 FeatureLayer 实例 var featureLayer = new FeatureLayer({ // 设置服务 URL url: "http://localhost:8080/geoserver/wfs", // 设置图层名称 layerId: "layer_name", // 设置查询模式为按需加载 mode: FeatureLayer.MODE_ON_DEMAND, // 设置要素渲染器 renderer: new SimpleRenderer({ symbol: new SimpleMarkerSymbol({ color: [255, 0, 0, 0.5], size: 12, outline: { color: [255, 255, 255], width: 1 } }) }) }); // 将 FeatureLayer 添加到地图中 map.add(featureLayer); ``` 在上面的代码中，`url` 参数是 Geoserver WFS 服务的 URL，`layerId` 参数是要加载的图层名称，`mode` 参数设置为 `FeatureLayer.MODE_ON_DEMAND`，表示按需加载模式，只有在需要时才会加载要素数据。`renderer` 参数是要素渲染器，可以根据需要进行设置。最后，将 `FeatureLayer` 添加到地图中即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值