CAD圖與互聯(lián)網(wǎng)地圖網(wǎng)頁端相互疊加顯示技術(shù)分析和實現(xiàn)

求分析

之前相關(guān)的博文中介紹了如果在Web網(wǎng)頁端展示CAD圖形(唯杰地圖云端圖紙管理平臺 https://vjmap.com/app/cloud)，當(dāng)一些CAD圖紙有實際地理坐標位置時，如地形圖等，有時候需要和互聯(lián)網(wǎng)地圖疊加進行顯示。其主要需求有：

CAD圖有坐標系時，能自動疊加到互聯(lián)網(wǎng)地圖上
CAD沒有坐標系時，能自定義幾個公共點，通過公共點疊加到互聯(lián)網(wǎng)地圖上
CAD圖與互聯(lián)網(wǎng)地圖能相互疊加。（底圖是哪個，就以底圖為坐標系）

理論知識

GIS中常用坐標系

（一）WGS84坐標系

WGS-84坐標系（World Geodetic System一1984 Coordinate System）

一種國際上采用的地心坐標系。坐標原點為地球質(zhì)心，其地心空間直角坐標系的Z軸指向BIH （國際時間服務(wù)機構(gòu)）1984.O定義的協(xié)議地球極（CTP)方向，X軸指向BIH 1984.0的零子午面和CTP赤道的交點，Y軸與Z軸、X軸垂直構(gòu)成右手坐標系，稱為1984年世界大地坐標系統(tǒng)。

屬于wgs84坐標系的圖有如天地圖等。

（二）WGS84 Web墨卡托

Web墨卡托是2005年谷歌在谷歌地圖中首次使用的，當(dāng)時或更早的Web墨卡托使用者還是稱其為世界墨卡托 World Mercator – Spherical Mercator (unofficial deprecated ESRI)，代號 WKID 54004 （在 EPSG:54004 或 ESRI:54004 中，非官方）。

EPSG于2009年2月9號使用新代號 EPSG:3857 ，給谷歌地圖投影方法命名為“公共可視化偽墨卡托投影”（PVPM）

（三）GCJ02經(jīng)緯度投影

GCJ-02是由中國國家測繪局（G表示Guojia國家，C表示Cehui測繪，J表示Ju局）制訂的地理信息系統(tǒng)的坐標系統(tǒng)。

它其實就是對真實坐標系統(tǒng)進行人為的加偏處理，按照特殊的算法，將真實的坐標加密成虛假的坐標，而這個加偏并不是線性的加偏，所以各地的偏移情況都會有所不同。而加密后的坐標也常被大家稱為“火星坐標系統(tǒng)”。

該坐標系的坐標值為經(jīng)緯度格式，單位為度。

這里的GCJ02經(jīng)緯度投影，也就是在WGS84經(jīng)緯度的基礎(chǔ)之上，進行GCJ-02加偏。

如高德地圖，就采用的是GCJ02坐標系，也就是俗稱的火星坐標系。

（四）GCJ02 Web 墨卡托投影

GCJ-02是由中國國家測繪局（G表示Guojia國家，C表示Cehui測繪，J表示Ju局）制訂的地理信息系統(tǒng)的坐標系統(tǒng)。

該坐標系的坐標值為Web墨卡托格式，單位為米。

這里的GCJ02 Web 墨卡托，也就是在標準Web墨卡托的基礎(chǔ)之上，進行GCJ-02加偏。

（五）BD09 經(jīng)緯度投影

BD09經(jīng)緯度投影屬于百度坐標系，它是在標準經(jīng)緯度的基礎(chǔ)上進行GCJ-02加偏之后，再加上百度自身的加偏算法，也就是在標準經(jīng)緯度的基礎(chǔ)之上進行了兩次加偏。

該坐標系的坐標值為經(jīng)緯度格式，單位為度。

（六）BD09 Web 墨卡托影

BD09 Web 墨卡托屬于百度坐標系，它是在標準Web墨卡托的基礎(chǔ)上進行GCJ-02加偏之后，再加上百度自身的加偏算法，也就是在Web墨卡托的基礎(chǔ)之上進行了兩次加偏。

該坐標系的坐標值為Web墨卡托格式，單位為米。

（七）北京54坐標系

中國成立以后，我國大地測量進入了全面發(fā)展時期，在全國范圍內(nèi)開展了正規(guī)的，全面的大地測量和測圖工作，迫切需要建立一個參心大地坐標系。由于當(dāng)時的”一邊倒”政治趨向，故我國采用了前蘇聯(lián)的克拉索夫斯基橢球參數(shù)，并與前蘇聯(lián)1942年坐標系進行聯(lián)測，通過計算建立了我國大地坐標系，定名為1954年北京坐標系。因此，1954年北京坐標系可以認為是前蘇聯(lián)1942年坐標系的延伸。T.A的原點不在北京而是在前蘇聯(lián)的普爾科沃。

