本文档介绍了如何在Vue项目中使用CDN和npm两种方式实现ArcGIS街道底图，并详细展示了如何封装和调用天地图底图模块，包括创建地图、设置底图以及在Vue组件中集成地图的步骤。同时，提供了天地图底图的配置和调用示例，需要申请并替换Key以正常使用。
街景底图
效果图：
基于CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>map</title>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.34/esri/css/esri.css" />
<script typ e="text/javascript" src="https://js.arcgis.com/3.34/init.js"></script>
</head>
<body>
<div id="viewDiv"></div>
<script>
require(["esri/map"], function(Map) {
console.log(Map);
var map = new Map("viewDiv", {
basemap: "streets",
zoom: 4,
center: [120, 30]
});
});
</script>
</body>
</html>
基于vue+npm
需要引入esri-loader：
cnpm install --save esri-loader
- 简单封装地图模块（src/map/map.js）
import { loadModules } from "esri-loader";
//esri-loader一些基本配置
const options = {
version: "3.34",
css: true,
url: "https://js.arcgis.com/3.34/init.js",
};
//自定义的参数
let local = {
map: null,
mapDivId: "viewDiv",
};
//创建地图
function createMap() {
//使用Promise对象构建（也可以不用）
return new Promise((resolve) => {
loadModules(["esri/map"], options).then(([Map]) => {
local.map = new Map(local.mapDivId, {
basemap: "streets",
zoom: 4,
center: [120, 30],
});
resolve(true);
});
});
}
//对外提供访问
export default {
createMap,
};
- 在vue文件中调用上述模块
<template>
<div class="hello">
<div id="viewDiv"></div>
</div>
</template>
<script>
import map from "@/map/map";
export default {
name: "HelloWorld",
mounted(){
map.createMap()
.then(()=>{
console.log("地图加载完毕");
})
},
};
</script>
天地图底图
效果图：
定义天地图底图模块（src/map/tdt.js）：
需要去天地图官网申请Key，然后把下面第117行的tk的值换成自己申请的浏览器端的Key。
原理：使用dojo/_base/declare模块，继承API中的TiledMapServiceLayer类，自定义天地图切片加载。
import { loadModules } from "esri-loader";
const options = {
version: "3.34",
css: true,
url: "https://js.arcgis.com/3.34/init.js",
};
export default function() {
return loadModules(
[
"dojo/_base/declare",
"esri/layers/TileInfo",
"esri/SpatialReference",
"esri/geometry/Extent",
"esri/layers/TiledMapServiceLayer",
],
options
).then(
([declare, TileInfo, SpatialReference, Extent, TiledMapServiceLayer]) =>
declare("TDTLayer", TiledMapServiceLayer, {
constructor: function(d) {
this.mapType = d.type;
this.spatialReference = new SpatialReference({ wkid: 4326 });
this.initialExtent = this.fullExtent = new Extent(
-180.0,
-90.0,
180.0,
90.0,
this.spatialReference
);
this.tileInfo = new TileInfo({
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90,
},
spatialReference: {
wkid: 4326,
},
lods: [
{ level: 2, resolution: 0.3515625, scale: 147748796.52937502 },
{ level: 3, resolution: 0.17578125, scale: 73874398.264687508 },
{ level: 4, resolution: 0.087890625, scale: 36937199.132343754 },
{ level: 5, resolution: 0.0439453125, scale: 18468599.566171877 },
{
level: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385,
},
{
level: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693,
},
{
level: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846,
},
{
level: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423,
},
{
level: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116,
},
{
level: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558,
},
{
level: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779,
},
{
level: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895,
},
{
level: 14,
resolution: 8.58306884765625e-5,
scale: 36071.483527679447,
},
{
level: 15,
resolution: 4.291534423828125e-5,
scale: 18035.741763839724,
},
{
level: 16,
resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619,
},
{
level: 17,
resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309,
},
{
level: 18,
resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655,
},
],
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function(level, row, col) {
let tk = "更换为申请的浏览器端的key";
let DDO = {
//数据字典
vec: "vec", //矢量底图
img: "img", //影像底图
cva: "cva", //矢量注记
};
// console.log(DDO[this.mapType])
return (
"http://t" +
(col % 8) +
".tianditu.gov.cn/" +
DDO[this.mapType] +
"_c/wmts?" +
"tk=" +
tk +
"&service=wmts&request=GetTile&version=1.0.0&LAYER=" +
DDO[this.mapType] +
"&tileMatrixSet=c&TileMatrix=" +
level +
"&TileRow=" +
row +
"&TileCol=" +
col +
"&style=default&format=tiles"
);
},
})
);
}
调用天地图底图模块（src/map/map.js）
import { loadModules } from "esri-loader";
import TDT from "./tdt"; //引入天地图底图模块
//esri-loader基本配置
const options = {
version: "3.34",
css: true,
url: "https://js.arcgis.com/3.34/init.js",
};
//自定义的参数
let local = {
map: null,
mapDivId: "viewDiv",
};
//创建地图
function createMap() {
//使用Promise对象构建（也可以不用）
return new Promise((resolve) => {
loadModules(["esri/map", "esri/SpatialReference"], options).then(
([Map, SpatialReference]) => {
//创建地图容器
local.map = new Map(local.mapDivId, {
zoom: 4,
center: [120, 30],
spatialReference: new SpatialReference({ wkid: 4326 }),
});
//添加天地图底图
TDT().then((TDTLayer) => {
let vec = new TDTLayer({ type: "vec" });
let cva = new TDTLayer({ type: "cva" });
local.map.addLayer(vec);
local.map.addLayer(cva);
//添加影像底图
//let img= new TDTLayer({ type: "img" });
//local.map.addLayer(img);
});
//监听鼠标点击地图事件
local.map.on("click", (evt) => {
let point = evt.mapPoint;
alert(`x=${point.x}\ny=${point.y}`);
});
resolve(true);
}
);
});
}
//对外提供访问
export default {
createMap,
};
在vue中调用地图模块
<template>
<div class="hello">
<div id="viewDiv"></div>
</div>
</template>
<script>
import map from "@/map/map";
export default {
name: "HelloWorld",
mounted(){
map.createMap()
.then(()=>{
console.log("地图加载完毕");
})
},
};
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
