在Canvas中绘制Geojson数据

最新推荐文章于 2023-10-18 21:26:32 发布

梅花十三儿

最新推荐文章于 2023-10-18 21:26:32 发布

阅读量462

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Android062005/article/details/129291310

版权

需求分析

在做地图开发的时候遇到一个需求，是在 canvas 中绘制 Geojson 数据

数据格式为 EPSG:4326 的 Polygon：

三维数组
每一项都是由经纬度组成的
第一个点和最后一个点相同，表示 Polygon 是闭合的

[[[109.54420471485196, 35.76192112844663],[109.54423617129702, 35.76132766033574],[109.54539219590997, 35.76155739029704],[109.54521918540507, 35.76241249100947],[109.54420471485196, 35.76192112844663],],
];

需求分析：

1.显示在 canvas 的中间
2.地图 y 轴和屏幕的 y 轴是相反的，绘制出来的 Polygon 不能和实际反过来* 屏幕的原点在左上角，地图的原点在左下角

数据处理

width 和 height 是 canvas 的宽高

将经度和纬度单独拆分出来

最低0.47元/天解锁文章

优惠劵

梅花十三儿

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在Canvas中绘制Geojson数据

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
复制链接

扫一扫

JScad2d:用于从 json 文件进行 CAD 2D 绘图的 Javascript 库

07-23

JScad2d 用于从 json 文件进行 CAD 2D 绘图的 JavaScript 库。 JSON 文件包含将参数 2D 形状绘制为矢量图像所需的所有数据。导出为 JSON 文件或 SVG 文件。截图描述绘制零件并将它们组装在装配图中。零件和装配图是从 json 文件构建的。一个特殊的编辑器允许实时绘图。注意：装配功能尚未编码！特征全参数化建模绘制任何形状（打印骨架进行调试）制作鱼片用影线填充形状绘制尺寸应用转换旋转从本地驱动器或服务器导入在本地驱动器上导出格式： JSON（原生格式） SVG 用法 API 参考 JScad2d.loadFileAsText() JScad2d.readfile(url) JScad2d.zoomandpan(value) 缩放值： zoomIn或zoomOut或reset 平移值：向左或向右或向上或向

Canvas绘制地图

qq_40289557的博客

02-22

8101

在我们的大屏可视化项目中，地图数据可视化是最常见功能。地图数据可视化目前的实现方案有很多，其中最具有代表性的莫过于使用echarts，引入一个js文件，再加上一些简单的配置，这样一个地图就展示出来了。但是作为一名优秀的前端程序员，对于很多技术，我们既要知其然，也要只其所以然，本章节以HTML5中的Canvas技术为背景，简单讲解一下地图数据可视化实现的一些思路。

参与评论您还未登录，请先登录后发表或查看评论

根据geojson 文件使用canvas 绘制经纬度范围地图

q1025387665a的博客

02-16

1689

前言：这里只处理了类型为polygon 与 multiPolygon 的feature，如果你的geometry的type 为其他需要自己手动添加处理。最终结果为生成一张1920*1080的图片。当然这个你可以任意调整。生成效果（填充描边等可自行设置）经纬度范围为：“la1”:-7.3963165283203125,“la2”:58.47581481933594,“lo1”:78.93975830078125,“lo2”:153.15325927734375, 思路由于相对于平面坐标系来说，地

HTML5-canvas

LightOn

04-16

260

canvas : 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。创建canvas：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Creat canvas</title> </head> <body> <canvas id="myc

基于geojson-vt和canvas的高性能出图

最新发布

LZUGIS

10-18

458

本文介绍基于`geojson-vt`和`canvas`，实现node端高性能出图。

使用HTML5-Canvas构建基于GeoJSON的轻量级WebGIS.pdf

02-02

使用HTML5-Canvas构建基于GeoJSON的轻量级WebGIS，使用HTML5-Canvas构建基于GeoJSON的轻量级WebGIS

H5 Canvas实现地图，结合 httpgeojson.io 可自由绘制地图.rar

10-19

HTML5 Canvas实现中国地图（可展开地级市子地图），地图是基于 Echart的

html5 canvas gis,使用HTML5 Canvas构建基于GeoJSON的轻量级WebGISThe Design of the Lightweight WebGIS Based on Ge...

weixin_35769289的博客

06-18

176

摘要：lt;span style=font-family:宋体;font-size:10pt;gt;针对传统lt;/spangt;lt;span style=font-family:Times New Roman,serif;font-size:10pt;gt;WebGISlt;/spangt;lt;span style=font-family:宋体;font-size:10pt;gt;矢量数据在...

