vue+Arcgis js api+esri-loader

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