I won't say anything about creating a Vue project.
Tell me directly how to achieve the title.
1. Install the library
npm i esri-loader -STwo, the code
I will directly go to the complete small demo here
<template>
<div id="viewDiv"></div>
</template>
<script>
import { loadModules } from "esri-loader";
export default {
name: "MyDemo1",
mounted() {
let options = {
url: "https://js.arcgis.com/4.17/",
css: "https://js.arcgis.com/4.17/esri/themes/light/main.css",
};
loadModules(
[
"esri/config",
"esri/Map",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/FeatureLayer",
"esri/geometry/SpatialReference",
"esri/views/SceneView"
],
options
).then(
([
esriConfig,
Map,
WebTileLayer,
TileInfo,
FeatureLayer,
SpatialReference,
SceneView
]) => {
esriConfig.apiKey = "你的esri官网上的Key";
var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
var token = "你的天地图Token"; //天地图token，在官网申请
//影像地图
var tiledLayer = new WebTileLayer({
urlTemplate:
tiandituBaseUrl +
"/DataServer?T=img_w&x={col}&y={row}&l={level}&tk=" +
token,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
});
// 创建地图
var map = new Map({
ground: "world-elevation"
});
map.add(tiledLayer)
var view = new SceneView({
container: "viewDiv",
map: map,
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>
<style scoped>
#viewDiv {
padding: 0;
margin: 0;
width: 100%;
height: 95vh;
}
</style>Here is a reminder: pay attention to the problem of the projected coordinate system. I just didn't pay attention to this problem just now. I used vec_c, which is a longitude and latitude projection, so I keep reporting errors, saying that my layer cannot be loaded. But the error is still saying that mine is 4490 (Tiantu map), and view is 102100 (should be the default of esri), and I have been doing it for a long time. If it is a MapView (two-dimensional case), remember to use the correct projected coordinate system, otherwise there will be problems.
two-dimensional:
<template>
<div id="viewDiv"></div>
</template>
<script>
import { loadModules } from "esri-loader";
export default {
name: "MyDemo1",
mounted() {
let options = {
url: "https://js.arcgis.com/4.17/",
css: "https://js.arcgis.com/4.17/esri/themes/light/main.css",
};
loadModules(
[
"esri/config",
"esri/Map",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/views/MapView",
"esri/geometry/SpatialReference",
"esri/geometry/Extent",
],
options
).then(
([
esriConfig,
Map,
WebTileLayer,
TileInfo,
MapView,
SpatialReference,
Extent,
]) => {
esriConfig.apiKey ="xxx";
var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
var token = "xxx"; //天地图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 extent = new Extent({
xmin: 73.62,
ymin: 3.86,
xmax: 135.05,
ymax: 53.55,
spatialReference: {
wkid: 4490,
},
});
//影像地图
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 map = new Map({
basemap: {
baseLayers: [tiledLayer],
},
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 12,
ui: {
components: ["zoom", "compass"],
},
extent: extent,
constraints: {
minZoom: 4,
maxZoom: 23,
geometry: extent,
},
});
//显示经纬度坐标
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>
<style scoped>
#viewDiv {
padding: 0;
margin: 0;
width: 100%;
height: 95vh;
}
</style>3. Results
Two-dimensional:
3D:
The official website of Tianditu is here: Tiantutu API