首页 / 浏览问题 / 云GIS / 问题详情
canvas执行drawImage失败
545EXP 2018年07月30日

使用iclient9-leaflet.js(最新版),框架为vue最新版,本机为win10,测试服务器为winserver2012(已破解)

利用vue搭建,在渲染canvas的时候 报错

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

但是本机无论是打包前或是打包后都测试无误,将打包后的站点放置到一台server2008的服务器,访问也没有问题,但是部署到server2012上就报错,求大神指点

部分代码,后一段是将graphic封装成组件,然后前一段代码进行调用生成数组

let graphic = L.supermap.graphic({
            latLng: latlng,
            style: imageStyles[0].getStyle()
        });
  import L from 'leaflet'
  import mixin from './../mixins/mixin'

  const events = [
  ]

  const props = {
    render:{
      type:String,
      default:"canvas"
    },
    onClick:{
      type:Function
    },
    options: {
      type: Object,
      default: () => {}
    }
  }

  export default {
    name: 'LGraphiclayer',
    mixins: [mixin],
    props: {
      ...props,
      graphics: {
        type: Array,
        default: [],
        required: true
      }
    },
    mounted() {
      let layerOptions = this.mixinPropOption(this._props, props);

      this.leaflet = L.supermap.graphicLayer(this.graphics, layerOptions)

      //this.addEventHook(this.leaflet, events);

      if (this.$parent._isMounted) {
        this._initHooks(this.$parent.leaflet);
      }
    },
    watch: {
      graphics:{
        handler(val, newVal){
          //this.leaflet.update(val)
          if(!val || !val.length) {
            return;
          }
          this.leaflet.graphics = val;
          let self = this;
          let time = 500;
          if(val && val.length){
            if(val.length <1001){
              time = 500
            } else if(val.length > 1000 && val.length < 5001){
              time = 700
            } else if(val.length > 5000){
              time=1000
            }
          }
          setTimeout(() => {
            self.leaflet.redraw();
          },time)

        },
        deep:true
      }
    },
    beforeDestroy() {
      let parent = this.$parent.leaflet;
      this.leaflet.graphics = [];
      this.leaflet.redraw();
      this.leaflet.remove();
    },
    methods: {
      _initHooks(parent) {
        this.leaflet.addTo(parent);
      }
    }
  }

1个回答

请问 这是调用哪一个接口发生的错误,

既然  开发环境都没有问题 只是生产环境出了问题,多考虑网络方面的原因
186EXP 2018年07月30日
这个接口:L.supermap.graphicLayer

百度说是无法渲染图片,排除了路径错误的问题

我直接在server2008的服务器上访问也是同样的问题
问题找到了,数据问题。。无语
...