浙江龙网

  1. 首页 > 生活百科 > >

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

生活百科

Openlayers中切换CAD图层

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

文章插图
// 切换图层const switchLayer = async layers => {let res = await svc.cmdSwitchLayers(layers); // 调用唯杰服务切换图层，返回图层id {layerid： "xxxx"}let source = layer.getSource();// 重新设置新的唯杰地图服务提供的cad的栅格瓦片服务地址source.setUrl(svc.rasterTileUrl());// 刷新source.refresh();}Openlayers中切换CAD图形
通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
const switchToMapId = async (mapId)=> {let res = await svc.openMap({mapid: mapId, // 地图IDmapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式})if (res.error) {// 如果打开出错message.error(res.error)return;}// 获取地图范围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的地图对象map = new ol.Map({target: createNewMapDivId(), // 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);map.on('click', (e) => message.info({content: `您点击的坐标为： ${JSON.stringify(e.coordinate)}`, key: "info", duration: 3}));}Openlayers中深色浅色切换主题
通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
let curIsDarkTheme = true;const switchToDarkTheme = async () => {if (curIsDarkTheme) return;curIsDarkTheme = true;document.body.style.background = "#022B4F"; // 背景色改为深色await updateStyle(curIsDarkTheme)}const switchToLightTheme = async () => {if (!curIsDarkTheme) return;curIsDarkTheme = false;document.body.style.backgroundImage = "linear-gradient(rgba(255, 255, 255, 1), rgba(233,255,255, 1), rgba(233,255,255, 1))"await updateStyle(curIsDarkTheme)}const updateStyle = async (isDarkTheme) => {style.backcolor = isDarkTheme ? 0 : 0xFFFFFF;//深色为黑色，浅色为白色let res = await svc.cmdUpdateStyle(style);let source = layer.getSource();// 重新设置新的唯杰地图服务提供的cad的栅格瓦片服务地址source.setUrl(svc.rasterTileUrl());// 刷新source.refresh();}Openlayers中自定义CAD地图样式通过修改CAD地图后台样式数据自定义地图
通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
// 更改样式const expressionList = [] ;// 表达式数组const updateStyle = async (style) => {let res = await svc.cmdUpdateStyle({name: "customStyle2",backcolor: 0,expression: expressionList.join("\n"),...style});let source = layer.getSource();// 重新设置新的唯杰地图服务提供的cad的栅格瓦片服务地址source.setUrl(svc.rasterTileUrl());// 刷新source.refresh();}// 表达式语法和变量请参考// 服务端条件查询和表达式查询 https://vjmap.com/guide/svrStyleVar.html// 服务端渲染表达式语法 https://vjmap.com/guide/expr.html// 修改颜色红color.r, 绿color.g, 蓝color.b, 透明度color.a,如果输入了级别的话 ， 表示此级别及以上的设置const modifyColor = (color, zoom) => {let result = "";let z = Number.isInteger(zoom) ? `[${zoom + 1}]` : '';if ("r" in color) result += `gOutColorRed${z}:=${color.r};`;if ("g" in color) result += `gOutColorGreen${z}:=${color.g};`;if ("b" in color) result += `gOutColorBlue${z}:=${color.b};`;if ("a" in color) result += `gOutColorAlpha${z}:=${color.a};`;return result;}Openlayers中对CAD图处理组合对多个cad图进行图层开关裁剪旋转缩放处理后合并成一个新的cad图
通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
// 组合成新的图,将sys_world图进行一定的处理后，再与sys_hello进行合成，生成新的地图文件名let rsp = await svc.composeNewMap([{mapid: "sys_world", // 地图id// 下面的参数可以根据实际需要来设置，可以对图层 ， 范围 ， 坐标转换来进行处理layers: ["经纬度标注","COUNTRY"], // 要显示的图层名称列表//clipbounds: [10201.981489534268, 9040.030491346213, 26501.267379,4445.465999], // 要显示的范围//fourParameter: [0,0,1,0] // 对地图进行四参数转换计算},{mapid: "sys_hello"}])if (!rsp.status) {message.error(rsp.error)}// 返回结果为/*{"fileid": "pec9c5f73f1d","mapdependencies": "sys_world||sys_hello","mapfrom": "sys_world&&v1&&&&0&&&&&&&&&&00A0&&10||sys_hello&&v1&&&&0&&&&&&&&&&&&2","status": true} */

推荐阅读


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

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