Vue + Arcgis for js4.18实现加载天地图
天地图组件
组件需要传入Map和View对象以及默认图层类型,代码如下
<template>
<div ref="baseMapContainer" class="block base-layer">
<a-popover
placement="right"
>
<a-row slot="content">
<a-col :span="8" >
<div @click="changeType('vec')" :class="baseType==='vec'?'isActive':null">
<a-card class="box-card" shadow="never" :body-style="{padding:'0'}" >
<img src="@/assets/images/shiliang.png" class="shiliang" width="100%">
<span class="map-type-name">矢量图</span>
</a-card>
</div>
</a-col>
<a-col :span="8" >
<div @click="changeType('img')" :class="baseType==='img'?'isActive':null">
<a-card class="box-card" shadow="never" :body-style="{padding:'0'}">
<img src="@/assets/images/yingxiang.png" class="yingxiang" width="100%">
<span class="map-type-name" >影像图</span>
</a-card>
</div>
</a-col>
<a-col :span="8">
<div @click="changeType('ter')" :class="baseType==='ter'?'isActive':null">
<a-card class="box-card" shadow="never" :body-style="{padding:'0'}">
<img src="@/assets/images/dixing.png" class="dixing" width="100%" >
<span class="map-type-name">地形图</span>
</a-card>
</div>
</a-col>
</a-row>
<a-button title='底图' style='width: 32px' icon='global'></a-button>
<svg-icon slot="reference" icon-class="international" style="width:30px;height:30px;color:#1890ff"/>
</a-popover>
</div>
</template>
<script>
import { loadModules } from "esri-loader";
export default {
name: "ArcgisMapBaseLayer",
props:{
// 底图类型
baseMapType:{
type:String,
default:()=>"vec"
},
map:{
type:Object
},
view:{
type:Object,
default:()=>null
}
},
data(){
return {
baseType:null,
subDomains:["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
}
},
watch:{
"view":{
handler:function (newVal) {
this.view = newVal;
this.view.ui.add(this.$refs.baseMapContainer, 'bottom-right')
this.baseType=this.baseMapType
this.initBaseMap()
},
deep:false
}
},
methods:{
changeType(val){
this.baseType=val
this.createBaseMap(val)
},
// 初始化底图
initBaseMap(){
this.createBaseMap(this.baseMapType);
},
// 创建底图
createBaseMap(type){
loadModules([
"esri/layers/support/TileInfo",
"esri/layers/WebTileLayer",
"esri/Basemap",
"esri/geometry/Extent"
],this.$option).then(([TileInfo,WebTileLayer,Basemap,Extent]) => {
if(!this.map)return;
let tileInfo = new TileInfo({
dpi: 96,
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4490
},
lods: [
{ level: 0, levelValue: 1, resolution: 0.703125, scale: 295497593.05875003 },
{ level: 1, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502 },
{ level: 2, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508 },
{ level: 3, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754 },
{ level: 4, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877 },
{ level: 5, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385 },
{ level: 6, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693 },
{ level: 7, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846 },
{ level: 8, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423 },
{ level: 9, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116 },
{ level: 10, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558 },
{ level: 11, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779 },
{ level: 12, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895 },
{ level: 13, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447 },
{ level: 14, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724 },
{ level: 15, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619 },
{ level: 16, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309 },
{ level: 17, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655 },
{ level: 18, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
{ level: 19, levelValue: 20, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
]
});
// 密钥
let key = '自己申请的密钥'
// 地图
let mapUrl = "https://{subDomain}.tianditu.gov.cn/*/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=#&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + key
// 注记
let mapWord = "https://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + key
switch (type) {
// 影像
case 'img':
mapUrl = mapUrl.replace('*','img_c')
mapUrl = mapUrl.replace('#','img')
mapWord = mapWord.replace('*','cva_c')
break;
// 矢量
case 'vec':
mapUrl = mapUrl.replace('*','vec_c')
mapUrl = mapUrl.replace('#','vec')
mapWord = mapWord.replace('*','cva_c')
break;
// 地形
case 'ter':
mapUrl = mapUrl.replace('*','ter_c')
mapUrl = mapUrl.replace('#','ter')
mapWord = mapWord.replace('*','cta_c')
break;
}
let satelliteLayer = new WebTileLayer({
urlTemplate: mapUrl,
subDomains: this.subDomains,
id: "天地图",
tileInfo,
spatialReference: { wkid: 4490 }
})
var anoBaseLayer = new WebTileLayer({
urlTemplate: mapWord,
subDomains: this.subDomains,
id: "天地图注记",
tileInfo,
spatialReference: { wkid: 4490 }
})
// 切换天地图
this.map.basemap = new Basemap({
baseLayers:[satelliteLayer],
referenceLayers: [anoBaseLayer]
});
this.view.extent = new Extent({
xmin: 116.86880075600004,
ymin: 36.78052494800005,
xmax:117.45696335900004,
ymax: 37.24691086200005,
spatialReference: {
wkid: 4490
}
});
});
}
}
}
</script>
<style lang="scss" scoped>
.isActive{
.box-card{
border: 2px solid #1890ff;
}
.map-type-name{
background: #1890ff;
}
}
.box-card{
position: relative;
margin:0 5px;
width:78px;
height:68px;
border:none
}
.map-type-name{
display: inline-block;
position: absolute;
background: rgba(0,0,0,.6);
text-align: center;
color: #fff;
position: absolute;
bottom: 0;
left:0;
font-size: 12px;
border-top-right-radius: 3px;
}
.base-layer{
position: absolute;
bottom: 70px;
right: 1px;
}
</style>