自北京54坐標系統(tǒng)建立以來，在該坐標系內(nèi)進行了許多地區(qū)的局部平差，其成果得到了廣泛的應(yīng)用。但是隨著測繪新理論·新技術(shù)的不斷發(fā)展，人們發(fā)現(xiàn)該坐標系存在很多缺點，為此，我國在1978年在西安召開了”全國天文大地網(wǎng)整體平差會議”，提出了建立屬于我國自己的大地坐標系，即后來的1980西安坐標系。

（八）西安80坐標系

1978年4月在西安召開全國天文大地網(wǎng)平差會議，確定重新定位，建立我國新的坐標系。為此有了1980年國家大地坐標系。1980年國家大地坐標系采用地球橢球基本參數(shù)為1975年國際大地測量與地球物理聯(lián)合會第十六屆大會推薦的數(shù)據(jù)，即IAG 75地球橢球體。該坐標系的大地原點設(shè)在我國中部的陜西省涇陽縣永樂鎮(zhèn)，位于西安市西北方向約60公里。

（九）CGCS2000坐標系

2000中國大地坐標系(China Geodetic Coordinate System 2000，CGCS2000)，又稱之為2000國家大地坐標系，是中國新一代大地坐標系，21世紀初已在中國正式實施。

投影坐標系6位和8位的區(qū)別

一般投影坐標系X為8位，Y為7位。但有些圖中X只有6位，這是因為省去了前2位的帶系的原因。具體原因可查看此博客文章。https://blog.csdn.net/thinkpang/article/details/124172626

EPSG是什么

EPSG（The European Petroleum Survey Group, http://www.epsg.org/ ）維護著空間參照對象的數(shù)據(jù)集，OGC標準中空間參照系統(tǒng)的SRID（Spatial Reference System Identifier）與EPSG的空間參照系統(tǒng)ID相一致。

EPSG成立于1986年，并已于2005年“重組”為國際石油和天然氣生產(chǎn)商協(xié)會（The OGP Surveying and Positioning Committee），維護并發(fā)布坐標參照系統(tǒng)的數(shù)據(jù)集參數(shù)，以及坐標轉(zhuǎn)換描述。該數(shù)據(jù)集被廣泛接受并使用，通過一個Web發(fā)布平臺進行分發(fā)，同時提供了微軟Acess數(shù)據(jù)庫的存儲文件，通過SQL 腳本文件，mySQL, Oracle 和PostgreSQL等數(shù)據(jù)庫也可使用。

該組織發(fā)布了一個坐標參照系統(tǒng)的數(shù)據(jù)集，并維護坐標參照系統(tǒng)的數(shù)據(jù)集參數(shù)，以及坐標轉(zhuǎn)換描述，數(shù)據(jù)集對全球收錄到的坐標參照系統(tǒng)進行了編碼。

EPSG查詢網(wǎng)站: https://epsg.io/

常用EPSG坐標系對照表：

是一個機構(gòu)，它為常用坐標系做了編號，有了編號編程時候直接使用編號即可定義坐標系，常用坐標系及其EPSG編號有：

EPSG:4326

地理坐標系，坐標單位為經(jīng)緯度。它是以地球質(zhì)心為橢球中心的世界地理坐標系，GPS用的坐標系就是這個。

EPSG:4490

地理坐標系，坐標單位為經(jīng)緯度。名字叫做CGCS2000坐標系，它是最適合中國地理位置的地理坐標系。

EPSG:3857

投影坐標系，坐標單位為x,y。偽墨卡托投影，也被稱為球體墨卡托，Web Mercator。它是基于墨卡托投影的。

圖內(nèi)常見的EPSG代碼如下：

投影坐標 Projected Coordinate System
（根據(jù)國家規(guī)定，推薦使用CGCS2000的投影坐標系）

1、Xian_1980 6度分
EPSG代號
2327 Xian_1980_GK_Zone_13
2328 Xian_1980_GK_Zone_14
2329 Xian_1980_GK_Zone_15
2330 Xian_1980_GK_Zone_16
2331 Xian_1980_GK_Zone_17
2332 Xian_1980_GK_Zone_18
2333 Xian_1980_GK_Zone_19
2334 Xian_1980_GK_Zone_20
2335 Xian_1980_GK_Zone_21
2336 Xian_1980_GK_Zone_22
2337 Xian_1980_GK_Zone_23
2338 Xian_1980_GK_CM_75E
2339 Xian_1980_GK_CM_81E
2340 Xian_1980_GK_CM_87E
2341 Xian_1980_GK_CM_93E
2342 Xian_1980_GK_CM_99E
2343 Xian_1980_GK_CM_105E
2344 Xian_1980_GK_CM_111E
2345 Xian_1980_GK_CM_117E
2346 Xian_1980_GK_CM_123E
2347 Xian_1980_GK_CM_129E
2348 Xian_1980_GK_CM_135E

