整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CAD图与互联网地图网页端相互叠加显示技术分析和实现

CAD图与互联网地图网页端相互叠加显示技术分析和实现

求分析

之前相关的博文中介绍了如果在Web网页端展示CAD图形(唯杰地图云端图纸管理平台 https://vjmap.com/app/cloud),当一些CAD图纸有实际地理坐标位置时,如地形图等,有时候需要和互联网地图叠加进行显示。其主要需求有:

  • CAD图有坐标系时,能自动叠加到互联网地图上
  • CAD没有坐标系时,能自定义几个公共点,通过公共点叠加到互联网地图上
  • CAD图与互联网地图能相互叠加。(底图是哪个,就以底图为坐标系)

理论知识

GIS中常用坐标系

(一)WGS84坐标系

WGS-84坐标系(World Geodetic System一1984 Coordinate System)

一种国际上采用的地心坐标系。坐标原点为地球质心,其地心空间直角坐标系的Z轴指向BIH (国际时间服务机构)1984.O定义的协议地球极(CTP)方向,X轴指向BIH 1984.0的零子午面和CTP赤道的交点,Y轴与Z轴、X轴垂直构成右手坐标系,称为1984年世界大地坐标系统。

属于wgs84坐标系的图有如天地图等。

(二)WGS84 Web墨卡托

Web墨卡托是2005年谷歌在谷歌地图中首次使用的,当时或更早的Web墨卡托使用者还是称其为世界墨卡托 World Mercator – Spherical Mercator (unofficial deprecated ESRI),代号 WKID 54004 (在 EPSG:54004 或 ESRI:54004 中,非官方)。

EPSG于2009年2月9号使用新代号 EPSG:3857 ,给谷歌地图投影方法命名为“公共可视化伪墨卡托投影”(PVPM)

(三)GCJ02经纬度投影

GCJ-02是由中国国家测绘局(G表示Guojia国家,C表示Cehui测绘,J表示Ju局)制订的地理信息系统的坐标系统。

它其实就是对真实坐标系统进行人为的加偏处理,按照特殊的算法,将真实的坐标加密成虚假的坐标,而这个加偏并不是线性的加偏,所以各地的偏移情况都会有所不同。而加密后的坐标也常被大家称为“火星坐标系统”。

该坐标系的坐标值为经纬度格式,单位为度。

这里的GCJ02经纬度投影,也就是在WGS84经纬度的基础之上,进行GCJ-02加偏。

如高德地图,就采用的是GCJ02坐标系,也就是俗称的火星坐标系

(四)GCJ02 Web 墨卡托投影

GCJ-02是由中国国家测绘局(G表示Guojia国家,C表示Cehui测绘,J表示Ju局)制订的地理信息系统的坐标系统。

它其实就是对真实坐标系统进行人为的加偏处理,按照特殊的算法,将真实的坐标加密成虚假的坐标,而这个加偏并不是线性的加偏,所以各地的偏移情况都会有所不同。而加密后的坐标也常被大家称为“火星坐标系统”。

该坐标系的坐标值为Web墨卡托格式,单位为米。

这里的GCJ02 Web 墨卡托,也就是在标准Web墨卡托的基础之上,进行GCJ-02加偏。

(五)BD09 经纬度投影

BD09经纬度投影属于百度坐标系,它是在标准经纬度的基础上进行GCJ-02加偏之后,再加上百度自身的加偏算法,也就是在标准经纬度的基础之上进行了两次加偏。

该坐标系的坐标值为经纬度格式,单位为度。

(六)BD09 Web 墨卡托影

BD09 Web 墨卡托属于百度坐标系,它是在标准Web墨卡托的基础上进行GCJ-02加偏之后,再加上百度自身的加偏算法,也就是在Web墨卡托的基础之上进行了两次加偏。

该坐标系的坐标值为Web墨卡托格式,单位为米。

(七)北京54坐标系

中国成立以后,我国大地测量进入了全面发展时期,在全国范围内开展了正规的,全面的大地测量和测图工作,迫切需要建立一个参心大地坐标系。由于当时的”一边倒”政治趋向,故我国采用了前苏联的克拉索夫斯基椭球参数,并与前苏联1942年坐标系进行联测,通过计算建立了我国大地坐标系,定名为1954年北京坐标系。因此,1954年北京坐标系可以认为是前苏联1942年坐标系的延伸。T.A的原点不在北京而是在前苏联的普尔科沃。

自北京54坐标系统建立以来,在该坐标系内进行了许多地区的局部平差,其成果得到了广泛的应用。但是随着测绘新理论·新技术的不断发展,人们发现该坐标系存在很多缺点,为此,我国在1978年在西安召开了”全国天文大地网整体平差会议”,提出了建立属于我国自己的大地坐标系,即后来的1980西安坐标系。

(八)西安80坐标系

1978年4月在西安召开全国天文大地网平差会议,确定重新定位,建立我国新的坐标系。为此有了1980年国家大地坐标系。1980年国家大地坐标系采用地球椭球基本参数为1975年国际大地测量与地球物理联合会第十六届大会推荐的数据,即IAG 75地球椭球体。该坐标系的大地原点设在我国中部的陕西省泾阳县永乐镇,位于西安市西北方向约60公里。

(九)CGCS2000坐标系

2000中国大地坐标系(China Geodetic Coordinate System 2000,CGCS2000),又称之为2000国家大地坐标系,是中国新一代大地坐标系,21世纪初已在中国正式实施。

投影坐标系6位和8位的区别

一般投影坐标系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/ )维护着空间参照对象的数据集,OGC标准中空间参照系统的SRID(Spatial Reference System Identifier)与EPSG的空间参照系统ID相一致。

