经验总结

  1. 首页 > 生活 > >

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

生活百科

Openlayers中图形绘制

通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
const source = new ol.source.Vector({wrapX: false});const vector = new ol.layer.Vector({source: source,});map.addLayer(vector);let draw; // global so we can remove it laterfunction addInteraction(value) {map.removeInteraction(draw);if (value !== 'None') {draw = new ol.interaction.Draw({source: source,type: value,});map.addInteraction(draw);}}addInteraction('Point');Openlayers中CAD图叠加互联网地图[CAD为底图]
通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
// 增加高德地图底图let gdlayer;const addGaodeMap = async (isRoadway) => {const tileUrl = svc.webMapUrl({tileCrs: "gcj02",tileUrl:isRoadway ? ["https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"] :/* 如果用影像 */["https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}","https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],tileSize: 256,tileRetina: 1,tileMaxZoom: 18,tileShards: "1,2,3,4",tileToken: "",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/124172626fourParameterBefore: "39000000,0,1,0"})// 增加一个瓦片图层gdlayer = new ol.layer.Tile({// 增加一个瓦片数据源source: new ol.source.TileImage({url: tileUrl})});gdlayer.setZIndex(-1);// 在地图中增加上面的瓦片图层map.addLayer(gdlayer);// cad坐标与高德坐标相互转换示例let webCo = await cad2webCoordinate(center, false); // cad转高德let cadCo = await web2cadCoordinate(webCo, false); // 高德转cadconsole.log(center, webCo, cadCo)}Openlayers中互联网地图自动叠加CAD图[互联网图为底图]
通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
let cadEpsg = "EPSG:4544";// cad图的espg代号// 增加cad的wms图层let wmsUrl = svc.wmsTileUrl({mapid: mapId, // 地图idlayers: layer, // 图层名称bbox: '', // bbox这里不需要srs: "EPSG:3857", //crs: cadEpsg})function getQueryStringArgs(url) {let theRequest = {};let idx = url.indexOf("?");if (idx != -1) {let str = url.substr(idx + 1);let strs = str.split("&");for (let i = 0; i < strs.length; i++) {let items = strs[i].split("=");theRequest[items[0]] = items[1];}}return theRequest;}let mapBounds = vjmap.GeoBounds.fromString(res.bounds);// cad图坐标转web wgs84坐标const cadToWebCoordinate = async point => {let co = await svc.cmdTransform(cadEpsg, "EPSG:4326", point);return co[0]}// cad转wgs84经纬度let boundsMin = await cadToWebCoordinate(mapBounds.min);let boundsMax = await cadToWebCoordinate(mapBounds.max);// wgs84经纬度转墨卡托boundsMin = vjmap.Projection.lngLat2Mercator(boundsMin);boundsMax = vjmap.Projection.lngLat2Mercator(boundsMax);// 在openlayer中增加wms图层map.addLayer(new ol.layer.Tile({// 范围extent: [boundsMin[0], boundsMin[1], boundsMax[0], boundsMax[1]],source: new ol.source.TileWMS({url: wmsUrl.substr(0, wmsUrl.indexOf("?")),params: {...getQueryStringArgs(wmsUrl),'TILED': true}}),}))Openlayers中互联网地图公共点叠加CAD图[互联网图为底图]
通过openlayers加载dwg格式的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);}

经验总结扩展阅读


上一篇：2023年2月10日是回娘家吉日吗 2023年农历正月廿十回娘家吉日

下一篇：2024年九月廿六出生郭姓女孩名字怎么取好名字推荐