效果图
![](https://i-blog.csdnimg.cn/blog_migrate/5c03c87dc2e2102b8b9a545693458767.png)
1. 书签
// 书签
var bookmarksList = [
{ extent: { xmin: 106, ymin: 39, xmax: 112, ymax: 32 }, name: '陕西' },
{ extent: { xmin: 111, ymin: 31, xmax: 117, ymax: 35 }, name: '河南' },
{ extent: { xmin: 109, ymin: 35, xmax: 121, ymax: 42 }, name: '河北' },
{ extent: { xmin: 115, ymin: 31, xmax: 121, ymax: 34 }, name: '江苏' },
{ extent: { xmin: 90, ymin: 22, xmax: 114, ymax: 36 }, name: '四川' }
]
const bookmarks = new Bookmarks({
map: map,
bookmarks: bookmarksList,
editable: true
}, 'bookmarks')
bookmarks.startup()
2. 图层列表
// 图层列表
var myWidget = new LayerList({
map: map,
layers: donglayer
}, 'layerList')
myWidget.startup()
3. 测量工具
var measurement = new Measurement({
map: map
}, 'measurementDiv')
measurement.startup()
4. 图例
// 图例
var legend = new Legend({
map: map
}, 'legendDiv')
legend.startup()
5. 鹰眼
// 鹰眼
var overviewMapDijit = new OverviewMap({
map: map,
visible: true
}, 'overview')
overviewMapDijit.startup()
6. 地图切换
// 地图切换
var basemapToggle = new BasemapToggle({
map: map,
visible: true
}, 'basemapToggle')
basemapToggle.startup()
完整代码:
<template>
<div>
<div id="home">
<el-row>
<el-col :span="19">
<div class="grid-content bg-purple">
<div id="overview" style="height: 100px; width: 150px; float:left;"></div>
<div id="map"></div>
</div>
</el-col>
<el-col :span="5">
<div class="grid-content bg-purple-light">
<el-card id="mapOut" style="overflow-y: scroll;">
<!-- 书签-->
<el-card style=" padding: 5px;">
<div id="bookmarks"></div>
</el-card>
<!-- 图层列表-->
<el-card>
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane">
<div id="layerList"></div>
</div>
</el-card>
<el-card>
<div id="titlePane" class="esriLayerList" data-dojo-type="dijit/TitlePane">
<div id="measurementDiv"></div>
</div>
</el-card>
<!-- 图例-->
<el-card shadow="always" class="box-card" style="width: 100%">
<div slot="header" class="clearfix">
<span>Lendge</span>
<el-button style="float: right; padding: 3px 0" type="text"
@click="lendgeVisible ? hideLendge() : showLendge()">{{this.lendgeVisible}}
</el-button>
</div>
<div id="legendDiv"></div>
</el-card>
</el-card>
</div>
</el-col>
</el-row>
</div>
<div style="position: absolute; bottom: 20px; z-Index:999;">
<div id="basemapToggle"></div>
</div>
</div>
</template>
<script>
import * as esriLoader from 'esri-loader'
import $ from 'jquery'
export default {
data() {
return {
lendgeVisible: true
}
},
mounted() {
esriLoader.setDefaultOptions({
version: '3.28'
})
this.createMap()
},
methods: {
createMap: function () {
esriLoader.loadModules(['esri/map',
'dojo/dom', 'dojo/on',
'esri/layers/ArcGISDynamicMapServiceLayer',
'esri/dijit/Scalebar',
'esri/dijit/OverviewMap',
'esri/dijit/BasemapToggle',
'esri/dijit/BasemapGallery',
'esri/dijit/Bookmarks',
'esri/dijit/Measurement',
'esri/dijit/Legend',
'esri/dijit/LayerList',
'esri/tasks/PrintTask',
'esri/tasks/PrintTemplate',
'esri/tasks/PrintParameters',
'dojo/domReady!'], {
css: true
})
.then(([Map, dom, on, ArcGISDynamicMapServiceLayer, Scalebar, OverviewMap, BasemapToggle, BasemapGallery, Bookmarks, Measurement, Legend, LayerList, PrintTask, PrintTemplate, PrintParameters]) => {
var dongURL = 'http://localhost:6080/arcgis/rest/services/webgis/China_POI/MapServer'
var donglayer = new ArcGISDynamicMapServiceLayer(dongURL)
const map = new Map('map', {
center: [108.934518, 34.35333],
zoom: 7,
logo: false,
basemap: 'oceans'
})
map.addLayer(donglayer)
var overviewMapDijit = new OverviewMap({
map: map,
visible: true
}, 'overview')
overviewMapDijit.startup()
var basemapToggle = new BasemapToggle({
map: map,
visible: true
}, 'basemapToggle')
basemapToggle.startup()
var bookmarksList = [
{ extent: { xmin: 106, ymin: 39, xmax: 112, ymax: 32 }, name: '陕西' },
{ extent: { xmin: 111, ymin: 31, xmax: 117, ymax: 35 }, name: '河南' },
{ extent: { xmin: 109, ymin: 35, xmax: 121, ymax: 42 }, name: '河北' },
{ extent: { xmin: 115, ymin: 31, xmax: 121, ymax: 34 }, name: '江苏' },
{ extent: { xmin: 90, ymin: 22, xmax: 114, ymax: 36 }, name: '四川' }
]
const bookmarks = new Bookmarks({
map: map,
bookmarks: bookmarksList,
editable: true
}, 'bookmarks')
bookmarks.startup()
var measurement = new Measurement({
map: map
}, 'measurementDiv')
measurement.startup()
var myWidget = new LayerList({
map: map,
layers: donglayer
}, 'layerList')
myWidget.startup()
var legend = new Legend({
map: map
}, 'legendDiv')
legend.startup()
})
},
hideLendge() {
this.lendgeVisible = !this.lendgeVisible
$('#legendDiv').hide()
},
showLendge() {
this.lendgeVisible = !this.lendgeVisible
$('#legendDiv').show()
},
opensuccess() {
this.$message({
message: 'success',
type: 'success'
})
},
openWarning() {
this.$message({
message: '非地理坐标系',
type: 'warning'
})
}
}
}
</script>