EPSG成立于1986年,并已于2005年“重组”为国际石油和天然气生产商协会(The OGP Surveying and Positioning Committee),维护并发布坐标参照系统的数据集参数,以及坐标转换描述。该数据集被广泛接受并使用,通过一个Web发布平台进行分发,同时提供了微软Acess数据库的存储文件,通过SQL 脚本文件,mySQL, Oracle 和PostgreSQL等数据库也可使用。

该组织发布了一个坐标参照系统的数据集,并维护坐标参照系统的数据集参数,以及坐标转换描述,数据集对全球收录到的坐标参照系统进行了编码。

EPSG查询网站: https://epsg.io/

常用EPSG坐标系对照表:

是一个机构,它为常用坐标系做了编号,有了编号编程时候直接使用编号即可定义坐标系,常用坐标系及其EPSG编号有:

EPSG:4326

地理坐标系,坐标单位为经纬度。它是以地球质心为椭球中心的世界地理坐标系,GPS用的坐标系就是这个。

EPSG:4490

地理坐标系,坐标单位为经纬度。名字叫做CGCS2000坐标系,它是最适合中国地理位置的地理坐标系。

EPSG:3857

投影坐标系,坐标单位为x,y。伪墨卡托投影,也被称为球体墨卡托,Web Mercator。它是基于墨卡托投影的。

图内常见的EPSG代码如下:

