首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

OpenLayers 5绘图交互-- Draw.js:338的"n不是构造函数“

OpenLayers是一个开源的地图库,用于在Web上展示地图和地理信息。OpenLayers 5是OpenLayers的第五个主要版本,它提供了丰富的功能和工具,使开发人员能够创建交互式地图应用程序。

在OpenLayers 5中,Draw.js是一个绘图交互类,用于在地图上进行绘图操作。根据给出的问题,"n不是构造函数"是指在Draw.js的第338行出现了一个错误,表明变量n不是一个构造函数。

要解决这个问题,我们需要查看Draw.js文件的代码,并检查第338行的相关代码。根据错误信息,可能是在该行代码中使用了一个不是构造函数的变量n,导致了错误的发生。

为了给出完善且全面的答案,我们需要查看Draw.js文件的代码,并分析第338行的上下文。然而,由于没有提供Draw.js文件的具体内容,我无法给出具体的解决方案。

总结:OpenLayers 5是一个开源的地图库,用于在Web上展示地图和地理信息。Draw.js是OpenLayers 5中的一个绘图交互类。根据给出的问题,"n不是构造函数"是指在Draw.js的第338行出现了一个错误,表明变量n不是一个构造函数。要解决这个问题,我们需要查看Draw.js文件的代码,并检查第338行的相关代码。由于没有提供具体的代码内容,无法给出具体的解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

原 HTML5 网络拓扑图整合 OpenL

这么大量数据我采用是《HT图形组件设计之道(四)》中介绍getRawText函数方式,有了数据之后剩下就是呈现问题了,我们需要将HTGraphView组件与OpenLayersmap地图组件叠加在一起...position屏幕逻辑坐标信息,如果你知道投影算法也可以自己提供函数处理,但所有GIS组件都提供了类似的API函数供调用,当然这部分也没有标准化,不同GIS组件需要调用API都有差异,但基本原理是一致...细心同学会想到转换是双向,有可能用户需要拖动图元节点改变其经纬度信息,这时候我们就需要另外一个方向函数,即根据屏幕逻辑坐标转换成当前坐标对应经纬度,在OpenLayers中我们通过map.getLonLatFromPixel...显示搞定后剩下就是交互问题了,HT自己有套交互体系,OpenLayers也需要地图漫游和缩放交互,两者如何结合呢?...();停止事件传播,这样map地图就不会响应,这时候HT接管了交互,如果没有选中图元则map接管地图操作交互

1.8K60

HT for Web整合OpenLayers实现GIS地图应用

这么大量数据我采用是《HT图形组件设计之道(四)》中介绍getRawText函数方式,有了数据之后剩下就是呈现问题了,我们需要将HTGraphView组件与OpenLayersmap地图组件叠加在一起...position屏幕逻辑坐标信息,如果你知道投影算法也可以自己提供函数处理,但所有GIS组件都提供了类似的API函数供调用,当然这部分也没有标准化,不同GIS组件需要调用API都有差异,但基本原理是一致...细心同学会想到转换是双向,有可能用户需要拖动图元节点改变其经纬度信息,这时候我们就需要另外一个方向函数,即根据屏幕逻辑坐标转换成当前坐标对应经纬度,在OpenLayers中我们通过map.getLonLatFromPixel...显示搞定后剩下就是交互问题了,HT自己有套交互体系,OpenLayers也需要地图漫游和缩放交互,两者如何结合呢?...();停止事件传播,这样map地图就不会响应,这时候HT接管了交互,如果没有选中图元则map接管地图操作交互

