根据.jgwx配准文件绘制并加载图层

根据.jgwx配准文件绘制并加载图层

大部分地图api默认方法无法准确加载配准后的图层，只能根据.jgwx文件进行调整然后再加载。以配准后的图片和arcgis for js为例。

配准文件各个参数含义和解析配准文件

	/**
     * 根据图片宽高和配准文件获取坐标
     * @param point
     * @param text
     * @returns {*[]}
     */
    getGeoCoordinates:function (point,text) {
        //jgwx介绍
        // let params = [
        //     1.3788414897,//图片1像素代表的地图经度度数
        //     0,//平移量
        //     -0,//旋转角度
        //     -1.3788414897,//图片1像素代表的地图纬度度数
        //     -117842.8037035939,//图片左上角x坐标
        //     461835.7207130647,//图片左上角y坐标
        //     9296,//图片像素宽
        //     6474//图片像素高
        // ];
        var x = parseFloat(point[0]);
        var y = parseFloat(point[1]);
        var A = parseFloat(text[0]);
        var D = parseFloat(text[1]);
        var B = parseFloat(text[2]);
        var E = parseFloat(text[3]);
        var C = parseFloat(text[4]);
        var F = parseFloat(text[5]);
        var newX = A * x + B * y + C;
        var newY = D * x + E * y + F;
        return [newX, newY];
    }

根据坐标点获取画布点，然后定位图片

尝试计算实际画布上长宽和旋转角进行定位渲染，由于图片配准后会有变形的情况，最终使用transform方法变换然后定位，结果较为准确。

