通过openlayers加载dwg格式的CAD图并与互联网地图叠加( 四 ) _生活百科

Openlayers中互联网地图公共点叠加CAD图[互联网图为底图]

文章插图

// cad上面的点坐标let cadPoints = [vjmap.geoPoint([587464448.8435847, 3104003685.208651,]),vjmap.geoPoint([587761927.7224838, 3104005967.655292]),vjmap.geoPoint([587463688.0280377, 3103796743.3798513]),vjmap.geoPoint([587760406.0913897, 3103793700.1176634])];// 在互联网图上面拾取的与上面的点一一对应的坐标(wgs84坐标)let webPoints = [vjmap.geoPoint([116.48476281710168, 39.96200739703454]),vjmap.geoPoint([116.48746772021137, 39.96022062215167]),vjmap.geoPoint([116.48585059441585, 39.9588451134361]),vjmap.geoPoint([116.48317418949145, 39.960515760972356])]// 通过坐标参数求出四参数let epsg3857Points = webPoints.map(w => vjmap.geoPoint(vjmap.Projection.lngLat2Mercator(w)));let param = vjmap.coordTransfromGetFourParamter(epsg3857Points, cadPoints , false); // 这里考虑旋转let fourparam = [param.dx, param.dy, param.scale, param.rotate]// wms图层地址const getCadWmsUrl = (transparent) => {let wmsUrl = svc.wmsTileUrl({mapid: mapId, // 地图idlayers: layer, // 图层名称bbox: '', // bbox这里不需要fourParameter: fourparam,transparent: transparent,backgroundColor: 'rgba(240, 255, 255)' // 不透明时有效})return wmsUrl}let mapBounds = vjmap.GeoBounds.fromString(res.bounds);let cadPrj = new vjmap.GeoProjection(mapBounds);// cad图坐标转3857坐标const cadToWebCoordinate = point => {// 再调用四参数反算求出web的坐标return vjmap.coordTransfromByInvFourParamter(vjmap.geoPoint(point), param)}// 3857转cad图坐标const webToCadCoordinate = point => {return vjmap.coordTransfromByFourParamter(vjmap.geoPoint(point), param)}let wmsLayer;const addWmsLayer = async (transparent)=> {removeWmsLayer();let wmsUrl = getCadWmsUrl(transparent);wmsLayer = new ol.layer.Tile({// 范围extent: bounds.toArray(),source: new ol.source.TileWMS({url: wmsUrl.substr(0, wmsUrl.indexOf("?")),params: {...getQueryStringArgs(wmsUrl),'TILED': true}}),});// 在openlayer中增加wms图层map.addLayer(wmsLayer);}

最后可点击 https://vjmap.com/demo/#/demo/map/openlayers/01olraster 在线体验上面功能
如果需要用openlayers来加载CAD图进行开发，请参考示例 https://vjmap.com/demo/#/demo/map/openlayers/01olraster
如果需要用leaflet来加载CAD图进行开发，请参考示例 https://vjmap.com/demo/#/demo/map/leaflet/01leafletraster
如果需要用maptalks来加载CAD图进行开发，请参考示例 https://vjmap.com/demo/#/demo/map/maptalks/01maptalksraster
如何基于vue3来开发openlayers应用，可查看此开源代码 vue3-openlayers" rel="external nofollow noreferrer">https://github.com/MelihAltintas/vue3-openlayers
如何基于vue2来开发openlayers应用，可查看此开源代码 vuelayers" rel="external nofollow noreferrer">https://github.com/ghettovoice/vuelayers