Vue プロジェクトの作成については何も言いません。
タイトルを達成する方法を直接教えてください。
1. ライブラリをインストールする
npm i esri-loader -S2、コード
ここから完全な小さなデモに直接移動します
<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>ここで注意してください: 投影座標系の問題に注意してください。私は今この問題に注意を払わなかったのですが、経度と緯度の投影法である vec_c を使用したため、レイヤーを読み込めないというエラーが報告され続けました。しかし、エラーはまだ私のものは4490（Tiantuマップ）、ビューは102100（esriのデフォルトであるはずです）であると言っており、私は長い間それを行っています。MapView (2 次元の場合)の場合は、必ず正しい投影座標系を使用してください。使用しないと問題が発生します。
二次元:
<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. 結果
二次元:
3D:
Tianditu の公式ウェブサイトはこちら: Tiantutu API