1.安装esri-loader
npm i esri-loader -s
2.初始化地图
<template>
<div class="container">
<div id="viewDiv"></div>
</div>
</template>
<script>
import esriLoader from "esri-loader";
export default {
name: 'MyMap',
data() {
return {
map: null,
view: null,
popupData: {},
}
},
methods: {
initMap() {
// 配置api地址和css样式地址
const options = {
// url: `${baseUrl}` + "/init.js",
// css: `${baseUrl}` + "/main.css",
};
esriLoader.loadModules(
[
"esri/Map",
"esri/Basemap",
"esri/layers/TileLayer",
"esri/views/SceneView",
"esri/geometry/Extent",
],
options
)
.then(([
Map,
Basemap,
TileLayer,
SceneView,
Extent,
]) => {
// 新建底图
let imageBasemap = new Basemap({
baseLayers: [
new TileLayer({
url: `/services/basemap/MapServer`,
}),
new TileLayer({
id: "gzyx",
url: `/ServiceAccess/MapService-T/19f3612a2b44e98baae1f40713a085b6`,
}),
],
title: "影像",
id: "imageBasemap",
});
// 地图
this.map = new Map({
basemap: imageBasemap,
});
// 容器
this.view = new SceneView({
container: "viewDiv",
map: this.map,
});
this.view.map.ground.surfaceColor = "#1c4154";
this.view.ui.remove("zoom"); //清除放大缩小按钮
this.view.ui.remove("attribution"); //清除底部powered by ESRI
this.view.ui.remove("navigation-toggle"); //清除导航按钮
this.view.ui.remove("compass"); //清除罗盘仪
// 地图加载完回调
this.view.when((params) => {
let zoomExtent = new Extent({ //默认全局范围
type: "extent",
xmin: -36952.0769629364,
ymin: -113721.56420189515,
xmax: 163632.2332690646,
ymax: 600982.7307301049,
});
// 使用远程地图服务，不能直接设置中心点center和缩放zoom
this.view.goTo(
{
target: zoomExtent
},
{
duration: 300
}
)
.then(res => {
this.view.zoom = 9.2;
})
})
this.view.on('click', (params) => {
this.view.hitTest(params).then((res) => {
console.log('点击事件')
if (res.results.length > 0) {
this.popupData = {...res.results[0].graphic.attributes};
} else {
console.log('没有点中图层')
}
})
})
})
},
},
mounted() {
this.initMap();
}
}
</script>
<style lang="less" scoped>
.container{
position: relative;
width: 100vw;
height: 100vh;
font-size: 0.24rem;
color: #fff;
#viewDiv{
position: absolute;
width: 100%;
height: 100%;
}
}
</style>
3.打点（单个点）
const graphicsLayer = new this.GraphicsLayer();
this.map.add(graphicsLayer);
// -----------------画点--------------------
const point = {
type: "point",
x: 113,
y: 23,
z: 10
};
const markerSymbol = {
type: "simple-marker",
color: [226, 119, 40],
outline: {
color: [255, 255, 255],
width: 2
}
};
const pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
graphicsLayer.add(pointGraphic);
// -------------画线------------------
const polyline = {
type: "polyline", // autocasts as new Polyline()
paths: [
[-0.178, 51.48791, 0],
[-0.178, 51.48791, 1000]
]
};
const lineSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 4
};
const polylineGraphic = new Graphic({
geometry: polyline,
symbol: lineSymbol
});
graphicsLayer.add(polylineGraphic);
// ---------------画面----------------
const polygon = {
type: "polygon", // autocasts as new Polygon()
rings: [
[-0.184, 51.48391, 400],
[-0.184, 51.49091, 500],
[-0.172, 51.49091, 500],
[-0.172, 51.48391, 400],
[-0.184, 51.48391, 400]
]
};
const fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [227, 139, 79, 0.8],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
};
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: fillSymbol
});
graphicsLayer.add(polygonGraphic);
画点.png
4.打点（多个点）
let allGraphic = []
// 多条数据，每条数据包含位置信息
data.forEach(item => {
let {detail} = item;
let point = {
type: "point",
x: detail.LONGITUDE,
y: detail.LATITUDE,
z: 5,
spatialReference: this.view.spatialReference, //空间坐标系，不使用默认经纬度的时候需要标明
}
// 生成点
let graphic = new this.Graphic({
attributes: item.detail,
geometry: point,
symbol: {
height: "80px",
type: "picture-marker",
width: "80px",
url: 'https://szgtest.gzonline.gov.cn/ebus/sjzyglpt/v1/service/jtcwcxfw' //自定义点样式
}
})
allGraphic.push(graphic);
});
// 新建图层
let graphicsLayer = new this.GraphicsLayer({
id: '123456',
});
//图层id在隐藏和删除图层的时候有用
// 删除图层
// this.map.remove(this.map.findLayerById(val.layerCode));
// 隐藏图层
// this.map.findLayerById(val.layerCode).visible = false;
// 散点上图
graphicsLayer.addMany(allGraphic)
// 新增图层
this.map.add(graphicsLayer)
image.png
