vue 通过@arcgis/core 引用 acrgis地图
<template>
<div class="hello">
<div id="mapview"></div>
<div style="position: absolute;z-index:10;">
<button type="primary" @click="print">打印</button>
</div>
</div>
</template>
<script>
import '@arcgis/core/assets/esri/themes/light/main.css';
import Map from '@arcgis/core/Map'
import Basemap from "@arcgis/core/Basemap";
import TileLayer from '@arcgis/core/layers/TileLayer'
import MapView from '@arcgis/core/views/MapView'
import PrintTask from "@arcgis/core/tasks/PrintTask";
import PrintTemplate from "@arcgis/core/rest/support/PrintTemplate";
import PrintParameters from "@arcgis/core/tasks/support/PrintParameters";
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return{
map:null,
view:null,
}
},
created() {
},
mounted() {
this.$nextTick(()=>{
this.getmap()
})
},
methods:{
print(){
let printTask = new PrintTask({
url: 'http://192.168.0.112:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'
// url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'
},'print');
let template = new PrintTemplate({
format: "png32",
exportOptions: {
width: 800,
height: 600,
dpi: 300
},
layout: "a4-portrait",
layoutOptions: {
titleText: "Print map",
authorText: "Sam"
}
});
const view = new MapView()
let params = new PrintParameters({
view: view,
map:this.map,
template: template,
url:'http://127.0.0.1:6080/arcgis/rest/services/shkjgh/YJJBNT/MapServer'
});
printTask.execute(params).then((printResult, printError) =>{
console.log(printResult.url)
window.open(printResult.url,'_blank');
}).catch((printError) =>{
console.log(printError)
});
// printTask.execute(params,function (evt){
// console.log(evt)
// alert(123)
// window.open(evt.url,'_blank');
// })
},
getmap(){
let basemap = new Basemap({
baseLayers: [
new TileLayer({
url: 'http://127.0.0.1:6080/arcgis/rest/services/shkjgh/INDEX/MapServer',
title: "Basemap",
})
],
title: "basemap",
id: "basemap",
});
const map = new Map({
// basemap: "osm",
basemap: basemap,
})
console.log(map)
console.log(map.layers)
let tempLayers = null
const view = new MapView({
container :'mapview',
map:map,
center: [116.404844,39.913385],
zoom: 2
})
// this.view = view;
let layer =new TileLayer({
url: 'http://127.0.0.1:6080/arcgis/rest/services/shkjgh/YJJBNT/MapServer',
title: '永久基本农田',
});
map.layers.add(layer);
tempLayers = map.layers
view.ui.remove('zoom')//清除放大缩小按钮
view.ui.remove('attribution')//清楚底部powered by ESRI
console.log(view)
this.map = map;
},
qiehuan(){
// this.map.basemap.baselayers = [
// new TileLayer: ({
// url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
// })
// ]
}
}
}
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
#mapview{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>