hb_sis_zhfx/src/components/arcgis/arcgis.vue

<template>
    <div class="arcgis"></div>
</template>

<script>
    import Map from "@arcgis/core/Map";
    import Basemap from "@arcgis/core/Basemap";
    import Graphic from "@arcgis/core/Graphic";
    import SpatialReference from "@arcgis/core/geometry/SpatialReference";
    import PictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol";
    import MapView from "@arcgis/core/views/MapView";
    import SceneView from "@arcgis/core/views/SceneView";
    import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
    import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
    import IdentifyParameters from "@arcgis/core/tasks/support/IdentifyParameters";
    import "@arcgis/core/assets/esri/themes/light/main.css";

    const mapUrl = "http://61.161.152.110:12345/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
    // const mapUrl = "http://172.16.6.30:12345/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
    let basemap = null;
    let map = null;
    let view = null;
    let point_graphicsLayer = null;
    let line_graphicsLayer = null;
    let text_graphicsLayer = null;
    let point_graphics = [];
    let line_graphics = [];
    let text_graphics = [];

    export default {
        // 名称
        name: "arcgis",
        // 使用组件
        components: {},
        // 传入参数
        props: {
            data: {
                type: Object,
                default: () => {
                    return {
                        mode: "2D", // 模式 2D 3D
                        title: "宁夏地图", // 标题
                        center: [106.230909, 38.487193], // 初始中心点
                        height: 654, // 3D地图初始相机高度
                        tilt: 65, // 俯视角
                        scale: 128000, // 缩放
                    }
                },
            }
        },
        // 自定义事件
        emits: {
            when: null, // 地图加载完成
            clickMap: null, // 点击地图(可点击元素)
        },
        // 数据
        data() {
            return {
                fanStateImgMapping: [{
                        name: "待机",
                        code: "dj",
                        img: require("@assets/map/fan/green.png")
                    },
                    {
                        name: "运行",
                        code: "yx",
                        img: require("@assets/map/fan/blue.png")
                    },
                    {
                        name: "限电",
                        code: "xd",
                        img: require("@assets/map/fan/purple.png")
                    },
                    {
                        name: "故障",
                        code: "gz",
                        img: require("@assets/map/fan/red.png")
                    },
                    {
                        name: "检查",
                        code: "jc",
                        img: require("@assets/map/fan/orange.png")
                    },
                    {
                        name: "离线",
                        code: "lx",
                        img: require("@assets/map/fan/black.png")
                    },
                    {
                        name: "受累",
                        code: "sl",
                        img: require("@assets/map/fan/white.png")
                    },
                ],
                syzImg: require("@assets/temp.png"),
            }
        },
        // 函数
        methods: {
            // 初始化地图
            initMap: function() {
                basemap = new Basemap({
                    // 底图
                    baseLayers: [
                        new MapImageLayer({
                            url: mapUrl,
                            title: this.data.title,
                            spatialReference: SpatialReference.WGS84,
                        }),
                    ],
                    title: this.data.title,
                    spatialReference: SpatialReference.WGS84,
                });
                map = new Map({
                    // 地图容器
                    basemap: basemap,
                });
                if (this.data.mode == "3D") {
                    view = new SceneView({
                        // 3D显示图层
                        map: map,
                        center: this.data.center,
                        camera: {
                            position: {
                                x: this.data.center[0], // lon
                                y: this.data.center[1], // lat
                                z: this.data.height, // elevation in meters
                            },
                            tilt: this.data.tilt,
                        },
                        container: this.$el,
                    });
                } else {
                    view = new MapView({
                        // 3D显示图层
                        map: map,
                        center: this.data.center,
                        container: this.$el,
                    });
                }
                view.scale = this.data.scale;
                //去掉版权
                view.ui._removeComponents(["attribution"]);
                view.when(() => {
                    this.when();
                    this.$emit('when');
                });
            },
            when: function() {
                // 当地图加载完成
                point_graphicsLayer = new GraphicsLayer({
                    graphics: []
                });
                line_graphicsLayer = new GraphicsLayer({
                    graphics: []
                });
                text_graphicsLayer = new GraphicsLayer({
                    graphics: []
                });
                map.add(line_graphicsLayer);
                map.add(point_graphicsLayer);
                map.add(text_graphicsLayer);
                view.on("click", (event) => {
                    view.hitTest(event).then((response) => {
                        let result = null;
                        if (response.results.length) {
                            const canClick = ["picture-marker", "text"];
                            response.results.forEach(item => {
                                if (canClick.indexOf(item.graphic.symbol.type) >= 0) {
                                    result = item.graphic.attributes;
                                }
                            })
                        }
                        if (result != null) {
                            this.$emit('clickMap', result);
                        }
                    })
                })
            },
            // 通过name或code获取img
            getFanImg: function(nameOrState) {
                const item = this.fanStateImgMapping.find(t => t.name == nameOrState || t.code ==
                    nameOrState);
                if (item) {
                    return item.img;
                } else {
                    console.error(nameOrState, "对应的图片不存在");
                    return "";
                }
            },
            // 添加图片点
            addImgPoint: function(jsonItem) {
                let item = JSON.parse(JSON.stringify(jsonItem));
                item.geometry.type = "point";
                item.geometry.spatialReference = SpatialReference.WGS84;
                item.symbol = {
                    type: "picture-marker",
                    url: item.attributes.type == "升压站" ? this.syzImg : this.getFanImg("dj"),
                    width: item.attributes.type == "升压站" ? "96px" : "48px",
                    height: item.attributes.type == "升压站" ? "96px" : "48px",
                    xoffset: 0,
                    yoffset: 18
                };
                let graphic = new Graphic(item);
                point_graphics.push(graphic);
                point_graphicsLayer.add(graphic);
                this.addImgText(jsonItem);
            },
            // 添加图片文字
            addImgText: function(jsonItem) {
                let item = JSON.parse(JSON.stringify(jsonItem));
                item.geometry.type = "point";
                item.geometry.spatialReference = SpatialReference.WGS84;
                item.symbol = {
                    type: "text",
                    color: "white",
                    haloColor: "black",
                    haloSize: "1px",
                    text: item.attributes.code,
                    xoffset: 0,
                    yoffset: -10,
                    font: {
                        size: 12,
                        // family: "Josefin Slab",/
                        weight: "bold"
                    }
                };
                let graphic = new Graphic(item);
                text_graphics.push(graphic);
                text_graphicsLayer.add(graphic);
            },
            // 添加线段
            addLine: function(jsonItem) {
                let item = JSON.parse(JSON.stringify(jsonItem));
                item.geometry.type = "polyline";
                item.geometry.spatialReference = SpatialReference.WGS84;
                item.symbol = {
                    type: "simple-line",
                    color: "#05bb4c",
                    width: item.attributes.width
                }
                let graphic = new Graphic(item);
                line_graphics.push(graphic);
                line_graphicsLayer.add(graphic);
            },
            addFanByJson: function(jsonObj, lineJsonObj) {
                jsonObj.forEach(item => {
                    this.addImgPoint(item);
                });
                lineJsonObj.forEach(item => {
                    this.addLine(item);
                });
            },
            goto: function(point) {
                view.goTo({
                    center: point
                }).catch(function(error) {
                    if (error.name != "AbortError") {
                        console.error(error);
                    }
                });
            }
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
            this.initMap();
        },
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    }
</script>

<style lang="less">
    .arcgis {
        width: 100%;
        height: 100%;
    }
</style>