1.9K80
  • HT for Web整合OpenLayers实现GIS地图应用

    这么大量数据我采用是《HT图形组件设计之道(四)》中介绍getRawText函数方式,有了数据之后剩下就是呈现问题了,我们需要将HTGraphView组件与OpenLayersmap地图组件叠加在一起...position屏幕逻辑坐标信息,如果你知道投影算法也可以自己提供函数处理,但所有GIS组件都提供了类似的API函数供调用,当然这部分也没有标准化,不同GIS组件需要调用API都有差异,但基本原理是一致...细心同学会想到转换是双向,有可能用户需要拖动图元节点改变其经纬度信息,这时候我们就需要另外一个方向函数,即根据屏幕逻辑坐标转换成当前坐标对应经纬度,在OpenLayers中我们通过map.getLonLatFromPixel...显示搞定后剩下就是交互问题了,HT自己有套交互体系,OpenLayers也需要地图漫游和缩放交互,两者如何结合呢?...();停止事件传播,这样map地图就不会响应,这时候HT接管了交互,如果没有选中图元则map接管地图操作交互

    1.6K11

    2018年全球最受欢迎30款数据可视化工具

    Power BI对个人用户是免费,团队用户版也很便宜,单个用户每月只收取9.9美元。 5) QlikView ?...Chart.js是一个开源JavaScript绘图库,为设计人员和开发人员提供8个可定制动态可视化数据。Chart.js最独特品质就是可以用HTML5 Canvas来绘制响应性很强图表。...Ember Charts是一个开源函数库。Ember Charts专注于图形交互。它有很强错误处理能力,当遇到错误数据时,系统也不会崩溃。 21) Chartist.js ?...单个用户可以使用ZingChart免费版本,但其导出到图表上会有水印。 地图 当开发人员希望在网站上呈现交互式地图时,JavaScript中地图函数库是必不可少。 25) Leaflet ?...OpenLayers是用于创建交互式web地图开源客户端JavaScript库,支持几乎任何浏览器。OpenLayers不需要特殊服务器端软件或任何配置,无需下载任何东西就可以使用。

    4.4K20

    基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统

    前言 通过结合 HTML5OpenLayers 可以组合成非常棒一个电信地图网络拓扑图应用,形成效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能够涉及一款应用...5e1105!12m4!1e68!2m2!1sset!2sRoadmap!...js 库,有着各自交互系统和坐标系,首先我们将某些我们需要获取在 HT 上做交互事件并停止事件传播到 OpenLayers 上: // 拖拽 node 时不移动地图 var stopGraphPropagation...至于最后面的 CreateEdgeInteractor 则是继承于 ht.graph.Interactor 交互创建连线交互器。这里细细地分析一下这个部分,以后就可以修改或者自定义新交互器。...下一次绘制不可能连着上一次继续绘制,所以我们得在结束调用这个类时候将之前绘制点都清除: tearDown: function () {// CreateEdgeInteractor 对象结束调用时候调用函数

    3.8K60

    【干货】数据可视化分析工具大集合

    Raphael Raphael是创建图表和图形JavaScript库,与其他库最大不同是输出格式仅限SVG和VML. ? ? R R语言是主要用于统计分析、绘图语言和操作环境。...Leaflet Leaflet是一个开源JavaScript库,用来开发移动友好地交互地图。 ? ? Openlayers Openlayers可能是所有地图库中可靠性最高一个。...Anychart Anychart是一个灵活基于Flash/JavaScript(HTML5)图表解决方案、跨浏览器、跨平台。除了图表功能外,它还有一款收费交互式图表和仪表。 ? ?...Highchart.js Highchart.js是单纯由JavaScript所写图表资料库,提供简单方法来增加互动性图表来表达你网站或网站应用程式。目前它能支援线图、样条函数图。 ? ?...你可以将实社会化数据或者GeoCommons保存5万份开源数据在地图上可视化,创造带交互可视化分析作品,并将作品嵌入网站、博客或分享到社交网络上。 ?

    2.5K50

    可视化分析工具大集合,让数据美如画

    Raphael Raphael是创建图表和图形JavaScript库,与其他库最大不同是输出格式仅限SVG和VML. ? ? R R语言是主要用于统计分析、绘图语言和操作环境。...Leaflet Leaflet是一个开源JavaScript库,用来开发移动友好地交互地图。 ? ? Openlayers Openlayers可能是所有地图库中可靠性最高一个。...Anychart Anychart是一个灵活基于Flash/JavaScript(HTML5)图表解决方案、跨浏览器、跨平台。除了图表功能外,它还有一款收费交互式图表和仪表。 ? ?...Highchart.js Highchart.js是单纯由JavaScript所写图表资料库,提供简单方法来增加互动性图表来表达你网站或网站应用程式。目前它能支援线图、样条函数图。 ? ?...你可以将实社会化数据或者GeoCommons保存5万份开源数据在地图上可视化,创造带交互可视化分析作品,并将作品嵌入网站、博客或分享到社交网络上。 ?

    2.4K90

    OpenLayers入门(二)

    前言 好久不见,距离OpenLayers入门第一篇已经过了很久,为什么迟迟没有后续呢,主要有两个原因,一是因为近期项目里使用地图部分比较少,二是因为很多时候即使功能做出来了,但是还是不能完全理解,不是很明白东西除了贴代码之外也写不了啥...虽然是基于v3版本介绍,很多api可能变了,但还是值得一看,除了OpenLayers本身介绍,还会有一些地理基础知识分享,这种相对全面的中文教程真的很稀有,且看且珍惜。...添加阴影效果 OpenLayers样式对象并不支持直接设置阴影效果,所以需要获取到canvas绘图上下文来自行添加,原理是监听图层prerender(在一个图层渲染前触发)和postrender(...在一个图层渲染后触发)事件,修改canvas`上下文绘图样式,对整个图层都是有影响,所以最好把要添加阴影要素放到一个单独图层里: import { Vector as VectorSource...OpenLayers是不直接支持这种带边框线段,所以一种简单方法是绘制两条线段叠加起来,上面的宽度比下面的低,就有边框效果了: import Polygon from 'ol/geom/Polygon

    2.7K51

    数据可视化分析工具大集合

    Raphael Raphael是创建图表和图形JavaScript库,与其他库最大不同是输出格式仅限SVG和VML. ? R R语言是主要用于统计分析、绘图语言和操作环境。...Leaflet Leaflet是一个开源JavaScript库,用来开发移动友好地交互地图。 ? Openlayers Openlayers可能是所有地图库中可靠性最高一个。...Anychart Anychart是一个灵活基于Flash/JavaScript(HTML5)图表解决方案、跨浏览器、跨平台。除了图表功能外,它还有一款收费交互式图表和仪表。 ?...Highchart.js Highchart.js是单纯由JavaScript所写图表资料库,提供简单方法来增加互动性图表来表达你网站或网站应用程式。目前它能支援线图、样条函数图。 ?...你可以将实社会化数据或者GeoCommons保存5万份开源数据在地图上可视化,创造带交互可视化分析作品,并将作品嵌入网站、博客或分享到社交网络上。 ? 来源:软件定义世界(SDX)

    2.6K50

    55款大数据分析神器:你还在用Excel?

    在大数据时代,更需要强有力工具通过使数据有意义方式实现数据可视化,还有数据交互性;我们还需要跨学科团队,而不是单个数据科学家、设计师或数据分析员;我们更需要重新思考我们所知道数据可视化,图表和图形还只能在一个或两个维度上传递信息...但是D3能够提供大量线性图和条形图之外复杂图表样式,例如Voronoi图、树形图、圆形集群和单词云等。 04 R R语言是主要用于统计分析、绘图语言和操作环境。...08 Openlayers Openlayers可能是所有地图库中可靠性最高一个。虽然文档注释并不完善。...34 Anychart Anychart是一个灵活基于Flash/JavaScript(HTML5)图表解决方案、跨浏览器、跨平台。除了图表功能外,它还有一款收费交互式图表和仪表。...你可以将实社会化数据或者GeoCommons保存5万份开源数据在地图上可视化,创造带交互可视化分析作品,并将作品嵌入网站、博客或分享到社交网络上。

    1.2K20

    55款大数据分析神器:你还在用Excel?

    在大数据时代,更需要强有力工具通过使数据有意义方式实现数据可视化,还有数据交互性;我们还需要跨学科团队,而不是单个数据科学家、设计师或数据分析员;我们更需要重新思考我们所知道数据可视化,图表和图形还只能在一个或两个维度上传递信息...但是D3能够提供大量线性图和条形图之外复杂图表样式,例如Voronoi图、树形图、圆形集群和单词云等。 04 R R语言是主要用于统计分析、绘图语言和操作环境。...08 Openlayers Openlayers可能是所有地图库中可靠性最高一个。虽然文档注释并不完善。...34 Anychart Anychart是一个灵活基于Flash/JavaScript(HTML5)图表解决方案、跨浏览器、跨平台。除了图表功能外,它还有一款收费交互式图表和仪表。...你可以将实社会化数据或者GeoCommons保存5万份开源数据在地图上可视化,创造带交互可视化分析作品,并将作品嵌入网站、博客或分享到社交网络上。

    1.1K40

    R语言画图时常见问题

    left, top, right 长度,默认距离是 c(5, 4, 4, 2) + 0.1。...R中绘图命令可以分为高水平(High level) 、 低水平 (Low level) 和交互式(Interactive)三种绘图命令。...简要地说,高水平绘图命令可以在图形设备上绘制新图;低水平绘图命令将在已经存在图形上添加更多绘图信息,如点、线、多边形等;使用交互绘图命令创建绘图,可以使用如鼠标这类定点装置来添加或提取绘图信息。...在已有图形上添加信息当然要使用 低水平绘图命令。 4 如何加图例? 绘制图形后,使用 legend函数,help(“legend”) 5 R 如何做双坐标图?...11 在 word 里如何使用 R 生成高质量绘图? 矢量绘图效果是最好,比如 eps、pdf,而不是位图(png、jpg、tiff等)。

    4.7K20

    基于高德地图开发 Web 应用

    很多服务型 API,如路线规划、距离计算都是要调用 HTTP 接口,而不是和类库直接发起了,甚至有些参数还需要用户手动进行 URL 编码,使用 encodeURI。...基本开发步骤,开始实现自己地图应用 为了照顾一些初接触前端开发者,我这里增加了一章节 5 分钟教程。便于大家快速体验效果。...事件:地图 JSAPI 具有完备事件体系,在 2.0 版本中所有类型实例均使用 on/off 方法进行时间绑定和移除 地图:地图对象类,封装了地图属性设置、图层变更、事件交互等接口类。...cbk 就是 SDK 加载完成后,需要执行函数。 下面这段代码就是显示上海地铁图: <!...index.html 中直接引入,也可以在组件里引入,但看起来都不是很规范。

    4.6K30

    【C++】基础:开源GIS平台开发基础(MapServer+QGIS+PostGIS+OpenLayers

    OGR:基于GDAL地理空间数据格式转换库。 4. MapServer或GeoServer:用于发布WebGIS服务开源GIS服务器。 5....QGIS项目开始于2002年5月,是基于跨平台图形工具Qt软件包,采用C++语言开发一个GIS软件。...PostGIS是PostgreSQL一个插件,通过向PostgreSQL添加对空间数据类型、空间索引和空间函数支持,将PostgreSQL数据库管理系统转换为空间数据库。...自GIS软件被首次开发以来,Shapefile(和其他文件格式诸如Esri File Geodatabase、GeoPackage)一直是空间数据存储和交互标准数据格式。...://gitee.com/shtao_056/vue-openlayers Openlayers可以访问服务端(如MapServer、QGISServer)发布数据,最终实现地图编辑、存储、发布和显示功能

    17910

    百度地图与HT for Web结合GIS网络拓扑应用

    在《HT for Web整合OpenLayers实现GIS地图应用》篇中介绍了HT for Web与OpenLayers整合,不少朋友反应国内用得比较多还是百度地图,虽然HT整合百度地图原理与OpenLayers...插入map位置与OpenLayers也不一样,通过mapDiv.firstChild.firstChild.appendChild(view);插入,zIndex这些属性都还好不需要设置。...坐标转换方面从经纬度转换成平面坐标是map.pointToPixel函数,通过node.setPosition(map.pointToPixel(new BMap.Point(lon, lat)));可设置...其他方面细节还由监听map缩放等操作对拓扑图元重新定位,以及监听交互决定GraphView还是Map进行控制等都与以前文章类似,这里就不再介绍了,以下为操作视频、抓图和源代码供大家参考,这样结合可完美的将百度地图丰富地图数据信息...}, false);                  var color = randomColor(), province = null; lines = china.split('\n'

    1.5K40

    Python原生爬虫案例

    (闭合标签),比如包含姓名+人气标签 上述即尽量选父标签,不选兄弟标签,为了易于构造正则提取内容 注意: 构造正则不是难点,难点是应对反爬虫措施 整体书写规范 每行代码不要过长...imageview/4/0/w/338/h/190/blur/1" src="//a.msstatic.com/huya/main/assets/img/default/338x190.jpg" onerror...sorted(iterable, cmp=None, key=None, reverse=False) 注意: key = 函数名,此函数应该返回排序比较值 cmp = 函数名,此函数可以重写排序规则...跳到下一个断点 F5 调到函数内部 F11 例如在 html = tmp.read() 处打断点 在当前断点处,悬停鼠标会显示变量值,也可以在vscode...借助构造函数__init__来对类进行带参数实例化: 代码: class Spider(): ''' This is

    61130

    【收藏】55 款可视化分析工具,优秀数据分析师必备!

    一款好工具可以让你事半功倍,尤其是在大数据时代,更需要强有力工具通过使数据有意义方式实现数据可视化,还有数据交互性;我们还需要跨学科团队,而不是单个数据科学家、设计师或数据分析员;我们更需要重新思考我们所知道数据可视化...但是D3能够提供大量线性图和条形图之外复杂图表样式,例如Voronoi图、树形图、圆形集群和单词云等。 四、R R语言是主要用于统计分析、绘图语言和操作环境。...八、Openlayers Openlayers可能是所有地图库中可靠性最高一个。虽然文档注释并不完善。...三十四、Anychart Anychart是一个灵活基于Flash/JavaScript(HTML5)图表解决方案、跨浏览器、跨平台。除了图表功能外,它还有一款收费交互式图表和仪表。...你可以将实社会化数据或者GeoCommons保存5万份开源数据在地图上可视化,创造带交互可视化分析作品,并将作品嵌入网站、博客或分享到社交网络上。

    2.4K50

    D3、openlayers一次尝试

    近期尝试了一个webgl相关内容,有些小激动,及时分享一下我测试示例,效果如下: 此示例分从业务角度分为两部分,一个部分为d3展示柱图,另一部分则为用openlayers展示地图。...而其难点却在界面的交互效果。实现内容翻面。 一、翻面效果实现 此效果看似神奇,理解清楚原理后也还是很简单。...div父级参照,在现代浏览上此处可以不加入3d变换属性,而Ie则需要加入。...city.js:城市名称数据字典 adapter/d3.js:用于将后台数据转换为d3可用数据格式 adapter/ol.js:用于将后台数据转换为openlayers可用数据格式 adapter...AdapterProvider.type.ol); this.d3.render(d3Data); this.ol.render(olData); }); } } 在构造函数中对存储器

    1.9K70

    50款大数据分析工具

    ❖ Visual.ly:如果你需要制作信息图而不仅仅是数据可视化,Visual.ly是最流行一个选择。 ❖ R:R语言是主要用于统计分析、绘图语言和操作环境。...❖ Leaflet:Leaflet是一个开源JavaScript库,用来开发移动友好地交互地图。 ❖ OpenlayersOpenlayers可能是所有地图库中可靠性最高一个。...,用来创建任意类型SVG交互式图形,可生成包括线、矩形、多边形、椭圆、弧线等图形。...Anychart: Anychart是一个灵活基于Flash/JavaScript(HTML5)图表解决方案、跨浏览器、跨平台。...它可以把数据(如Google Spreadsheet表单)转化为交互地图应用,并在网上分享。 ❖ Sigma.js:Sigma.js是一个开源轻量级库,用来显示交互静态和动态图表。

    3.5K20
    领券