Leaflet.CanvasMask:用画布和东西掩盖 geojson 的东西

06-15

Leaflet.CanvasMask 用画布和东西掩盖 geojson 的东西＃安装 bower install leaflet-canvasmask ＃用法 var bigRectangle = { "type" : "FeatureCollection" , "features" : [ { "type" : "Feature" , "properties" : { } , "geometry" : { "type" : "Polygon" , "coordinates" : [ [ [ - 116 , 34 ] , [ - 116 , 43 ] , [ - 81 , 43 ] , [ - 81 , 34 ] , [ - 116 , 34 ] ] ] } } ] } ; L . tileLayer . canvasMask ( { maskColor : 'rgba(0,

Geo Canvas-开源

04-27

Geocanvas项目旨在提供一组非常简单的API，以帮助开发人员在GTK / Gnome环境中创建地理参考的画布应用程序。

基于openlayers和canvas绘制海量数据的实现

01-26

基于openlayers和canvas绘制海量数据的实现

HTML5 在canvas中绘制矩形附效果图

09-28

可以使用绘图环境的矩形绘制函数来绘制矩形fillRect为绘制一个实心的矩形；strokeRect为绘制一个空心的矩形；clearRect为清除指定的矩形区域，使之完全透明，示例代码如下

HTML5 Canvas中绘制矩形实例

09-28

主要介绍了HTML5 Canvas中绘制矩形实例,本文中使用了fillRect、strokeRect、clearRect三种API,需要的朋友可以参考下

HTML5 在canvas中绘制文本附效果图

09-28

主要介绍了HTML5 在canvas中如何绘制文本，有两种方法在canvas中绘制文本strokeText与fillText，可以根据需求选择

cesium 添加geojson数据，创建白模，创建label标签，并使用canvas自定义聚合背景图片

weixin_39216318的博客

03-03

3165

// data ：geojson数据 dbcBuliding(data = this.option.geojsonData) { let _this = this // let viewer = _this.viewer; let promise = Cesium.GeoJsonDataSource.load(data, { clampToGround: true, }); promise.then(dataSource => { ...

3.透过现象看本质-webgl加载geojson

yaojindou0的博客

07-25

149

通过canvas加载geojson深入解析添加矢量数据本质

geojson 包含道路_使用HTML5 Canvas构建基于GeoJSON轻量级WebGIS.pdf

weixin_39526706的博客

12-22

429

Computer Science and Application 计算机科学与应用, 2012, 2, 189-196doi:10.4236/csa.2012.24034 Published Online October 2012 (/journal/csa.html)The Design of the Lightweight WebGIS Based on GeoJSON by*Using H...

超简单的canvas绘制地图

weixin_34387468的博客

02-24

1757

本文使用geojson数据，通过缩放和平移把地图的地理坐标系转换canvas的屏幕坐标系，然后将转换后的数据绘制到canvas上。首先要计算数据的最大最小值，遍历所有坐标点的最大最小经纬度。在这个步骤要注意坐标点是否都遍历到，因为数据中可能会有多面和洞的存在。第二步就是转换坐标系，地理坐标系转换canvas的屏幕坐标系。为了让地图能完整在页面展示，我们要有数据的最大最小...

使用canvas在图片中绘制矩形

05-26

可以使用 canvas 的 `drawRect()` 方法在图片中绘制矩形。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas绘制矩形</title> </head> <body> <img id="myImage" src="image.jpg"> <canvas id="myCanvas"></canvas> <script> // 获取图片和 canvas 元素 var image = document.getElementById('myImage'); var canvas = document.getElementById('myCanvas'); // 设置 canvas 元素的宽高和图片一致 canvas.width = image.width; canvas.height = image.height; // 获取 canvas 的 2D 上下文对象 var ctx = canvas.getContext('2d'); // 绘制图片 ctx.drawImage(image, 0, 0); // 绘制矩形 ctx.beginPath(); ctx.rect(100, 100, 200, 150); ctx.strokeStyle = 'red'; ctx.lineWidth = 5; ctx.stroke(); </script> </body> </html> ``` 在该示例中，我们首先获取了图片和 canvas 元素。然后，我们设置了 canvas 元素的宽高与图片一致，并获取了 canvas 的 2D 上下文对象。接着，我们使用 `drawImage()` 方法在 canvas 中绘制了图片。最后，我们使用 `rect()` 方法绘制了一个矩形，并使用 `stroke()` 方法渲染出来。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交