使用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);
}
}
}