2、Xian_1980 3度分
2349 Xian_1980_3_Degree_GK_Zone_25
2350 Xian_1980_3_Degree_GK_Zone_26
2351 Xian_1980_3_Degree_GK_Zone_27
2352 Xian_1980_3_Degree_GK_Zone_28
2353 Xian_1980_3_Degree_GK_Zone_29
2354 Xian_1980_3_Degree_GK_Zone_30
2355 Xian_1980_3_Degree_GK_Zone_31
2356 Xian_1980_3_Degree_GK_Zone_32
2357 Xian_1980_3_Degree_GK_Zone_33
2358 Xian_1980_3_Degree_GK_Zone_34
2359 Xian_1980_3_Degree_GK_Zone_35
2360 Xian_1980_3_Degree_GK_Zone_36
2361 Xian_1980_3_Degree_GK_Zone_37
2362 Xian_1980_3_Degree_GK_Zone_38
2363 Xian_1980_3_Degree_GK_Zone_39
2364 Xian_1980_3_Degree_GK_Zone_40
2365 Xian_1980_3_Degree_GK_Zone_41
2366 Xian_1980_3_Degree_GK_Zone_42
2367 Xian_1980_3_Degree_GK_Zone_43
2368 Xian_1980_3_Degree_GK_Zone_44
2369 Xian_1980_3_Degree_GK_Zone_45
2370 Xian_1980_3_Degree_GK_CM_75E
2371 Xian_1980_3_Degree_GK_CM_78E
2372 Xian_1980_3_Degree_GK_CM_81E
2373 Xian_1980_3_Degree_GK_CM_84E
2374 Xian_1980_3_Degree_GK_CM_87E
2375 Xian_1980_3_Degree_GK_CM_90E
2376 Xian_1980_3_Degree_GK_CM_93E
2377 Xian_1980_3_Degree_GK_CM_96E
2378 Xian_1980_3_Degree_GK_CM_99E
2379 Xian_1980_3_Degree_GK_CM_102E
2380 Xian_1980_3_Degree_GK_CM_105E
2381 Xian_1980_3_Degree_GK_CM_108E
2382 Xian_1980_3_Degree_GK_CM_111E
2383 Xian_1980_3_Degree_GK_CM_114E
2384 Xian_1980_3_Degree_GK_CM_117E
2385 Xian_1980_3_Degree_GK_CM_120E
2386 Xian_1980_3_Degree_GK_CM_123E
2387 Xian_1980_3_Degree_GK_CM_126E
2388 Xian_1980_3_Degree_GK_CM_129E
2389 Xian_1980_3_Degree_GK_CM_132E
2390 Xian_1980_3_Degree_GK_CM_135E

3、Beijing_1954 3度分
2401 Beijing_1954_3_Degree_GK_Zone_25
2402 Beijing_1954_3_Degree_GK_Zone_26
2403 Beijing_1954_3_Degree_GK_Zone_27
2404 Beijing_1954_3_Degree_GK_Zone_28
2405 Beijing_1954_3_Degree_GK_Zone_29
2406 Beijing_1954_3_Degree_GK_Zone_30
2407 Beijing_1954_3_Degree_GK_Zone_31
2408 Beijing_1954_3_Degree_GK_Zone_32
2409 Beijing_1954_3_Degree_GK_Zone_33
2410 Beijing_1954_3_Degree_GK_Zone_34
2411 Beijing_1954_3_Degree_GK_Zone_35
2412 Beijing_1954_3_Degree_GK_Zone_36
2413 Beijing_1954_3_Degree_GK_Zone_37
2414 Beijing_1954_3_Degree_GK_Zone_38
2415 Beijing_1954_3_Degree_GK_Zone_39
2416 Beijing_1954_3_Degree_GK_Zone_40
2417 Beijing_1954_3_Degree_GK_Zone_41
2418 Beijing_1954_3_Degree_GK_Zone_42
2419 Beijing_1954_3_Degree_GK_Zone_43
2420 Beijing_1954_3_Degree_GK_Zone_44
2421 Beijing_1954_3_Degree_GK_Zone_45
2422 Beijing_1954_3_Degree_GK_CM_75E
2423 Beijing_1954_3_Degree_GK_CM_78E
2424 Beijing_1954_3_Degree_GK_CM_81E
2425 Beijing_1954_3_Degree_GK_CM_84E
2426 Beijing_1954_3_Degree_GK_CM_87E
2427 Beijing_1954_3_Degree_GK_CM_90E
2428 Beijing_1954_3_Degree_GK_CM_93E
2429 Beijing_1954_3_Degree_GK_CM_96E
2430 Beijing_1954_3_Degree_GK_CM_99E
2431 Beijing_1954_3_Degree_GK_CM_102E
2432 Beijing_1954_3_Degree_GK_CM_105E
2433 Beijing_1954_3_Degree_GK_CM_108E
2434 Beijing_1954_3_Degree_GK_CM_111E
2435 Beijing_1954_3_Degree_GK_CM_114E
2436 Beijing_1954_3_Degree_GK_CM_117E
2437 Beijing_1954_3_Degree_GK_CM_120E
2438 Beijing_1954_3_Degree_GK_CM_123E
2439 Beijing_1954_3_Degree_GK_CM_126E
2440 Beijing_1954_3_Degree_GK_CM_129E
2441 Beijing_1954_3_Degree_GK_CM_132E
2442 Beijing_1954_3_Degree_GK_CM_135E