投影坐标 Projected Coordinate System
(根据国家规定,推荐使用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

坐标转换

wgs84坐标、火星坐标 (GCJ-02)也叫国测局坐标系、百度坐标 (BD-09)相互转换

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打开控制台查看结果</h1>
<script src="index.js"></script>
<script>
    //国测局坐标(火星坐标,比如高德地图在用),百度坐标,wgs84坐标(谷歌国外以及绝大部分国外在线地图使用的坐标)
    //百度经纬度坐标转国测局坐标
    var bd09togcj02=coordtransform.bd09togcj02(116.404, 39.915);
    //国测局坐标转百度经纬度坐标
    var gcj02tobd09=coordtransform.gcj02tobd09(116.404, 39.915);
    //wgs84转国测局坐标
    var wgs84togcj02=coordtransform.wgs84togcj02(116.404, 39.915);
    //国测局坐标转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之间坐标相互转换

Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another. 大致翻译过来就是Proj4js是一个JavaScript类库,其主要功能就是将点坐标从一个坐标系转换为另一个坐标系。 前端添加Proj4js有三种方式: 从http://trac.osgeo.org/proj4js/wiki/Download下载,获取产品包中dist/proj4.js文件。 引入CDN上的Proj4js:https://cdnjs.com/libraries/proj4js。 也可以直接使用npm install proj4进行安装。 使用:

首先,定义需要转换的坐标系

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"]])

调用proj4方法

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

转换完成!

需要说明的是:由于不同坐标系可能椭球体不同,直接转换会有一定误差!!!

CAD图与互联网地图叠加实现思路

一、有坐标系的CAD图自动叠加到互联网地图上

1、互联图地图叠加CAD图

流程如下:

  • (1)确定互联图地图坐标系,如果不是wgs84坐标系,是火星坐标或百度坐标,需要转换成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)通过调用 Proj4js 将互联网地图坐标转换成CAD图坐标
  • (4)通过CAD图坐标,在后台通过WMS获取该瓦片相应的图片,叠加即可。
  • 效果如下:https://vjmap.com/demo/#/demo/map/web/04webWms

2、CAD图叠加互联图地图

流程如下:

  • (1)确定CAD图坐标系,通过X的前两位来获取属于EPSG哪个坐标系。方法同上。
  • (2) 通过调用 Proj4js 将CAD图坐标转换成转换成wgs86坐标,也就是epsg4326坐标系;
  • (3)确定互联图地图坐标系,如果不是wgs84坐标系,是火星坐标或百度坐标,需要将wgs84坐标转换成火星坐标或百度坐标转换
  • (4)通过互联网坐标去获取该范围内的瓦片,但这里有个问题就是一般的互联网地图只提供了WMTS服务,没有提供WMS服务,所以如果要实现的话,只能自己去后台写服务实现了。
  • 在唯杰地图vjmap中,可以使用以下代码实现
  • // 增加天地图图底图
    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会导致请求过多而返回失败,可以多写几个,失败时会尝试后面的token
    "69eb2fa0de3b2a668f1ef603a3f8bc73"
    ],
    tileFlipY: false,
    mapbounds: res.bounds,
    srs: "EPSG:4527", // 可通过前两位获取 vjmap.transform.getEpsgParam(vjmap.transform.EpsgCrsTypes.CGCS2000, 39).epsg
    // 因为sys_cad2000这个图只有6位,没有带系。需要在坐标转换前平移下带系 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图自动叠加到互联网地图上

没有坐标系的图,不能通过地理坐标转换,这时候就需要人为的选定公共对应点,然后通过四参数来计算平移、旋转、缩放来叠加了。

四参数的原理的相关计算可参考这博文 https://blog.csdn.net/qq_42811161/article/details/107809777

在唯杰地图vjmap中,可以使用以下代码实现


// 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])
];

// 在百度图上面拾取的与上面的点一一对应的坐标
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])
]

// 百度点坐标转wgs84坐标,如果不是百度图上,或高德上面拾取的,坐标类型应为 CRSTypes.GCJ02,天地图上拾取的,则不需要转换直接为wgs84坐标
let wgs84Points=baiduPoints.map(e=> vjmap.geoPoint(vjmap.transform.convert([e.x, e.y],vjmap.transform.CRSTypes.BD09, vjmap.transform.CRSTypes.WGS84)));

// 通过坐标参数求出四参数
let fourparam=vjmap.coordTransfromGetFourParamter(wgs84Points, cadPoints, true); // 这里不需要考虑旋转

