浙江龙网

  1. 首页 > 生活百科 > >

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

生活百科

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

通过openlayers加载dwg格式的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实体
通过openlayers加载dwg格式的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图形【通过openlayers加载dwg格式的CAD图并与互联网地图叠加】
通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
// 地图服务对象，调用唯杰地图服务打开地图，获取地图的元数据let svc = new vjmap.Service(env.serviceUrl, env.accessToken)// 上传dwg文件const uploadDwgFile = async file => {message.info("正在上传图形 ， 请稍候", 2);let res = await svc.uploadMap(file); // 上传地图// 输入图idlet mapid = prompt("请输入图名称ID", res.mapid);res.mapid = mapid;res.mapopenway = vjmap.MapOpenWay.GeomRender; // 几何渲染，内存渲染用vjmap.MapOpenWay.Memoryres.isVector = false; // 使用栅格瓦片res.style = vjmap.openMapDarkStyle(); // 深色样式，浅色用openMapDarkStylemessage.info("正在打开图形，请稍候 ， 第一次打开时根据图的大小可能需要几十秒至几分钟不等", 5);let data = https://www.huyubaike.com/biancheng/await svc.openMap(res); // 打开地图if (data.error) {message.error(data.error)return;}openMap(data);}

推荐阅读


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

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