4、Beijing_1954 6度分
21413 Beijing_1954_GK_Zone_13
21414 Beijing_1954_GK_Zone_14
21415 Beijing_1954_GK_Zone_15
21416 Beijing_1954_GK_Zone_16
21417 Beijing_1954_GK_Zone_17
21418 Beijing_1954_GK_Zone_18
21419 Beijing_1954_GK_Zone_19
21420 Beijing_1954_GK_Zone_20
21421 Beijing_1954_GK_Zone_21
21422 Beijing_1954_GK_Zone_22
21423 Beijing_1954_GK_Zone_23
21473 Beijing_1954_GK_Zone_13N
21474 Beijing_1954_GK_Zone_14N
21475 Beijing_1954_GK_Zone_15N
21476 Beijing_1954_GK_Zone_16N
21477 Beijing_1954_GK_Zone_17N
21478 Beijing_1954_GK_Zone_18N
21479 Beijing_1954_GK_Zone_19N
21480 Beijing_1954_GK_Zone_20N
21481 Beijing_1954_GK_Zone_21N
21482 Beijing_1954_GK_Zone_22N
21483 Beijing_1954_GK_Zone_23N

5、WGS_1984 墨卡托投影
3395 WGS_1984_World_Mercator

6、CGCS2000 6度分
4491 CGCS2000_GK_Zone_13
4492 CGCS2000_GK_Zone_14
4493 CGCS2000_GK_Zone_15
4494 CGCS2000_GK_Zone_16
4495 CGCS2000_GK_Zone_17
4496 CGCS2000_GK_Zone_18
4497 CGCS2000_GK_Zone_19
4498 CGCS2000_GK_Zone_20
4499 CGCS2000_GK_Zone_21
4500 CGCS2000_GK_Zone_22
4501 CGCS2000_GK_Zone_23
4502 CGCS2000_GK_CM_75E
4503 CGCS2000_GK_CM_81E
4504 CGCS2000_GK_CM_87E
4505 CGCS2000_GK_CM_93E
4506 CGCS2000_GK_CM_99E
4507 CGCS2000_GK_CM_105E
4508 CGCS2000_GK_CM_111E
4509 CGCS2000_GK_CM_117E
4510 CGCS2000_GK_CM_123E
4511 CGCS2000_GK_CM_129E
4512 CGCS2000_GK_CM_135E

7、CGCS2000 3度分

4513 CGCS2000_3_Degree_GK_Zone_25
4514 CGCS2000_3_Degree_GK_Zone_26
4515 CGCS2000_3_Degree_GK_Zone_27
4516 CGCS2000_3_Degree_GK_Zone_28
4517 CGCS2000_3_Degree_GK_Zone_29
4518 CGCS2000_3_Degree_GK_Zone_30
4519 CGCS2000_3_Degree_GK_Zone_31
4520 CGCS2000_3_Degree_GK_Zone_32
4521 CGCS2000_3_Degree_GK_Zone_33
4522 CGCS2000_3_Degree_GK_Zone_34
4523 CGCS2000_3_Degree_GK_Zone_35
4524 CGCS2000_3_Degree_GK_Zone_36
4525 CGCS2000_3_Degree_GK_Zone_37
4526 CGCS2000_3_Degree_GK_Zone_38
4527 CGCS2000_3_Degree_GK_Zone_39
4528 CGCS2000_3_Degree_GK_Zone_40
4529 CGCS2000_3_Degree_GK_Zone_41
4530 CGCS2000_3_Degree_GK_Zone_42
4531 CGCS2000_3_Degree_GK_Zone_43
4532 CGCS2000_3_Degree_GK_Zone_44
4533 CGCS2000_3_Degree_GK_Zone_45
4534 CGCS2000_3_Degree_GK_CM_75E
4535 CGCS2000_3_Degree_GK_CM_78E
4536 CGCS2000_3_Degree_GK_CM_81E
4537 CGCS2000_3_Degree_GK_CM_84E
4538 CGCS2000_3_Degree_GK_CM_87E
4539 CGCS2000_3_Degree_GK_CM_90E
4540 CGCS2000_3_Degree_GK_CM_93E
4541 CGCS2000_3_Degree_GK_CM_96E
4542 CGCS2000_3_Degree_GK_CM_99E
4543 CGCS2000_3_Degree_GK_CM_102E
4544 CGCS2000_3_Degree_GK_CM_105E
4545 CGCS2000_3_Degree_GK_CM_108E
4546 CGCS2000_3_Degree_GK_CM_111E
4547 CGCS2000_3_Degree_GK_CM_114E
4548 CGCS2000_3_Degree_GK_CM_117E
4549 CGCS2000_3_Degree_GK_CM_120E
4550 CGCS2000_3_Degree_GK_CM_123E
4551 CGCS2000_3_Degree_GK_CM_126E
4552 CGCS2000_3_Degree_GK_CM_129E
4553 CGCS2000_3_Degree_GK_CM_132E
4554 CGCS2000_3_Degree_GK_CM_135E