let wmsurl=svc.wmsTileUrl({
    mapid: cadMapId,
    version:"v1",
    layers: style.stylename,
    srs: "EPSG:3857", // 底图是天地图坐标系
    crs: "EPSG:4326", // 因为四参数的输入是wgs84,需要先要把3857转4326
    fourParameter: [fourparam.dx, fourparam.dy, fourparam.scale, fourparam.rotate] // 转4326后,再调用四参数进行转换,转cad坐标
})

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

在线体验地址

  • (1) 打开 唯杰地图云端图纸管理平台 https://vjmap.com/app/cloud)
  • (2) 上传打开 CAD图形
  • (3) 在工具栏中选择 与互联地图自动叠加或四参数叠加

  • (4) 参数设置

  • (5) 效果

感兴趣的朋友,赶紧打开 唯杰地图云端图纸管理平台 https://vjmap.com/app/cloud) 上传想要叠加的CAD图在线体验吧!

家好,今天给大家介绍一款,JavaScript实现的多功能侧边导航菜单源码(图1)。送给大家哦,获取方式在本文末尾。

图1

可以菜单在左边弹出,也可以设置菜单在右边弹出(图2)

图2

图2

可以设置为子菜单重叠样式(图3)

图3

可以设置为扩展样式(图4)

图4

可以设置为直接展开样式(图5)

图5

自适应各种分辨率(图6)

图6

本模板编码:10138,需要的朋友,点击下面的链接后,搜索10138,即可获取。

「链接」

距重叠解决方案(BFC)

首先要明确BFC是什么意思,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。

但是边界的重叠也有例外情况:

1、水平边距永远不会重合。

2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下:

a、全部都为正值,取最大者;

b、不全是正值,则都取绝对值,然后用正值减去最大值;

c、没有正值,则都取绝对值,然后用0减去最大值。

注意:相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

3、相邻的盒模型中,如果其中的一个是浮动的(float),垂直margin不会重叠,并且浮动的盒模型和它的子元素之间也是这样。

4、设置了overflow属性的元素和它的子元素之间的margin不被重叠(overflow取值为visible除外)。

5、设置了绝对定位(position:absolute)的盒模型,垂直margin不会被重叠,并且和他们的子元素之间也是一样。

6、设置了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边界位置和原来一样。

一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠。

注意,那些已经被重叠覆盖的元素的位置对其他已经重叠的元素的位置没有任何影响;只有在对这些元素的子元素定位时,border-top边界位置才是必需的。

8、根元素的垂直margin不会被重叠。

外边距(margin)重叠示例

外边距重叠是指两个垂直相邻的块级元素,当上下两个边距相遇时,起外边距会产生重叠现象,且重叠后的外边距,等于其中较大者。

图示:

另一个重叠现象是当一个元素包含在另一个元素之中时,子元素与父元素之间也会产生重叠现象,重叠后的外边距,等于其中最大者:

同理,如果一个无内容的空元素,其自身上下边距也会产生重叠。

外边距重叠的意义

外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。

案例:如下图,父元素没有设置margin-top,而子元素设置了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>
 没有设置margin-top
 </section>
</body>
</html>

解决这个办法:父元素设置padding-top:20px 或者设置 overflow:hidden,子元素取消margin-top:20px;

防止外边距重叠解决方案:

虽然外边距的重叠有其一定的意义,但有时候我们在设计上却不想让元素之间产生重叠,那么可以有如下几个建议可供参考:

  1. 外层元素padding代替
  2. 内层元素透明边框 border:1px solid transparent;
  3. 内层元素绝对定位 postion:absolute:
  4. 外层元素 overflow:hidden;
  5. 内层元素 加float:left;或display:inline-block;
  6. 内层元素padding:1px;

以上建议可根据实际情况来采取。

web前端其实很简单!

如何学习呢?看下下面

领取方法:

关注“IT金匀” 然后私信回复“前端”即可

请记得给金匀先来个“评论+转发”