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

Openlayers介绍? Openlayers是一个基于Javacript开发，免费、开源的前端地图开发库，使用它，可以很容易的开发出WebGIS系统。目前Openlayers支持地图瓦片、矢量数据等众多地图数据格式，支持比较完整的地图交互操作。目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架，在国内外的GIS相关行业中得到了广泛的应用。
openlayers 官网地址 https://openlayers.org/
openlayers 源码地址 https://github.com/openlayers/openlayers
Openlayers中加载CAD栅格瓦片

文章插图

// 地图服务对象，调用唯杰地图服务打开地图，获取地图的元数据let svc = new vjmap.Service(env.serviceUrl, env.accessToken)// 打开地图let mapId = "sys_zp";let res = await svc.openMap({mapid: mapId, // 地图IDmapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式})if (res.error) {// 如果打开出错message.error(res.error)}// 获取地图范围let mapBounds = vjmap.GeoBounds.fromString(res.bounds);//自定义投影参数let cadProjection = new ol.proj.Projection({// extent用于确定缩放级别extent: mapBounds.toArray(),units: 'm'});// 设置每级的分辨率let resolutions= [];for(let i = 0; i < 25; i++) {resolutions.push(mapBounds.width() / (512 * Math.pow(2, i - 1)))}// 增加自定义的cad的坐标系ol.proj.addProjection(cadProjection);// 创建openlayer的地图对象let map = new ol.Map({target: 'map', // div的idview: new ol.View({center: mapBounds.center().toArray(),// 地图中心点projection: cadProjection, // 刚自定义的cad的坐标系resolutions:resolutions, // 分辨率zoom: 2// 初始缩放级别})});// 增加一个瓦片图层let layer = new ol.layer.Tile({// 增加一个瓦片数据源source: new ol.source.TileImage({url: svc.rasterTileUrl() // 唯杰地图服务提供的cad的栅格瓦片服务地址})});// 在地图中增加上面的瓦片图层map.addLayer(layer);

Openlayers中加载CAD矢量瓦片

// 增加一个矢量瓦片图层let layer = new ol.layer.VectorTile({// 增加一个瓦片数据源source: new ol.source.VectorTile({projection: cadProjection,format: new ol.format.MVT(),url: svc.vectorTileUrl() // 唯杰地图服务提供的cad的矢量瓦片服务地址}),style: createVjMapVectorStyle(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Circle)});// 在地图中增加上面的瓦片图层map.addLayer(layer);

Openlayers中选择高亮CAD实体

文章插图

const highlight_ent = async co => {vectorSource.clear();let res = await svc.pointQueryFeature({x: co[0],y: co[1],zoom: map.getView().getZoom(),fields: ""}, pt => {// 查询到的每个点进行坐标处理回调return mapPrj.fromMercator(pt);// 转成cad的坐标})if (res && res.result && res.result.length > 0) {let features = [];for (let ent of res.result) {if (ent.geom && ent.geom.geometries) {let clr = vjmap.entColorToHtmlColor(ent.color);for (let g = 0; g < ent.geom.geometries.length; g++) {features.push({type: "Feature",properties: {objectid: ent.objectid + "_" + g,color: clr,alpha: ent.alpha / 255,lineWidth: 1,name: ent.name,isline: ent.isline,layerindex: ent.layerindex},geometry: ent.geom.geometries[g]})}// 选择提示let content = `feature: ${ent.objectid}; layer: ${cadLayers[ent.layerindex].name}; type: ${ent.name}`message.info({ content, key: "info", duration: 3});}}geojsonObject.features = features;if (geojsonObject.features.length > 0) {vectorSource.addFeatures( new ol.format.GeoJSON().readFeatures(geojsonObject, {dataProjection: cadProjection}))}}};

Openlayers中上传打开CAD的DWG图形