根據.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);}});

總結

以上是生活随笔為你收集整理的根据.jgwx配准文件绘制并加载图层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。