var TileBorderLayerView2D = BaseLayerView2D.createSubclass({
            
                    render(renderParameters) {
                        if(this.layer.__imgUrl==""){
                            return;
                        }
                        if (this.layer.__img == null ) {
                            var that = this;
                            esriRequest(this.layer.__imgUrl, {
                                responseType: "image"
                            }).then(function (res) {
                                that.layer.__img = res.data;
                                that.render(renderParameters);
                            });
                            return;
                        }
                        var img = this.layer.__img;
                        var extent = this.layer.__extent;
                        var state = renderParameters.state;
                        var pixelRatio = state.pixelRatio;
                        var width = state.size[0];
                        var height = state.size[1];
                        var jswx = this.layer.jswxFile;
                        var context = renderParameters.context;
                        context.globalAlpha = this.layer.opacity;
                        context.fillStyle = "rgba(0,0,0,0)";
                        context.fillRect(0, 0, width * pixelRatio, height * pixelRatio);

                        var imgWidth = this.layer.__img.width;
                        var imgHeight = this.layer.__img.height;
                        var imgP2 = [imgWidth,imgHeight];
                        var imgP3 = [0,imgHeight];
                        var geoP1 = [jswx[4]*1,jswx[5]*1];
                        var geoP2 = mapModule.getGeoCoordinates(imgP2,jswx);
                        var geoP3 = mapModule.getGeoCoordinates(imgP3,jswx);
                        var widthCoor = mapModule.getGeoCoordinates([imgWidth,0],jswx); //右上

                        // context.rotate(0.00018309211411693534*180/Math.PI);
                        var xp1 = geoP1[0] - jswx[0]/2;
                        var yp1 = geoP1[1] + jswx[3]/2;
                        var xp2 = geoP2[0] - jswx[0]/2;
                        var yp2 = geoP2[1] + jswx[3]/2;
                        var xp3 = geoP3[0] - jswx[0]/2;
                        var yp3 = geoP3[1] + jswx[3]/2;

                        var bottomLine = [xp2-xp3,yp2-yp3];
                        // var rotate = Math.atan(bottomLine[1]/bottomLine[0]); //向量计算角度 不准确

                        var sc_xy1 = mapModule.view.toScreen({x:xp1,y:yp1,spatialReference:{ wkid: 4326}});//左上角画布上的坐标
                        var sc_xy2 = mapModule.view.toScreen({x:xp2,y:yp2,spatialReference:{ wkid: 4326}});//右下角画布上的坐标
                        var sc_xy3 = mapModule.view.toScreen({x:xp3,y:yp3,spatialReference:{ wkid: 4326}});//左下角画布上的坐标
                        var sc_xy4 = mapModule.view.toScreen({x:widthCoor[0],y:widthCoor[1],spatialReference:{ wkid: 4326}});//右上角画布上的坐标

                        var cavRot = angleAB([sc_xy1.x,sc_xy1.y],[sc_xy4.x,sc_xy4.y]); //画布计算角度 准确
                        var bottomLine = [sc_xy2.x-sc_xy3.x,sc_xy2.y-sc_xy3.y];
                        var rotate = Math.atan(bottomLine[1]/bottomLine[0]); //向量计算角度 更精确
                        if(sc_xy2.y<0||sc_xy2.x<0||sc_xy1.x>width||sc_xy1.y>height){
                            return;
                        }
                        var sc_w_j = Math.sqrt((sc_xy2.y - sc_xy3.y)*(sc_xy2.y - sc_xy3.y)+(sc_xy2.x - sc_xy3.x)*(sc_xy2.x - sc_xy3.x));//画布上图片应该的宽
                        var sc_h_j = Math.sqrt((sc_xy3.y - sc_xy1.y)*(sc_xy3.y - sc_xy1.y)+(sc_xy3.x - sc_xy1.x)*(sc_xy3.x - sc_xy1.x));//画布上图片应该的高
                        var sc_h = sc_xy2.y - sc_xy1.y;//画布上图片应该的宽
                        var sc_w = sc_xy2.x - sc_xy1.x;//画布上图片应该的高

                        // 新方法定位图片 在用方法，较为准确
                        var pxTopLeft    = sc_xy1;
                        var pxTopRight   = sc_xy4;
                        var pxBottomLeft = sc_xy3;
                        var pxBottomRight = sc_xy2;

                        var allPoints = [pxTopLeft,pxTopRight,pxBottomLeft,pxBottomRight];

                        var minBounds = {};
                        var bounds = {
                            top:100000,
                            bottom:0,
                            left:100000,
                            right:0
                        };
                        for (var i = 0; i < allPoints.length; i++) {
                            if (allPoints[i].x > bounds.right) {
                                bounds.right = allPoints[i].x;
                            }
                            if (allPoints[i].x < bounds.left) {
                                bounds.left = allPoints[i].x;
                            }
                            if (allPoints[i].y > bounds.bottom) {
                                bounds.bottom = allPoints[i].y;
                            }
                            if (allPoints[i].y < bounds.top) {
                                bounds.top = allPoints[i].y;
                            }
                        }
                        var sc_w_tra = bounds.right - bounds.left;
                        var sc_h_tra = bounds.bottom - bounds.top;
                        minBounds.x = pxBottomLeft.x>pxTopLeft.x ? pxTopLeft.x:pxBottomLeft.x;
                        minBounds.y = pxTopLeft.y>pxTopRight.y? pxTopRight.y:pxTopLeft.y;

                        var pxTopLeftInDiv = getDiffValue(minBounds,pxTopLeft);

                        var imgW = imgWidth;
                        var imgH = imgHeight;
                        if (!imgW || !imgH) {
                            return;	// 图片未加载直接返回
                        }

                        var vectorX = getDiffValue(pxTopLeft,pxTopRight);
                        var vectorY = getDiffValue(pxTopLeft,pxBottomLeft);

                        //计算图片形变参数，关键步骤
                        var parms = [vectorX.x/sc_w_tra, vectorX.y/sc_w_tra, vectorY.x/sc_h_tra, vectorY.y/sc_h_tra, pxTopLeftInDiv.x, pxTopLeftInDiv.y];
                        try {
                            context.translate(minBounds.x, minBounds.y);//定位总画布左上角，旧方法定位图片左上角坐标
                            // context.rotate(rotate); //旧方法旋转图片
                            context.transform(parms[0],parms[1],parms[2],parms[3],parms[4],parms[5]);//形变
                            context.drawImage(img, 0,0,sc_w_tra,sc_h_tra);//在画布上定位图片   左上角坐标x,y  图片相对画布原始宽高 width,height
                        }catch (e) {
                            console.log(sc_xy1.x, sc_xy1.y,sc_w,sc_h);
                        }
                        // var datas = context.getImageData(sc_xy1.x, sc_xy1.y,sc_w,sc_h);
                    }
                });