继续进阶(ง •_•)ง
之前我们一直使用arcgsi自带的底图或者地图,总有违和感,体现不出来咱们的优势,借此机会讲讲咱们国家为老百姓提供的 国家地理信息公共服务平台-天地图,也是非常的好用,如果不是为了使用arcgis的地理处理工具和server我才不用arcgisヾ(≧へ≦)〃
一、概述
在2021年6月,esri公司发布了ArcGIS API for JavaScript 4.20,该版本包含了一系列改进,官网:Overview | ArcGIS API for JavaScript,大部分的使用方法在这里都能找到。为了体现测绘和地理信息系统的特殊性和专业性,特别是要引入国家2000坐标系,与当前测绘成果和国家政策相吻合,以提高地理信息资料的精度,需要将地图坐标系设置为wkid:4490,同时国内还提供了地理信息公共平台天地图,具有较新的影像底图和矢量底图,以及对应的注记,极大的方便了测绘工作者,如何将两者有效的结合显得尤为重要。天地图提供了web端和移动端的开发接口,在此记录web端的ArcGIS+天地图的使用方法,为两者的普及工作做一份贡献。移动端的使用方式见arcgis for android 入门与提高(五)加载天地图_郝大大的博客-CSDN博客_android studio 天地图
别忘了去天地图天地图API注册key,不废话,直接上代码:
二、配置方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>测试</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.20/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/layers/WebTileLayer",
'esri/layers/support/TileInfo',
'esri/views/MapView',
"esri/layers/FeatureLayer",
"esri/geometry/SpatialReference",
"esri/geometry/Point",
], function (Map, WebTileLayer, TileInfo, MapView, FeatureLayer, SpatialReference, Point) {
var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
var token = ""; //天地图token,在官网申请
var tileInfo = new TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 0,
"origin": {
"x": -180,
"y": 90
},
"spatialReference": {
"wkid": 4490
},
"lods": [
{ "level": "1", "scale": 295829355.45, "resolution": 0.703125 },
{ "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },
{ "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },
{ "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },
{ "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },
{ "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },
{ "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },
{ "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },
{ "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },
{ "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },
{ "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },
{ "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },
{ "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },
{ "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },
{ "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },
{ "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },
{ "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },
{ "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },
{ "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }
]
})
//影像地图
var tiledLayer = new WebTileLayer({
urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: { wkid: 4490 },
});
//影像注记
var tiledLayerAnno = new WebTileLayer({
urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: { wkid: 4490 },
});
//定位到济南市中心
var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));
// 创建地图
var map = new Map({
basemap: {
baseLayers: [tiledLayer, tiledLayerAnno]
},
});
var view = new MapView({
container: "viewDiv",
map: map,
center: cityCenter,
zoom: 12,
ui: {
components: ["zoom", "compass"]
}
});
//显示经纬度坐标
view.on("click", (event) => {
let lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
let lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
alert(lon + ", " + lat);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
效果:
三、天地图其他图层加载方式
var URL_VECTOR_2000 = "http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=";
var URL_VECTOR_ANNOTATION_CHINESE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=";
var URL_VECTOR_ANNOTATION_ENGLISH_2000 = "http://{subDomain}.tianditu.com/DataServer?T=eva_c&x={col}&y={row}&l={level}&tk=";
var URL_IMAGE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=";
var URL_IMAGE_ANNOTATION_CHINESE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=";
var URL_IMAGE_ANNOTATION_ENGLISH_2000 = "http://{subDomain}.tianditu.com/DataServer?T=eia_c&x={col}&y={row}&l={level}&tk=";
var URL_TERRAIN_2000 = "http://{subDomain}.tianditu.com/DataServer?T=ter_c&x={col}&y={row}&l={level}&tk=";
var URL_TERRAIN_ANNOTATION_CHINESE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=cta_c&x={col}&y={row}&l={level}&tk=";
var URL_VECTOR_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=";
var URL_VECTOR_ANNOTATION_CHINESE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=";
var URL_VECTOR_ANNOTATION_ENGLISH_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=eva_w&x={col}&y={row}&l={level}&tk=";
var URL_IMAGE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=img_w&x={col}&y={row}&l={level}&tk=";
var URL_IMAGE_ANNOTATION_CHINESE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=cia_w&x={col}&y={row}&l={level}&tk=";
var URL_IMAGE_ANNOTATION_ENGLISH_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=eia_w&x={col}&y={row}&l={level}&tk=";
var URL_TERRAIN_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=ter_w&x={col}&y={row}&l={level}&tk=";
var URL_TERRAIN_ANNOTATION_CHINESE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=cta_w&x={col}&y={row}&l={level}&tk=";