8、New_Beijing_Gauss 6度分
4568 New_Beijing_Gauss_Kruger_Zone_13
4569 New_Beijing_Gauss_Kruger_Zone_14
4570 New_Beijing_Gauss_Kruger_Zone_15
4571 New_Beijing_Gauss_Kruger_Zone_16
4572 New_Beijing_Gauss_Kruger_Zone_17
4573 New_Beijing_Gauss_Kruger_Zone_18
4574 New_Beijing_Gauss_Kruger_Zone_19
4575 New_Beijing_Gauss_Kruger_Zone_20
4576 New_Beijing_Gauss_Kruger_Zone_21
4577 New_Beijing_Gauss_Kruger_Zone_22
4578 New_Beijing_Gauss_Kruger_Zone_23
4579 New_Beijing_Gauss_Kruger_CM_75E
4580 New_Beijing_Gauss_Kruger_CM_81E
4581 New_Beijing_Gauss_Kruger_CM_87E
4582 New_Beijing_Gauss_Kruger_CM_93E
4583 New_Beijing_Gauss_Kruger_CM_99E
4584 New_Beijing_Gauss_Kruger_CM_105E
4585 New_Beijing_Gauss_Kruger_CM_111E
4586 New_Beijing_Gauss_Kruger_CM_117E
4587 New_Beijing_Gauss_Kruger_CM_123E
4588 New_Beijing_Gauss_Kruger_CM_129E
4589 New_Beijing_Gauss_Kruger_CM_135E

9、New_Beijing_Gauss 3度分
4652 New_Beijing_3_Degree_Gauss_Kruger_Zone_25
4653 New_Beijing_3_Degree_Gauss_Kruger_Zone_26
4654 New_Beijing_3_Degree_Gauss_Kruger_Zone_27
4655 New_Beijing_3_Degree_Gauss_Kruger_Zone_28
4656 New_Beijing_3_Degree_Gauss_Kruger_Zone_29
4766 New_Beijing_3_Degree_Gauss_Kruger_Zone_30
4767 New_Beijing_3_Degree_Gauss_Kruger_Zone_31
4768 New_Beijing_3_Degree_Gauss_Kruger_Zone_32
4769 New_Beijing_3_Degree_Gauss_Kruger_Zone_33
4770 New_Beijing_3_Degree_Gauss_Kruger_Zone_34
4771 New_Beijing_3_Degree_Gauss_Kruger_Zone_35
4772 New_Beijing_3_Degree_Gauss_Kruger_Zone_36
4773 New_Beijing_3_Degree_Gauss_Kruger_Zone_37
4774 New_Beijing_3_Degree_Gauss_Kruger_Zone_38
4775 New_Beijing_3_Degree_Gauss_Kruger_Zone_39
4776 New_Beijing_3_Degree_Gauss_Kruger_Zone_40
4777 New_Beijing_3_Degree_Gauss_Kruger_Zone_41
4778 New_Beijing_3_Degree_Gauss_Kruger_Zone_42
4779 New_Beijing_3_Degree_Gauss_Kruger_Zone_43
4780 New_Beijing_3_Degree_Gauss_Kruger_Zone_44
4781 New_Beijing_3_Degree_Gauss_Kruger_Zone_45
4782 New_Beijing_3_Degree_Gauss_Kruger_CM_75E
4783 New_Beijing_3_Degree_Gauss_Kruger_CM_78E
4784 New_Beijing_3_Degree_Gauss_Kruger_CM_81E
4785 New_Beijing_3_Degree_Gauss_Kruger_CM_84E
4786 New_Beijing_3_Degree_Gauss_Kruger_CM_87E
4787 New_Beijing_3_Degree_Gauss_Kruger_CM_90E
4788 New_Beijing_3_Degree_Gauss_Kruger_CM_93E
4789 New_Beijing_3_Degree_Gauss_Kruger_CM_96E
4790 New_Beijing_3_Degree_Gauss_Kruger_CM_99E
4791 New_Beijing_3_Degree_Gauss_Kruger_CM_102E
4792 New_Beijing_3_Degree_Gauss_Kruger_CM_105E
4793 New_Beijing_3_Degree_Gauss_Kruger_CM_108E
4794 New_Beijing_3_Degree_Gauss_Kruger_CM_111E
4795 New_Beijing_3_Degree_Gauss_Kruger_CM_114E
4796 New_Beijing_3_Degree_Gauss_Kruger_CM_117E
4797 New_Beijing_3_Degree_Gauss_Kruger_CM_120E
4798 New_Beijing_3_Degree_Gauss_Kruger_CM_123E
4799 New_Beijing_3_Degree_Gauss_Kruger_CM_126E
4800 New_Beijing_3_Degree_Gauss_Kruger_CM_129E
4822 New_Beijing_3_Degree_Gauss_Kruger_CM_135E

坐標轉(zhuǎn)換

wgs84坐標、火星坐標 (GCJ-02)也叫國測局坐標系、百度坐標 (BD-09)相互轉(zhuǎn)換

Github地址：https://github.com/wandergis/coordtransform

npm地址：https://www.npmjs.com/package/coordtransform

