精华内容
下载资源
问答
  • 如何绘制平面图
    千次阅读
    2021-12-15 14:49:14

    介绍:Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 38 KB,但它具有开发人员开发在线地图的大部分功能。————百度百科

    使用leaflet是一个绘制地图的工具,同样也可以绘制平面图,例如表示房间内某个位置有什么东西。

    放代码,代码上有注释。

    
    <html>
    <head>
        <link rel="stylesheet" href="./leaflet.css" />
    <script src="./leaflet.js"> </script>
    <script src="./leaflet-src.js"> </script>
    <script src="./leaflet-src.esm.js"> </script>
        <style>
        #image-map {
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        </style>
        </head>
        <body>
        <div id="image-map"></div>
    
        <script>
            // Using leaflet.js to pan and zoom a big image.
            // See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
            //  设置能够缩放的级别,1-4级。初始级别值是1。
            //crs: L.CRS.Simple
            var map = L.map('image-map', {
                minZoom: 1,
                maxZoom: 4,
                center: [0, 0],
                zoom: 1,
                crs: L.CRS.Simple //这表明leaflet使用1:1映射,在屏幕像素和经纬度坐标系统之间。换句话说,我们的图片是平的,不是全球的,我们在投影一张平面图片。
            });
            // 定义了图片尺寸和它的路径,路径可以引用网络链接
            var w = 4000,
                h = 3000,
                url = './10105700m83x.jpg';
            // 把图片通过地图的方式放出来,所以需要一个像素坐标到经纬度坐标(系统)的转换。 把西南,东北角的像素坐标逆映射为经纬度坐标网。
            var southWest = map.unproject([0, h], map.getMaxZoom()-1);
            var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
            var bounds = new L.LatLngBounds(southWest, northEast);
    
            L.imageOverlay(url, bounds).addTo(map);
            // 把图像作为一个overlay覆盖,同时规定了图片的total size 只是我们限定的像素大小,所以用户不能把图片拖拽出边界。
    
    
            //增加一个marker ,地图上的标记,并绑定了一个popup,默认打开
            L.marker([-230, 156]).addTo(map).bindPopup("<b>文字提示</b><br />I am a popup.").openPopup();
            L.marker([-230, 320]).addTo(map).bindPopup("<b>文字提示</b><br />I am a popup.").openPopup();
            L.marker([-120, 116]).addTo(map).bindPopup("<b>文字提示</b><br />I am a popup.").openPopup();
            L.marker([-190, 356]).addTo(map).bindPopup("<b>文字提示</b><br />I am a popup.").openPopup();
            L.marker([-100, 56]).addTo(map).bindPopup("<b>文字提示</b><br />I am a popup.").openPopup();
            L.marker([-80, 400]).addTo(map).bindPopup("<b>文字提示</b><br />I am a popup.").openPopup();
    
         
            // //增加多边形
            L.polygon([
                    [-239, 77],
                    [-239, 133],
                    [-141, 148],
                    [-141, 110]
            ]).addTo(map).bindPopup("I am a polygon.");   
    
            map.setMaxBounds(bounds);
    
    
        </script>
    
        </body>
    </html>

    效果图如下

     

     

    更多相关内容
  • Sweet Home 3D是一个室内设计应用程序,可帮助您快速绘制房屋的平面图,在上面布置家具并以3D形式访问结果。
  • vue 使用leaflet绘制平面图(二)

    千次阅读 2021-12-15 14:56:19
    vue 使用leaflet绘制平面图

    首先在vue中使用,需要安装相关依赖

    npm install leaflet

    基于前面使用leaflet绘制平面图(一)的代码,修改得一下内容,相对与html会出现一些问题例如:标记图标未显示,需要声明icon

    import * as L from 'leaflet'
    import icon from 'leaflet/dist/images/marker-icon.png'
    import iconShadow from 'leaflet/dist/images/marker-shadow.png'

    完整代码如下

    <template>
      <div id="imageMap" />
    </template>
    <script>
    
    import 'leaflet/dist/leaflet.css'
    import 'leaflet/dist/leaflet'
    import 'leaflet/dist/leaflet-src'
    import 'leaflet/dist/leaflet-src.esm'
    import * as L from 'leaflet'
    import icon from 'leaflet/dist/images/marker-icon.png'
    import iconShadow from 'leaflet/dist/images/marker-shadow.png'
    const DefaultIcon = L.icon({
      iconUrl: icon,
      shadowUrl: iconShadow
    })
    L.Marker.prototype.options.icon = DefaultIcon
    
    export default {
      name: 'ImageMap',
      data() {
        return {
          imageMap: ''
        }
      },
      mounted() {
        this.initDate()
      },
      methods: {
        initDate() {
          var map = L.map('imageMap', {
            minZoom: 1,
            maxZoom: 4,
            center: [0, 0],
            zoom: 1,
            crs: L.CRS.Simple // 这表明leaflet使用1:1映射,在屏幕像素和经纬度坐标系统之间。换句话说,我们的图片是平的,不是全球的,我们在投影一张平面图片。
          })
          // 定义了图片尺寸和它的路径,路径可以引用网络链接
          var w = 4000
          var h = 3000
          var url = 'http://192.168.0.121:33334/u/202112/15135947bnp3.jpg'
          // 把图片通过地图的方式放出来,所以需要一个像素坐标到经纬度坐标(系统)的转换。 把西南,东北角的像素坐标逆映射为经纬度坐标网。
          var southWest = map.unproject([0, h], map.getMaxZoom() - 1)
          var northEast = map.unproject([w, 0], map.getMaxZoom() - 1)
          var bounds = new L.LatLngBounds(southWest, northEast)
          L.imageOverlay(url, bounds).addTo(map)
    
          L.marker([0, 0])
            .addTo(map)
            .bindPopup('<b>文字提示</b><br />I am a popup.')
            .openPopup()
          L.marker([-230, 156])
            .addTo(map)
            .bindPopup('<b>文字提示</b><br />I am a popup.')
            .openPopup()
          L.marker([-230, 320])
            .addTo(map)
            .bindPopup('<b>文字提示</b><br />I am a popup.')
            .openPopup()
          L.marker([-120, 116])
            .addTo(map)
            .bindPopup('<b>文字提示</b><br />I am a popup.')
            .openPopup()
          L.marker([-190, 356])
            .addTo(map)
            .bindPopup('<b>文字提示</b><br />I am a popup.')
            .openPopup()
          L.marker([-100, 56])
            .addTo(map)
            .bindPopup('<b>文字提示</b><br />I am a popup.')
            .openPopup()
          L.marker([-80, 400])
            .addTo(map)
            .bindPopup('<b>文字提示</b><br />I am a popup.')
            .openPopup()
          L.polygon([
            [-239, 77],
            [-239, 133],
            [-141, 148],
            [-141, 110]
          ])
            .addTo(map)
            .bindPopup('I am a polygon.')
    
          map.setMaxBounds(bounds)
        }
      }
    }
    </script>
    <style>
    #imageMap {
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
    </style>
    

     

     

    展开全文
  • vue制作室内平面图

    2022-04-29 16:34:53
    移动端制作一个室内平面图,类似于这样的平面图。有没有什么好的解决方案或者室内地图插件!
  • 绘制平面图形.rar

    2019-09-03 13:38:49
    可以输入长宽或半径来绘制平面图形,并可以计算他的周长与面积(通过接口实现),也可以选择绘制笔刷的颜色。Java图形界面实验可用
  • 但也有很多非专业的室内装修工作者使用,为方便新手使用本软件,小编这里用五步快速绘制室内CAD平面图来给大家讲解怎么用。项目:室内 CAD 平面图如下图所示:工具:CAD 迷你家装 V2.0步骤1:按尺寸绘制轴线使用CAD...

    CAD迷你 家装 是 室内设计 师经常用到的专业工具,对专业的设计人员来说,使用起来很方便基本一看就懂。但也有很多非专业的室内装修工作者使用,为方便新手使用本软件,小编这里用五步快速绘制室内CAD平面图来给大家讲解怎么用。

    项目:室内 CAD 平面图如下图所示:

    工具:CAD 迷你家装 V2.0

    12595381_201762811115977263_thumb.jpg

    步骤1:按尺寸绘制轴线

    使用CAD迷你家装图文教程画初始轴线,再用CAD迷你家装图文教程把其他轴线按尺寸画完。

    eaad3a48c96e569225d428b57d70b0bf.gif

    步骤 2:沿轴线绘制墙体

    此图墙宽度均为 240。使用绘制墙体,墙宽度选 240,沿轴线将墙画出

    eaad3a48c96e569225d428b57d70b0bf.gif

    步骤 3:在墙上自动插入窗

    窗定位:算出窗中心点位置,用绘制轴线和轴线偏移画出辅助的轴线;再使用标准窗,选择窗宽度,在正确位置插入窗。(C1 窗宽 1800,C2 窗宽 900)

    eaad3a48c96e569225d428b57d70b0bf.gif

    关闭轴线的图层检查一下:

    eaad3a48c96e569225d428b57d70b0bf.gif

    步骤 4:在墙上自动插入绘制门

    使用单开门,选择门的宽度,在墙体上添加门。(M0 门宽 900,M1 门宽 800,M2 门宽 700)

    eaad3a48c96e569225d428b57d70b0bf.gif

    步骤 5:添加构造柱、文字注释、尺寸标注

    使用插入柱子添加构造柱

    eaad3a48c96e569225d428b57d70b0bf.gif

    使用文字添加文字注释

    eaad3a48c96e569225d428b57d70b0bf.gif

    使用尺寸标注添加尺寸标注

    eaad3a48c96e569225d428b57d70b0bf.gif

    后续工作:在此户型图上布置家居、绘制厨卫、给排水、电 气、空调通风等 平面设计 图,请见后续教程。

    展开全文
  • 如何使用CAD绘制平面图的墙体.doc
  • 从零开始 利用PHOTOSHOP制作平面地图 我们可以利用google与photoshop相互协作制作平面地图可以省去很多实地测绘的时间与辛劳而且更为准确 不过在之前请先看一下后面的备注可以给大家的操作带来许多方便 下面我就这个...
  • 第12章天正建筑绘制平面图.doc
  • 绘制以下系统的相平面图(d^2y/dt^2)+2Jw(dy/dt)+w^2=0 对于不同的 w & J 值
  • 超详细机械制图教案模块1绘制平面图形.doc
  • 超详细机械制图教(学)案模块1绘制平面图形.doc
  • 1、首先我们要测量好房间的尺寸,画好简单的平面图之后就可以开始在CAD里面绘制了。左侧工具面板第一个就是直线,快捷键(L)这里要注意画直线要选择“正交”,快捷键(F8),如果“正交”没有打开容易画成斜线。点击...

    首先,我们打开已经下载好的Auto Cad,下载方法略过,这里我以2018版为例,工具面板在CAD的左右两侧都有显示,鼠标放在某一个工具的上面就会显示它的具体名称,下面会为大家介绍具体的用法。

    f44ffb7b1696b4e7d5b53ec78c272d5f.png

    1、首先我们要测量好房间的尺寸,画好简单的平面图之后就可以开始在CAD里面绘制了。左侧工具面板第一个就是直线,快捷键(L)这里要注意画直线要选择“正交”,快捷键(F8),如果“正交”没有打开容易画成斜线。点击下直线按钮在空白处随便点一下,然后往四个方向随便哪个方向移动鼠标,数值是可以直接输入的(以毫米为单位),输入好数值按“回车键就可以了。一定注意不要忘记留出门窗的距离。

    cca4b8591060f01cee5ec4e03c0e735f.png

    2、墙体一般都是双线表示,我们在画完第一圈平面图的时候,单线变成双线我们可以用“偏移”工具,快捷键(O)或者直接点击“偏移”输入好要偏移的数值(一般外墙是240mm),点击“回车键”出现小的方框后移动鼠标把小方框放到刚画好的线上按住不要松,然后鼠标向下移动任意位置松开鼠标,就会出现和他一模一样的线了,间距就是刚才输入的数值。

    a3b93da7ef4f35cf93c52644d2adf98d.png

    3、在偏移之后,我们会发现所有偏移的线是没有相接在一起的,这时候我们就可以通过“倒角”工具,快捷键(CHA)然后按一下回车键,进入倒角过后,会提示我们选择第一条线段和第二条线段,这里跟着提示操作就可以了。

    dc79a547e0a8d5ba79d3776a41112cc2.png

    52df0838f9e39de0f958e933fa70258c.png

    如果出现我们选择好后,倒角却没有修改完成,这里我们就需要输入D,然后按空格键。然后我们输入我们第一个倒角距离,然后点击空格键,继续输入第二个倒角距离,然后点击空格键。

    22b9d67466aa96df81fd12a1b9d6f394.png

    4、到这一步我们的平面图基本完成了,如果墙体中涉及到承重墙,我们可以用“填充”工具,快捷键(H)给相关墙面填充适当的颜色。

    ed05a1c2e029c8c23c15ae3d3a757bbf.png

    在所有墙面结构完成之后,我们创建一个“图层”快捷键(LA),例:“0-ZZZ-墙”,(创建图层的目的就是为了我们后面方便管理可以提高你的工作效率),然后拾取所有墙体的线条把它放在刚刚创建好的图层里。

    d991a633cb5ef364e046ed61926f9605.png

    5、画完墙之后,我们依次画出门窗,这里要注意门敞开的位置是往里还是往外以及窗户的宽度。门窗的颜色尽量与墙体区分开,大多数都是蓝窗黄门。门窗画完之后,也是给它们分别创建各自的图层,然后吧相应的线条放到对应图层里。

    4a139d1e3e97a109d2d780a7a1dcc135.png

    6.画门的时候要注意,门连接墙的时候要用弧形虚线表示,这里我们点击“弧线”工具,快捷键(ARC)进入弧线工作面板,这里他会提示我们先指定圆弧的起点,再指定圆弧的中点,最后指定圆弧的端点这样就能画出一个圆弧。虚线工具就是在线型面板,如果没有我们点击管理加载一个,线型比例这里我设置的是“10”,这个按照当前面板设置,合适就可以。窗户的话“等比例偏移”就可以了。

    097e1ceb6c96709b9d39577eb564ce63.png

    fad9df776a77decec2d8d2bd9fd11136.png

    那么到这里为止,我们就已经可以画出完整的一套平面图了,同学们学到了吗~

    下一节我们将继续探讨如何在平面图中做出各种布置图。包括家具布置图、顶面布局图、地面布置图甚至立面图等等。

    展开全文
  • 利用Excel自选图形制作室内平面图.rar,室内平面结构图反映了居室的布局和各房间的功能、面积,同时还决定了门、窗的位置。在没有专业的室内设计软件时,使用Excel也能快速绘制出排列的室内平面图
  • matlab入门教程四 ----- 绘制平面图形

    千次阅读 2017-07-09 12:34:19
    一.图形的绘制 1.绘制平面图形 1.1 绘制向量折线 x = [1, 3, 2 ,9, 0.5]; plot(x);...1.2 绘制平面曲线 %绘制 y = sin(x^2) x = -4 : 0.1 : 4; %x范围 y = sin(x.^2); %注意这里. 因为x相当于是矩阵
  • matplotlib: 绘制平面图/表格

    千次阅读 2017-12-14 16:59:00
    基本架构import matplotlib.pyplot as pltplt.figure() ... plt.show()窗口plt.figure() plt.figure(num=None, figsize=None, dpi=None, facecolor=None, edgecolor=None, frameon=True, FigureClass=""" ...
  • 基于arcgis软件,为数字化校园的构建提供了很好的参考。
  • 阐述如何从 Google Earth中下载 jpg格式的图片作为数据源,然后采用 CorelDraw软件设计、编制校园的一种方法.
  • 2020六年级数学下册4比例3比例的应用用比例尺绘制平面图精编课件新人教版
  • 2020六年级数学下册4比例3比例的应用用比例尺绘制平面图课时练习新人教版
  • python绘制3D平面图

    2022-01-04 15:09:51
    shrink=0.5, aspect=5) plt.show() SurfacePlot Axes3D.``plot_surface(X, Y, Z, *args, norm=None, vmin=None, vmax=None, lightsource=None, **kwargs)   这个函数算是比较常用的函数,用于绘制三维表面,...
  • 海文平面图制作,带安装文件、破解文件+图元编辑补丁,功能已经完整,使用一切正常,无任何限制。
  • 1、坐标定位 2、没有坐标情况下可以通过网格定位 3、地形上通过竖向标高定位 1 回答 2020-08-13 浏览:24 分类:绘图建模 回答: CAD如何绘制轮盘平面图 想要用CAD画一个轮盘的平面图,具体步骤该如何操作呢?...
  • CAD绘制建筑平面图
  • scratch编程-绘制平面图形

    千次阅读 2021-04-08 14:12:14
      中等腰三角形的角度分别为75度、75度、30度,依次按照左、右、上的顺序。   计算旋转角度的方式与上面一样:   右往上的旋转度数:180-75=105   上往左的旋转度数:180-30=150   重要补充:角度越大...
  • javascript的基本平面图API。 用法 目前,floorplan.js正在重构中。 不过,您可以看到实际的示例,只需克隆并在浏览器中运行它即可。 Floorplan.js与AMD兼容。 因此,对于所有那些Require.js粉丝来说,请全力以赴...
  • http://www.jq22.com/yanshi7677
  • CAD绘制建筑平面图[1]1.pptx

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 86,607
精华内容 34,642
关键字:

如何绘制平面图