1.创建各种图形
createTag(tagName, tagAttr) {
    let tag = document.createElementNS(ming, tagName);
    for (var attr in tagAttr) {
        if(tag.setAttribute){
            tag.setAttribute(attr, tagAttr[attr]);
        }
    }
    return tag;
}
2.使用createTag进行上图展示
_this.oPolyPoint = _this.createTag('image', {
    'width': data.width,
    'height': data.height,
    'visibility': 'visible',
    'title': data.data.name,
    'id': data.data.id || data.data.gbid || data.data.deviceId
});

<!--路口进行卡口设备和立柱设备绘制--fengyang -->
<template>
    <div class="kstp-drawDevice">
        <div
            id="drawImg"
            class="draw-top-img"
            :style="{backgroundImage:`url(${slideImage})`}"
            ref="previewBox"
        >
            <svg
                @mousedown="handleMousedown($event)"
                @contextmenu.prevent="handleLeftClick($event)"
                class="svg-div"
                :id="svgIdProps"
                ref="svgDiv"
                width="100%"
                height="100%"
            ></svg>
        </div>
    </div>
   
</template>
<script>
import Util from 'utils/util';
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('nonMotorVehiclesStore');
var ming = 'http://www.w3.org/2000/svg';
export default {
    name: 'kstp-drawDevice',
    data() {
        return {
            oPolyPoint: null,
            activeLineIndex: 0,
            drawRowProps: {}, //点击选择分布位置的数据
            drawPointList: [], //新增存储的数据
            image: '',
            delPointCheckedNode: null
        };
    },
    props: {
        slideImage: {
            type: String,
            default: ''
        },
        drawDeviceProps: {
            type: Object,
            default: () => {
                return {};
            }
        },
        svgIdProps: {
            type: String,
            default: 'svgDiv'
        }
    },
    computed: {
        ...mapState({
            'initData': state => state.initData
        })
    },
    methods: {
        //创建各种图形
        createTag(tagName, tagAttr) {
            let tag = document.createElementNS(ming, tagName);
            for (var attr in tagAttr) {
                if(tag.setAttribute){
                    tag.setAttribute(attr, tagAttr[attr]);
                }
            }
            return tag;
        },
        //获取图片的原始宽高
        getNaturalSize (DomElement) {
            var natureSize = {};
            if(window.naturalWidth && window.naturalHeight) {
                natureSize.width = DomElement.naturalWidth;
                natureSize.height = DomElement.naturalHeight;
            } else {
                var img = new Image();
                img.src = DomElement;
                natureSize.width = img.width;
                natureSize.height = img.height;
            }
            return natureSize;
        },
        //重置所有
        drawReset(){
            this.$refs.svgDiv.innerHTML = '';
            this.drawPointList = [];
            this.activeLineIndex = 0;
            this.oPolyPoint = null;
        },
        //重置点信息
        drawResetPoint(){
            this.activeLineIndex = 0;
            this.oPolyPoint = null;
            this.drawDeviceProps = {};
        },
        //绘制点
        drawPoint(ev, svg, data){
            let _this = this;
            if(!_this.oPolyPoint){
                _this.oPolyPoint = _this.createTag('image', {
                    'width': data.width,
                    'height': data.height,
                    'visibility': 'visible',
                    'title': data.data.name,
                    'id': data.data.id || data.data.gbid || data.data.deviceId
                });
                _this.oPolyPoint.setAttributeNS('http://www.w3.org/1999/xlink', 'href', data.icon);
                svg.appendChild(_this.oPolyPoint);
            }
            if(_this.activeLineIndex === 0){
                _this.activeLineIndex = 1;
                let x = ev.offsetX || ev.layerX;
                let y = ev.offsetY || ev.layerY;
                _this.oPolyPoint.setAttribute('x', x - (parseFloat(data.width) / 2));
                _this.oPolyPoint.setAttribute('y', y - data.height);
                let pointObj = {
                    id: data.data.id || data.data.gbid || data.data.deviceId,
                    name: data.data.name,
                    width: data.width,
                    height: data.height,
                    x: (x - (parseFloat(data.width) / 2)),
                    y: (y - data.height),
                    icon: data.icon,
                    oPolyPoint: _this.oPolyPoint
                };
                _this.drawPointList.push(pointObj);
                _this.activeLineIndex = 0;
                _this.oPolyPoint = null;
                _this.drawDeviceProps = {};
                console.log('存取数据', _this.drawPointList);
            }
        },
        //取出所有的svg标签
        pullOutSvg(pointId){
            var svg = null;
            svg = document.getElementById(this.svgIdProps);
            let _children = svg.children;
            for (let i = 0; i < _children.length; i++) {
                const element = _children[i];
                if(pointId.id === parseInt(element.id)){
                    this.delPointCheckedNode = element;
                    break;
                }else if(pointId.deviceId == parseInt(element.id)){
                    this.delPointCheckedNode = element;
                    break;
                }else if(pointId.gbid == parseInt(element.id)){
                    this.delPointCheckedNode = element;
                    break;
                }
            }
            console.log('储存的svg对象', this.delPointCheckedNode);
        },
        //删除绘制
        drawDel(data){
            let _this = this;
            _this.pullOutSvg(data);
            if(_this.drawPointList.length != 0){
                for(let i = _this.drawPointList.length - 1; i >= 0; i--){
                    const value = _this.drawPointList[i];
                    if(value.id == _this.delPointCheckedNode.id){
                        //删除数组数据
                        _this.drawPointList.splice(i, 1);
                        //删除dom节点
                        _this.$refs.svgDiv.removeChild(_this.delPointCheckedNode);
                        break;
                    }
                }
            }
        },
        //按比例传
        updateDataOraddData(){
            let obj = {};
            //图片原始宽高
            const natural = this.getNaturalSize(this.slideImage);
            //容器宽高
            var drawImg = document.getElementById('drawImg');
            let w = drawImg.offsetWidth;
            let h = drawImg.offsetHeight;
            obj.pic = {
                width: natural.width,
                height: natural.height
            };
            //比例系数
            let coefficientW = natural.width / w;
            let coefficientH = natural.height / h;
            for (let k = 0; k < this.drawPointList.length; k++) {
                const item = this.drawPointList[k];
                item.x = `${Math.round((item.x) * coefficientW)}`;
                item.y = `${Math.round((item.y) * coefficientH)}`;
            }
            obj.drawPointList = this.drawPointList;
            console.log('新增或者更新最终提交的数据', obj);
            return obj;
        },
        //验证是否已经绘制
        drawRules(data, svgDom){
            var svg = null;
            svg = document.getElementById(this.svgIdProps);
            let _children = svg.children;
            if(_children.length != 0){
                for (let i = 0; i < _children.length; i++) {
                    const element = _children[i];
                    if(element.id == data.id){
                        Util.warningMessage(`设备${data.name}--已经绘制过了`);
                        return false;
                    }else if(element.id == data.gbid){
                        this.drawHighlight(element, _children, 53, 33, 63, 43);
                        Util.warningMessage(`设备${data.name}--已经绘制过了`);
                        return false;
                    }else if(element.id == data.deviceId){
                        this.drawHighlight(element, _children, 33, 54, 43, 64);
                        Util.warningMessage(`设备${data.name}--已经绘制过了`);
                        return false;
                    }
                }
                return true;
            }else{
                return true;
            }
        },
        //选中是否放大
        drawHighlight(element, arr = [], w = 33, h = 54, _w = 43, _h = 64){
            if(arr.length != 0){
                for (let i = 0; i < arr.length; i++) {
                    const item = arr[i];
                    if(element.id != item.id){
                        item.setAttribute('width', w);
                        item.setAttribute('height', h);
                    }else{
                        element.setAttribute('width', _w);
                        element.setAttribute('height', _h);
                    }
                }
            }
        },
        //点击开始绘制
        handleMousedown(ev){
            var svg = null;
            svg = document.getElementById(this.svgIdProps);
            let obj = {};
            //获取列表数据
            if(this.drawDeviceProps.data && this.drawDeviceProps.data !== undefined){
                this.drawRowProps = this.drawDeviceProps.data;
            }else{
                return false;
            }
            //验证是否已经绘制
            let rule = this.drawRules(this.drawRowProps, svg);
            if(!rule){
                return true;
            }
            //新增或编辑
            let addOrUpdate = this.drawDeviceProps.addOrUpdate;
            //判断是立柱还是卡口  ---再判断是离线 在线 故障
            let columnIconList = this.initData.columnIconList;
            let bayonetIconList = this.initData.bayonetIconList;
            //新增or更新
            if(addOrUpdate === 'add'){
                if(this.drawRowProps.hostDevice){
                    let res = columnIconList.filter(el => el.status === 'ONLINE');
                    obj = res[0];
                    obj.data = this.drawRowProps;
                }else{
                    let res = bayonetIconList.filter(el => el.status === 'ONLINE');
                    obj = res[0];
                    obj.data = this.drawRowProps;
                }
            }else{
                this.drawResetPoint();//重置点信息
                if(this.drawRowProps.hostDevice){
                    let res = columnIconList.filter(el => el.status === this.drawRowProps.status);
                    obj = res[0];
                    obj.data = this.drawRowProps;
                }else{
                    let res = bayonetIconList.filter(el => el.status === this.drawRowProps.status);
                    obj = res[0];
                    obj.data = this.drawRowProps;
                }
            }
            this.drawPoint(ev, svg, obj);
            console.log('画点对象', obj);
        },
        //右击选择---------------------强化功能-暂时没时间做-----------------
        handleLeftClick(even){
            console.log('右击', even);
        },
        //更新上图
        drawknown(points){
            var svg = null;
            svg = document.getElementById(this.svgIdProps);
            this.$refs.svgDiv.innerHTML = '';
            //转换js对象
            let updateDelDom = JSON.parse(points);
            //图片原始宽高
            const natural = updateDelDom.pic;
            //容器宽高
            var drawImg = document.getElementById('drawImg');
            let w = drawImg.offsetWidth;
            let h = drawImg.offsetHeight;
            //比例系数
            let coefficientW = parseFloat(natural.width / w);
            let coefficientH = parseFloat(natural.height / h);
            //上图
            for (let k = 0; k < updateDelDom.drawPointList.length; k++) {
                const item = updateDelDom.drawPointList[k];
                item.x = `${Math.round((item.x) / coefficientW)}`;
                item.y = `${Math.round((item.y) / coefficientH)}`;
                this.oPolyPoint = this.createTag('image', {
                    'width': item.width,
                    'height': item.height,
                    'x': item.x,
                    'y': item.y,
                    'visibility': 'visible',
                    'class': 'pointClass',
                    'id': item.id
                });
                this.oPolyPoint.setAttributeNS('http://www.w3.org/1999/xlink', 'href', item.icon);
                svg.appendChild(this.oPolyPoint);
            }
            //将更新的数据存到drawPointList中
            this.drawPointList = updateDelDom.drawPointList;
        }
    }
};
</script>
<style lang="scss" scoped>
  .kstp-drawDevice{
    .draw-top-img{
        cursor: pointer;
        height: 29rem;
        border: 1px solid #eee;
        margin: auto;
        background-size:100% 100%;
        background-repeat:no-repeat;
        position: relative;
        img{
            width: auto;
            height: auto;
            max-height: 100%;
        }
        .svg-div{
            position: absolute;
            top: 0;
            left: 0;
        }
    }
  }

</style>