用法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>coordTransform</title>
</head>
<body>
<h1>請按F12打開控制臺查看結(jié)果</h1>
<script src="index.js"></script>
<script>
    //國測局坐標(火星坐標,比如高德地圖在用),百度坐標,wgs84坐標(谷歌國外以及絕大部分國外在線地圖使用的坐標)
    //百度經(jīng)緯度坐標轉(zhuǎn)國測局坐標
    var bd09togcj02=coordtransform.bd09togcj02(116.404, 39.915);
    //國測局坐標轉(zhuǎn)百度經(jīng)緯度坐標
    var gcj02tobd09=coordtransform.gcj02tobd09(116.404, 39.915);
    //wgs84轉(zhuǎn)國測局坐標
    var wgs84togcj02=coordtransform.wgs84togcj02(116.404, 39.915);
    //國測局坐標轉(zhuǎn)wgs84坐標
    var gcj02towgs84=coordtransform.gcj02towgs84(116.404, 39.915);
    console.log(bd09togcj02);
    console.log(gcj02tobd09);
    console.log(wgs84togcj02);
    console.log(gcj02towgs84);
    //result
    //bd09togcj02:   [ 116.39762729119315, 39.90865673957631 ]
    //gcj02tobd09:   [ 116.41036949371029, 39.92133699351021 ]
    //wgs84togcj02:  [ 116.41024449916938, 39.91640428150164 ]
    //gcj02towgs84:  [ 116.39775550083061, 39.91359571849836 ]
</script>
</body>
</html>

不同EPSG之間坐標相互轉(zhuǎn)換

Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another. 大致翻譯過來就是Proj4js是一個JavaScript類庫，其主要功能就是將點坐標從一個坐標系轉(zhuǎn)換為另一個坐標系。前端添加Proj4js有三種方式：從http://trac.osgeo.org/proj4js/wiki/Download下載，獲取產(chǎn)品包中dist/proj4.js文件。引入CDN上的Proj4js：https://cdnjs.com/libraries/proj4js。也可以直接使用npm install proj4進行安裝。使用：

首先，定義需要轉(zhuǎn)換的坐標系

proj4.defs([["EPSG:4549","+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"]])

調(diào)用proj4方法

proj4("EPSG:4326", "EPSG:4549", [lat, lng]);

轉(zhuǎn)換完成！

需要說明的是：由于不同坐標系可能橢球體不同，直接轉(zhuǎn)換會有一定誤差！！！

CAD圖與互聯(lián)網(wǎng)地圖疊加實現(xiàn)思路

一、有坐標系的CAD圖自動疊加到互聯(lián)網(wǎng)地圖上

1、互聯(lián)圖地圖疊加CAD圖

流程如下：

（1）確定互聯(lián)圖地圖坐標系，如果不是wgs84坐標系，是火星坐標或百度坐標，需要轉(zhuǎn)換成wgs86坐標，也就是epsg4326坐標系；
（2）確定CAD圖坐標系，通過X的前兩位來獲取屬于EPSG哪個坐標系。代碼如下：


     // 以X前兩位為39為例
     // 北京54坐標
     vjmap.transform.getEpsgParam(vjmap.transform.EpsgCrsTypes.Beijing54, 39).epsg
     // 西安80坐標
     vjmap.transform.getEpsgParam(vjmap.transform.EpsgCrsTypes.Xian80, 39).epsg
     // 國家2000坐標
     vjmap.transform.getEpsgParam(vjmap.transform.EpsgCrsTypes.CGCS2000, 39).epsg

（3）通過調(diào)用 Proj4js 將互聯(lián)網(wǎng)地圖坐標轉(zhuǎn)換成CAD圖坐標
（4）通過CAD圖坐標，在后臺通過WMS獲取該瓦片相應(yīng)的圖片，疊加即可。
效果如下：https://vjmap.com/demo/#/demo/map/web/04webWms

2、CAD圖疊加互聯(lián)圖地圖

流程如下：

