浙江龙网

  1. 首页 > 生活百科 > >

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

生活百科

Openlayers中查询图中所有文字并绘制边框

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

文章插图
// 实体类型ID和名称映射const { entTypeIdMap } = await svc.getConstData();const getTypeNameById = name => {for(let id in entTypeIdMap) {if (entTypeIdMap[id] == name) {return id}}}const queryTextAndDrawBounds = async () => {let queryTextEntTypeId = getTypeNameById("AcDbText"); // 单行文字let queryMTextEntTypeId = getTypeNameById("AcDbMText"); // 多行文字let queryAttDefEntTypeId = getTypeNameById("AcDbAttributeDefinition"); // 属性定义文字let queryAttEntTypeId = getTypeNameById("AcDbAttribute"); // 属性文字let query = await svc.conditionQueryFeature({condition: `name='${queryTextEntTypeId}' or name='${queryMTextEntTypeId}' or name='${queryAttDefEntTypeId}' or name='${queryAttEntTypeId}'`, // 只需要写sql语句where后面的条件内容,字段内容请参考文档"服务端条件查询和表达式查询"fields: "",limit: 100000 //设置很大，相当于把所有的圆都查出来 。不传的话，默认只能取100条}, pt => {// 查询到的每个点进行坐标处理回调return mapPrj.fromMercator(pt);// 转成cad的坐标})if (query.error) {message.error(query.error)} else {message.info(`查询到符合的记数条数：${query.recordCount}`)if (query.recordCount > 0) {let features = [];for(var i = 0; i < query.recordCount; i++) {let bounds = vjmap.getEnvelopBounds(query.result[i].envelop, mapPrj);let clr = vjmap.entColorToHtmlColor(query.result[i].color); // 实体颜色转html颜色(features.push({type: "Feature",properties: {name: "objectid:" + query.result[i].objectid,color: clr},geometry: {'type': 'Polygon','coordinates': [bounds.toPointArray(),],}})}if (!vectorSource) {// 如果之前没有高亮矢量图层addHighLightLayer();}vectorSource.clear();let geojsonObject = {'type': 'FeatureCollection','features': features}// 修改矢量数据源数据vectorSource.addFeatures( new ol.format.GeoJSON().readFeatures(geojsonObject, {dataProjection: cadProjection}))}}}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}}),}))

推荐阅读


上一篇：【C++】spdlog光速入门，C++logger最简单最快的库

下一篇：mysql安装教程-window操作系统