在實(shí)際中，當(dāng)多專業(yè)設(shè)計(jì)協(xié)助時(shí)，遇到圖紙更新后，要對(duì)比圖紙找出圖紙的不同處，一直是一個(gè)比較耗時(shí)費(fèi)力的事情，也是業(yè)內(nèi)的一大痛點(diǎn)。一般CAD新舊圖紙的內(nèi)容對(duì)比，包括增加新的圖形元素、減少原有的圖形元素以及對(duì)原有的圖形進(jìn)行修改。傳統(tǒng)的方式一般是在PC端CAD環(huán)境中實(shí)現(xiàn)對(duì)圖紙比較的功能，然后隨著互聯(lián)網(wǎng)移動(dòng)端技術(shù)的不斷發(fā)展，如何擺脫CAD環(huán)境，在Web端輕松實(shí)現(xiàn)圖紙對(duì)比功能呢？
創(chuàng)新互聯(lián)建站網(wǎng)絡(luò)公司擁有十多年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗(yàn)，上1000+客戶的共同信賴。提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站開發(fā)、網(wǎng)站定制、賣鏈接、建網(wǎng)站、網(wǎng)站搭建、成都響應(yīng)式網(wǎng)站建設(shè)公司、網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)
通常對(duì)比圖紙不同有兩種思路：
此方法是對(duì)圖紙的原始數(shù)據(jù)進(jìn)行比較分析。思路是通過(guò)遍歷圖紙中的所有實(shí)體元素，根據(jù)屬性數(shù)據(jù)逐一比較差異性比較，找出不同處。
優(yōu)點(diǎn)：算法準(zhǔn)確。能定位出不同的實(shí)體對(duì)象。
缺點(diǎn)：圖紙大時(shí)運(yùn)算量大；同時(shí)，如果同一個(gè)實(shí)體刪除了重新繪制會(huì)導(dǎo)致ObjectID發(fā)生變化，導(dǎo)致不好判斷是否是同一個(gè)實(shí)體，算法實(shí)現(xiàn)難度大。
此方法是根據(jù)渲染后的圖片進(jìn)行比較。對(duì)圖片的像素進(jìn)行分析對(duì)比，找出不同的區(qū)域。
優(yōu)點(diǎn)：速度快，算法實(shí)現(xiàn)相對(duì)容易。
缺點(diǎn)：只能定位出不同的區(qū)域，不能定位出具體是哪些實(shí)體。
在實(shí)際需求中，要求快速定位不同處，而無(wú)需定位到是哪些具體的實(shí)體對(duì)象。所以我們選用像素比較法來(lái)進(jìn)行對(duì)比分析實(shí)現(xiàn)。
先上最終效果圖如下：
同步對(duì)比分析效果：
地圖卷簾效果效果:
大家看到圖片像素對(duì)比分析，肯定第一反應(yīng)是這算法太簡(jiǎn)單了。一個(gè)個(gè)像素判斷是否相等，然后就知道差異性了。如果這么想，那就是把問(wèn)題想的太簡(jiǎn)單了。實(shí)際中，由于渲染時(shí)反鋸齒的功能，會(huì)導(dǎo)致相同的繪制內(nèi)容也會(huì)導(dǎo)致像素值細(xì)微的區(qū)別。而算法的核心就是把這些干擾因素給排除，找到真正差異的部分。
? 把圖片表示成一個(gè)向量，通過(guò)計(jì)算向量之間的余弦距離來(lái)表征兩張圖片的相似度
? 具體算法可參考 https://zhuanlan.zhihu.com/p/
? 按照某種距離度量的標(biāo)準(zhǔn)對(duì)兩幅圖像的直方圖進(jìn)行相似度的測(cè)量
? 具體算法可參考 https://zhuanlan.zhihu.com/p/
? 感知哈?？梢杂脕?lái)判斷兩個(gè)圖片的相似度，通?？梢杂脕?lái)進(jìn)行圖像檢索。感知哈希算法對(duì)每一張圖片生成一個(gè)“指紋”，通過(guò)比較兩張圖片的指紋，來(lái)判斷他們的相似度，是否屬于同一張圖片。常用的有三種：平均哈希（aHash），感知哈希（pHash），差異值哈希（dHash）.
具體算法可參考 https://blog.csdn.net/qq_/article/details/?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1--blog-.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1--blog-.pc_relevant_aa&utm_relevant_index=2
像素匹配pixelmatch
利用像素之間的匹配來(lái)計(jì)算相似度。
https://github.com/whtsky/pixelmatch-py
我們基于BS模式對(duì)圖片進(jìn)行對(duì)比分析找出不同處。在服務(wù)端實(shí)現(xiàn)解析CAD圖紙，生成像素圖片；利用pixelmatch算法找出不同處。在瀏覽器端加載CAD圖并顯示出不同的地方。
（1） Web端在線打開CAD圖
如何在Web網(wǎng)頁(yè)端展示CAD圖形(唯杰地圖云端圖紙管理平臺(tái) https://vjmap.com/app/cloud),這個(gè)在前面的博文中已講過(guò)，這里不再重復(fù)，有需要的朋友可下載工程源代碼研究下。
(2) 把CAD圖轉(zhuǎn)成圖片
因?yàn)槲ń艿貓D采用的把CAD圖轉(zhuǎn)成GIS數(shù)據(jù)渲染的思路，所以可以通過(guò)提供的WMS服務(wù)，渲染成指定像素大小的圖片。這里為了對(duì)比結(jié)果準(zhǔn)確，可以把渲染的級(jí)別設(shè)置大點(diǎn)，得到的圖片像素大小也變大，更加清晰，對(duì)比結(jié)果更準(zhǔn)確。
接口如下:
重慶分公司
重慶分公司
/**
* wms服務(wù)url地址接口
*/
export interface IWmsTileUrl {
/** 地圖ID(為空時(shí)采用當(dāng)前打開的mapid)， 為數(shù)組時(shí)表時(shí)同時(shí)請(qǐng)求多個(gè). */
mapid?: string | string[];
/** 地圖版本(為空時(shí)采用當(dāng)前打開的地圖版本). */
version?: string | string[];
/** 圖層名稱（為空時(shí)采用當(dāng)前打開的地圖圖層名稱). */
layers?: string | string[];
/** 范圍，缺省{bbox-epsg-3857}. (如果要獲取地圖cad一個(gè)范圍的wms數(shù)據(jù)無(wú)需任何坐標(biāo)轉(zhuǎn)換，將此范圍填cad范圍,srs,crs,mapbounds填為空).*/
bbox?: string;
/** 當(dāng)前坐標(biāo)系,缺省(EPSG:3857). */
srs?: string;
/** cad圖的坐標(biāo)系，為空的時(shí)候由元數(shù)據(jù)坐標(biāo)系決定. */
crs?: string | string[];
/** 地理真實(shí)范圍，如有值時(shí),srs將不起作用 */
mapbounds?: string;
/** 寬. */
width?: number;
/** 高. */
height?: number;
/** 是否透明. */
transparent?: boolean;
/** 四參數(shù)(x偏移,y偏移,縮放，旋轉(zhuǎn)弧度)，可選，對(duì)坐標(biāo)最后進(jìn)行修正*/
fourParameter?: string | string[];
/** 是否是矢量瓦片. */
mvt?: boolean;
/** 是否考慮旋轉(zhuǎn)，在不同坐標(biāo)系中轉(zhuǎn)換是需要考慮。默認(rèn)自動(dòng)考慮是否需要旋轉(zhuǎn). */
useImageRotate?: boolean;
}
(3) 像素對(duì)比分析算法
其反鋸齒像素對(duì)比核心算法代碼如下
uint8_t blend(uint8_t c, double a) {
return 255 + (c - 255) * a;
}
double rgb2y(uint8_t r, uint8_t g, uint8_t b) { return r * 0. + g * 0. + b * 0.; }
double rgb2i(uint8_t r, uint8_t g, uint8_t b) { return r * 0. - g * 0. - b * 0.; }
double rgb2q(uint8_t r, uint8_t g, uint8_t b) { return r * 0. - g * 0. + b * 0.; }
// 使用YIQ NTSC傳輸顏色空間測(cè)量感知色差”計(jì)算色差
double colorDelta(const uint8_t* img1, const uint8_t* img2, std::size_t k, std::size_t m, bool yOnly = false) {
double a1 = double(img1[k + 3]) / 255;
double a2 = double(img2[m + 3]) / 255;
uint8_t r1 = blend(img1[k + 0], a1);
uint8_t g1 = blend(img1[k + 1], a1);
uint8_t b1 = blend(img1[k + 2], a1);
uint8_t r2 = blend(img2[m + 0], a2);
uint8_t g2 = blend(img2[m + 1], a2);
uint8_t b2 = blend(img2[m + 2], a2);
double y = rgb2y(r1, g1, b1) - rgb2y(r2, g2, b2);
if (yOnly) return y; // 僅亮度差
double i = rgb2i(r1, g1, b1) - rgb2i(r2, g2, b2);
double q = rgb2q(r1, g1, b1) - rgb2q(r2, g2, b2);
return 0.5053 * y * y + 0.299 * i * i + 0.1957 * q * q;
}
void drawPixel(uint8_t* output, std::size_t pos, uint8_t r, uint8_t g, uint8_t b) {
output[pos + 0] = r;
output[pos + 1] = g;
output[pos + 2] = b;
output[pos + 3] = 255;
}
double grayPixel(const uint8_t* img, std::size_t i) {
double a = double(img[i + 3]) / 255;
uint8_t r = blend(img[i + 0], a);
uint8_t g = blend(img[i + 1], a);
uint8_t b = blend(img[i + 2], a);
return rgb2y(r, g, b);
}
// 檢查像素是否可能是抗鋸齒的一部分
bool antialiased(const uint8_t* img, std::size_t x1, std::size_t y1, std::size_t width, std::size_t height, const uint8_t* img2 = nullptr) {
std::size_t x0 = x1 > 0 ? x1 - 1 : 0;
std::size_t y0 = y1 > 0 ? y1 - 1 : 0;
std::size_t x2 = std::min(x1 + 1, width - 1);
std::size_t y2 = std::min(y1 + 1, height - 1);
std::size_t pos = (y1 * width + x1) * 4;
uint64_t zeroes = 0;
uint64_t positives = 0;
uint64_t negatives = 0;
double min = 0;
double max = 0;
std::size_t minX = 0, minY = 0, maxX = 0, maxY = 0;
// 穿過(guò)8個(gè)相鄰像素
for (std::size_t x = x0; x <= x2; x++) {
for (std::size_t y = y0; y <= y2; y++) {
if (x == x1 && y == y1) continue;
// 中心像素和相鄰像素之間的亮度增量
double delta = colorDelta(img, img, pos, (y * width + x) * 4, true);
// 計(jì)算相等、較暗和較亮相鄰像素的數(shù)量
if (delta == 0) zeroes++;
else if (delta < 0) negatives++;
else if (delta > 0) positives++;
// 如果找到兩個(gè)以上相同的同級(jí)，則絕對(duì)不是抗鋸齒
if (zeroes > 2) return false;
if (!img2) continue;
// 記得最暗的像素
if (delta < min) {
min = delta;
minX = x;
minY = y;
}
// 記住最亮的像素
if (delta > max) {
max = delta;
maxX = x;
maxY = y;
}
}
}
if (!img2) return true;
// 如果同級(jí)之間沒(méi)有較暗和較亮的像素，則不是抗鋸齒
if (negatives == 0 || positives == 0) return false;
// 如果最暗或最亮的像素在兩幅圖像中都有兩個(gè)以上相同的同級(jí)
//（絕對(duì)不是反走樣），該像素是反走樣的
return (!antialiased(img, minX, minY, width, height) && !antialiased(img2, minX, minY, width, height)) ||
(!antialiased(img, maxX, maxY, width, height) && !antialiased(img2, maxX, maxY, width, height));
}
}
(4) 前端調(diào)用算法并展示
相關(guān)代碼如下
// 地圖比較不同
let diff = await service.cmdMapDiff({
// 要比較圖1的圖名稱
mapid1: mapId1,
// 要比較圖1的圖版本，如為空，表示是最新版本
version1: "",
// 要比較圖1的圖層樣式名稱，可為空。為空的用默認(rèn)的
layer1: map1.getService().currentMapParam().layer,
// 要比較圖2的圖名稱，圖名稱可以和mapid1不一樣
mapid2: mapId2,
// 要比較圖2的圖版本，如為空，表示是最新版本
version2: "",
// 要比較圖2的圖層樣式名稱，可為空。為空的用默認(rèn)的
layer2: map2.getService().currentMapParam().layer
})
if (diff.error) {
message.error(diff.error);
return;
}
const drawPolygons = (map, points, color) => {
if (points.length === 0) return;
points.forEach(p => p.push(p[0])) ;// 閉合
let polygons = points.map(p => {
return {
points: map.toLngLat(p),
properties: {
color: color
}
}
})
vjmap.createAntPathAnimateLineLayer(map, polygons, {
fillColor1: color,
fillColor2: "#0ffb",
canvasWidth: 128,
canvasHeight: 32,
frameCount: 4,
lineWidth: 4,
lineOpacity: 0.8
});
}
if (diff.modify.length === 0) {
message.info("完全相同，沒(méi)有找到不同處");
return;
}
// 修改的部分
drawPolygons(map2, diff.modify, "#f00");
// 新增部分
drawPolygons(map2, diff.new, "#0f0");
// 刪除部分
drawPolygons(map1, diff.del, "#00f");
以上前端的實(shí)現(xiàn)代碼已開源至github。 地址：https://github.com/vjmap/vjmap-playground/blob/main/src/02service_%E5%9C%B0%E5%9B%BE%E6%9C%8D%E5%8A%A1/17zmapDiff.js
在線體驗(yàn)地址為：https://vjmap.com/demo/#/demo/map/service/17zmapDiff