（1）確定CAD圖坐標系，通過X的前兩位來獲取屬于EPSG哪個坐標系。方法同上。
(2) 通過調(diào)用 Proj4js 將CAD圖坐標轉(zhuǎn)換成轉(zhuǎn)換成wgs86坐標，也就是epsg4326坐標系；
（3）確定互聯(lián)圖地圖坐標系，如果不是wgs84坐標系，是火星坐標或百度坐標，需要將wgs84坐標轉(zhuǎn)換成火星坐標或百度坐標轉(zhuǎn)換
（4）通過互聯(lián)網(wǎng)坐標去獲取該范圍內(nèi)的瓦片，但這里有個問題就是一般的互聯(lián)網(wǎng)地圖只提供了WMTS服務(wù)，沒有提供WMS服務(wù)，所以如果要實現(xiàn)的話，只能自己去后臺寫服務(wù)實現(xiàn)了。
在唯杰地圖vjmap中，可以使用以下代碼實現(xiàn)
// 增加天地圖圖底圖
const addTiandituMap = (isRoadway) => {
const tileUrl = svc.webMapUrl({
tileCrs: "wgs84",
tileUrl: [
isRoadway ? "https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={t}" :
/* 如果用影像 */"https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={t}",
"https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={t}"
],
tileSize: 256,
tileRetina: 1,
tileMaxZoom: 18,
tileShards: "1,2,3,4,5,6",
tileToken: [
"6d53378dc5f7dbef8d84ffdd2b54139b", // 有可能有一個token會導(dǎo)致請求過多而返回失敗，可以多寫幾個，失敗時會嘗試后面的token
"69eb2fa0de3b2a668f1ef603a3f8bc73"
],
tileFlipY: false,
mapbounds: res.bounds,
srs: "EPSG:4527", // 可通過前兩位獲取 vjmap.transform.getEpsgParam(vjmap.transform.EpsgCrsTypes.CGCS2000, 39).epsg
// 因為sys_cad2000這個圖只有6位，沒有帶系。需要在坐標轉(zhuǎn)換前平移下帶系 https://blog.csdn.net/thinkpang/article/details/124172626
fourParameterBefore: "39000000,0,1,0"
})

map.addSource('web-tdt-source', {
'type': 'raster',
'tiles': [
tileUrl
],
'tileSize': 256
});
map.addLayer({
'id': 'web-tdt-layer',
'type': 'raster',
'source': 'web-tdt-source',
'paint': { "raster-opacity": 1 }
}
);
let layers = map.getStyle().layers
// 把這個圖層放至所有圖層的最下面
map.moveLayer('web-tdt-layer', layers[0].id)
}
效果如下：https://vjmap.com/demo/#/demo/map/web/04webcadmap

二、沒有坐標系的CAD圖自動疊加到互聯(lián)網(wǎng)地圖上

沒有坐標系的圖，不能通過地理坐標轉(zhuǎn)換，這時候就需要人為的選定公共對應(yīng)點，然后通過四參數(shù)來計算平移、旋轉(zhuǎn)、縮放來疊加了。

四參數(shù)的原理的相關(guān)計算可參考這博文 https://blog.csdn.net/qq_42811161/article/details/107809777

在唯杰地圖vjmap中，可以使用以下代碼實現(xiàn)


// cad上面的點坐標
let cadPoints=[
    vjmap.geoPoint([39760.07407, 237424.52134]),
    vjmap.geoPoint([39006.60468, 237808.49494749]),
    vjmap.geoPoint([38823.92918, 235003.98994]),
    vjmap.geoPoint([37885.55424, 235452.80893])
];

// 在百度圖上面拾取的與上面的點一一對應(yīng)的坐標
let baiduPoints=[
    vjmap.geoPoint([113.292983, 23.206979]),
    vjmap.geoPoint([113.285631, 23.210304]),
    vjmap.geoPoint([113.283897, 23.185047]),
    vjmap.geoPoint([113.274716, 23.188962])
]

// 百度點坐標轉(zhuǎn)wgs84坐標，如果不是百度圖上，或高德上面拾取的，坐標類型應(yīng)為 CRSTypes.GCJ02，天地圖上拾取的，則不需要轉(zhuǎn)換直接為wgs84坐標
let wgs84Points=baiduPoints.map(e=> vjmap.geoPoint(vjmap.transform.convert([e.x, e.y],vjmap.transform.CRSTypes.BD09, vjmap.transform.CRSTypes.WGS84)));

// 通過坐標參數(shù)求出四參數(shù)
let fourparam=vjmap.coordTransfromGetFourParamter(wgs84Points, cadPoints, true); // 這里不需要考慮旋轉(zhuǎn)

let wmsurl=svc.wmsTileUrl({
    mapid: cadMapId,
    version:"v1",
    layers: style.stylename,
    srs: "EPSG:3857", // 底圖是天地圖坐標系
    crs: "EPSG:4326", // 因為四參數(shù)的輸入是wgs84，需要先要把3857轉(zhuǎn)4326
    fourParameter: [fourparam.dx, fourparam.dy, fourparam.scale, fourparam.rotate] // 轉(zhuǎn)4326后，再調(diào)用四參數(shù)進行轉(zhuǎn)換，轉(zhuǎn)cad坐標
})

效果如下：https://vjmap.com/demo/#/demo/map/web/05fourparam

在線體驗地址

(1) 打開唯杰地圖云端圖紙管理平臺 https://vjmap.com/app/cloud)
(2) 上傳打開 CAD圖形
(3) 在工具欄中選擇與互聯(lián)地圖自動疊加或四參數(shù)疊加

(4) 參數(shù)設(shè)置

(5) 效果

感興趣的朋友，趕緊打開唯杰地圖云端圖紙管理平臺 https://vjmap.com/app/cloud) 上傳想要疊加的CAD圖在線體驗吧！

家好，今天給大家介紹一款，JavaScript實現(xiàn)的多功能側(cè)邊導(dǎo)航菜單源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

可以菜單在左邊彈出，也可以設(shè)置菜單在右邊彈出（圖2）

圖2

可以設(shè)置為子菜單重疊樣式（圖3）

圖3

