一、概述
在2021年6月，esri公司發布了ArcGIS API for JavaScript 4.20，該版本包含了一系列改進，官網：https://developers.arcgis.com/javascript/latest/，大部分的使用方法在這里都能找到，為了體現測繪和地理資訊系統的特殊性和專業性，特別是要引入國家2000坐標系，與當前測繪成果和國家政策相吻合，以提高地理資訊資料的精度，需要將地圖坐標系設定為wkid:4490，同時國內還提供了地理資訊公共平臺天地圖，具有較新的影像底圖和矢量底圖，以及對應的注記，極大的方便了測繪作業者，如何將兩者有效的結合顯得尤為重要，天地圖提供了web端和移動端的開發介面，在此記錄web端的ArcGIS+天地圖的使用方法，為兩者的普及作業做一份貢獻，移動端的使用方式見https://blog.csdn.net/HB_Programmer/article/details/107731664
二、配置方式
<!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=";轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292358.html
標籤：其他