可以設(shè)置為擴展樣式（圖4）

圖4

可以設(shè)置為直接展開樣式（圖5）

圖5

自適應(yīng)各種分辨率（圖6）

圖6

本模板編碼：10138，需要的朋友，點擊下面的鏈接后，搜索10138，即可獲取。

「鏈接」

距重疊解決方案(BFC)

首先要明確BFC是什么意思，其全英文拼寫為 Block Formatting Context 直譯為“塊級格式化上下文”

兩個或多個塊級盒子的垂直相鄰邊界會重合。結(jié)果的邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負邊界，則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界，則從零中減去絕對值最大的負邊界。注意：相鄰的盒子可能并非是由父子關(guān)系或同胞關(guān)系的元素生成。

但是邊界的重疊也有例外情況：

1、水平邊距永遠不會重合。

2、在規(guī)范文檔中，2個或以上的塊級盒模型相鄰的垂直margin會重疊。最終的margin值計算方法如下：

a、全部都為正值，取最大者；

b、不全是正值，則都取絕對值，然后用正值減去最大值；

c、沒有正值，則都取絕對值，然后用0減去最大值。

注意：相鄰的盒模型可能由DOM元素動態(tài)產(chǎn)生并沒有相鄰或繼承關(guān)系。

3、相鄰的盒模型中，如果其中的一個是浮動的（float），垂直margin不會重疊，并且浮動的盒模型和它的子元素之間也是這樣。

4、設(shè)置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值為visible除外）。

5、設(shè)置了絕對定位（position:absolute）的盒模型，垂直margin不會被重疊，并且和他們的子元素之間也是一樣。

6、設(shè)置了display:inline-block的元素，垂直margin不會重疊，甚至和他們的子元素之間也是一樣。

7、如果一個盒模型的上下margin相鄰，這時它的margin可能重疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決于它的相鄰元素的margin是否重疊。

a、如果元素的margin和它的父元素的margin-top重疊在一起，盒模型border-top的邊界定義和它的父元素相同。

b、另外，任意元素的父元素不參與margin的重疊，或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零，那么元素的border-top邊界位置和原來一樣。

一個應(yīng)用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom重疊。

注意，那些已經(jīng)被重疊覆蓋的元素的位置對其他已經(jīng)重疊的元素的位置沒有任何影響；只有在對這些元素的子元素定位時，border-top邊界位置才是必需的。

8、根元素的垂直margin不會被重疊。

外邊距(margin)重疊示例

外邊距重疊是指兩個垂直相鄰的塊級元素，當(dāng)上下兩個邊距相遇時，起外邊距會產(chǎn)生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。

圖示：

另一個重疊現(xiàn)象是當(dāng)一個元素包含在另一個元素之中時，子元素與父元素之間也會產(chǎn)生重疊現(xiàn)象，重疊后的外邊距，等于其中最大者：

同理，如果一個無內(nèi)容的空元素，其自身上下邊距也會產(chǎn)生重疊。

外邊距重疊的意義

外邊距的重疊只產(chǎn)生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規(guī)則，其實有其現(xiàn)實意義。設(shè)想，當(dāng)我們上下排列一系列規(guī)則的塊級元素（如段落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產(chǎn)生雙倍的距離。

案例：如下圖，父元素沒有設(shè)置margin-top，而子元素設(shè)置了margin-top：20px;可以看出，父元素也一起有了邊距。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 .demo{
 height:100px;
 background: #eee;
 }
 .parent{
 height:200px;
 background: #88f;
 }
 .child{
 height:100px;
 margin-top:20px;
 background: #0ff;
 width:200px;
 }
 </style>
</head>
<body>
 <section class="demo">
 <h2>此部分是能更容易看出讓下面的塊的margin-top。</h2>
 </section>
 <section class="parent">
 <article class="child">
 <h2>子元素</h2>
 margin-top:20px;
 </article>
 <h2>父元素</h2>
 沒有設(shè)置margin-top
 </section>
</body>
</html>

解決這個辦法：父元素設(shè)置padding-top:20px 或者設(shè)置 overflow:hidden，子元素取消margin-top:20px;

防止外邊距重疊解決方案：

雖然外邊距的重疊有其一定的意義，但有時候我們在設(shè)計上卻不想讓元素之間產(chǎn)生重疊，那么可以有如下幾個建議可供參考：

外層元素padding代替
內(nèi)層元素透明邊框 border:1px solid transparent;
內(nèi)層元素絕對定位 postion:absolute:
外層元素 overflow:hidden;
內(nèi)層元素加float:left;或display:inline-block;
內(nèi)層元素padding:1px;

以上建議可根據(jù)實際情況來采取。

web前端其實很簡單！

如何學(xué)習(xí)呢？看下下面

領(lǐng)取方法：

關(guān)注“IT金勻” 然后私信回復(fù)“前端”即可

請記得給金勻先來個“評論+轉(zhuǎn)發(fā)”

在線咨詢

上一篇：SSH 客戶端神器之 MobaXterm
下一篇：css3新手入門（1）基礎(chǔ)選擇器

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商