二维Web应用开发之空间对象绘制及显示

最新推荐文章于 2022-12-05 10:30:21 发布
最新推荐文章于 2022-12-05 10:30:21 发布
阅读量484 收藏 2
点赞数
分类专栏： 超图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bus_lupe/article/details/108694127
版权

显示原理

获取/创建矢量要素→设置矢量要素显示风格→加载矢量要素对象到图层
在这里插入图片描述

添加方法

在这里插入图片描述

点对象

  • Marker
    L.marker([lat, lng]).addTo(map)
    通过设置Icon的属性信息，规定点对象的风格样式，例如图片来源、大小等
var myIcon = L.icon({
	// 点图标图片来源
	iconUrl: 'my-icon.png',
	// 图标的大小
	iconSize: [38, 95],
})
L.marker([lat, lng], {icon: myIcon}).addTo(map)

在这里插入图片描述
在这里插入图片描述
https://leafletjs.com/reference-1.6.0.html#marker
在这里插入图片描述
在这里插入图片描述
本地代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="dist/leaflet/include-leaflet.js"></script>
	</head>
	<body>
		<div id="map" style="position: absolute; top: 0; left: 0;width: 100%;height: 100%;"></div>
		<script type="text/javascript">
			var map
			var url = "http://localhost:8090/iserver/services/map-world/rest/maps/World"
			map = L.map("map", {
				crs: L.CRS.EPSG4326,
				center: [0, 0],
				maxZoom: 18,
				zoom: 1
			})
			L.supermap.tiledMapLayer(url).addTo(map)
			L.marker([50.5, 30.5]).addTo(map)
		</script>
	</body>
</html>

本地代码效果
在这里插入图片描述

线对象

  • 现对象的显示效果，即Polyline在地图上的呈现
    依据线的折点经纬度位置坐标信息进行创建，并将其叠加到map中
    显示风格是通过设置Polyline的参数，例如color、weight、opacity等
// 根据线的端点经纬度坐标创建线
var latlngs = [
	[25, 102],
	[40, 116]
]
// 设置线条的颜色，将线叠加到map上面
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map)

在这里插入图片描述

在这里插入图片描述
https://leafletjs.com/reference-1.6.0.html#polyline
在这里插入图片描述
在这里插入图片描述
本地代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="dist/leaflet/include-leaflet.js"></script>
	</head>
	<body>
		<div id="map" style="position: absolute; top: 0; left: 0;width: 100%;height: 100%;"></div>
		<script type="text/javascript">
			var map
			var url = "http://localhost:8090/iserver/services/map-world/rest/maps/World"
			map = L.map("map", {
				crs: L.CRS.EPSG4326,
				center: [0, 0],
				maxZoom: 18,
				zoom: 1
			})
			L.supermap.tiledMapLayer(url).addTo(map)
			var latlngs = [
				[45.51, -122.68],
				[37.77, -122.43],
				[34.04, -118.2]
			]
			var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map)
		</script>
	</body>
</html>

本地效果
在这里插入图片描述

面对象

  • 面对象的显示效果，即Polygon在地图上的呈现
    依据面的边折点经纬度位置坐标系进行创建，并将其叠加到map中
    面对象的风格通过设置path的属性进行修改，例如color、opacity、fill、fillColor等

// 根据面的边折点经纬度坐标创建
var polygon = L.polygon([[0, 20], [-30, 20], [-10, 50], [0, 20]], {color: 'red'})
// 将面对象叠加到map上面
polygon.addTo(map)

在这里插入图片描述
在这里插入图片描述
https://leafletjs.com/reference-1.6.0.html#polygon
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
本地代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="dist/leaflet/include-leaflet.js"></script>
	</head>
	<body>
		<div id="map" style="position: absolute; top: 0; left: 0;width: 100%;height: 100%;"></div>
		<script type="text/javascript">
			var map
			var url = "http://localhost:8090/iserver/services/map-world/rest/maps/World"
			map = L.map("map", {
				crs: L.CRS.EPSG4326,
				center: [0, 0],
				maxZoom: 18,
				zoom: 1
			})
			L.supermap.tiledMapLayer(url).addTo(map)
			
			var latlngs = [
				[37, -109.05],
				[41, -109.03],
				[41, -102.05],
				[37, -102.04]
			]
			var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map)
		</script>
	</body>
</html>

本地效果
在这里插入图片描述

属性信息显示

  • 气泡窗口主要用于显示数据信息

  • 气泡窗口主要接口
    实例化L.popup
    添加气泡popup.openOn(map)
    ****注意添加气泡是openOn不再是addTo

  • 向需要弹窗的对象添加绑定
    添加弹窗*.bindPopup(DOM元素字符串)
    展示弹窗openPopup()

// 绑定气泡显示属性内容
L.geoJSON.bindPopup("popupContent").openPopup()

在这里插入图片描述
https://iclient.supermap.io/examples/leaflet/editor.html#01_measure_distance
在这里插入图片描述
本地代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="dist/leaflet/include-leaflet.js"></script>
	</head>
	<body>
		<div id="map" style="position: absolute; top: 0; left: 0;width: 100%;height: 100%;"></div>
		<script type="text/javascript">
			var map
			var resultLayer
			var url = "http://localhost:8090/iserver/services/map-world/rest/maps/World"
			map = L.map("map", {
				preferCanvas: true,
				crs: L.CRS.EPSG4326,
				center: [34, 108],
				maxZoom: 18,
				zoom: 3
			})
			L.supermap.tiledMapLayer(url).addTo(map)
			resultLayer = L.featureGroup().addTo(map)
			measureDistance()
			
			function measureDistance () {
				var polyLine = L.polyline([
					[25, 102],
					[40, 116]
				],{
					color: 'red',
				})
				
				var marker1 = L.marker([25, 102])
				var marker2 = L.marker([40, 116])
				resultLayer.addLayer(polyLine)
				resultLayer.addLayer(marker1)
				resultLayer.addLayer(marker2)
				
				var distanceMeasureParam = new SuperMap.MeasureParameters(polyLine)
				L.supermap
					.measureService(url)
					.measureDistance(distanceMeasureParam, function (serviceResult) {
						var content = '距离' + "：" + serviceResult.result.distance + '米'
						marker1.bindPopup(content).openPopup(marker1.getLatLng())
					})
			}
		</script>
	</body>
</html>

本地效果
在这里插入图片描述

交互式绘制对象

在这里插入图片描述

  • Leaflet的Draw插件
    include=“leaflet.draw” 
 <script include="leaflet.draw" src="dist/leaflet/include-leaflet.js"></script>

Handler：如L.Draw.Polygon(map)
空间启用：handler.enable()
添加监听：map.on(L.Draw.Event.CREATED, function (e) {})

var editableLayers = new L.FeatureGroup() // 创建矢量图层
editableLayers.addTo(map) // 添加到当前地图
var handler = new L.Draw.Polygon(map)
handler.enable() // 启动控件
map.on(L.Draw.Event.CREATED, function (e) { // 添加监听事件
	editableLayers.addLayer(e.layer)
})
坐标转换
  • Leaflet开发，叠加点线面对象仅支持经纬度
  • Leaflet开发，可视化展示仅支持经纬度

非经纬度数据需要用到坐标转换L.Util.transform
在这里插入图片描述

实例
  • 绘制多边形，显示查询对象
  • 数据：China(EPSG:3857)
  • 查询对象：各个省份的飞机场的位置
  • 主要接口：
    L.Draw.Polygon
    map.on(L.Draw.Event.CREATED, function (e) {})
    L.supermap.queryService(url).queryByGeometry
实现代码
  • 创建客户端矢量图层
var editableLayers = new L.featureGroup()
editableLayers.addTo(map)
  • 启用控件，开启监听事件
var handler = new L.Draw.Polygon(map) // 实例化绘制的控件Polygon
handler.enable()
map.on(L.Draw.Event.CREATED, function (e) {
	editableLayers.addLayer(e.layer)
})
  • 绘制结果进行坐标转换，几何查询
// 坐标转换
var geo = L.Util.transform(e.layer, L.CRS.EPSG4326, L.CRS.EPSG3857)
// 几何查询
var param = new SuperMap.QueryByGeometryParameters({
	queryParams: {name: "Airport_pt@China.1"},
	geometry: geo
})
L.supermap.queryService(url)
	.queryByGeometry(param, function (serviceResult) {})
  • 再次坐标转换，与leaflet叠加显示
var result = serviceResult.result
// 坐标转换，与leaflet叠加
var features = L.Util.transform(result.recordsets[0].features, L.CRS.EPSG3857, L.CRS.EPSG4326)
resultLayer = L.geoJSON(features).addTo(map)

本机代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script include="leaflet.draw" src="dist/leaflet/include-leaflet.js"></script>
	</head>
	<body style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;">
		<input type="button" name="" id="" value="geomery" onclick="geoQuery()" />
		<div id="map" style="width: 100%;height: 100%;"></div>
		<script type="text/javascript">
			// 获取地图，添加到窗口
			var map
			var resultLayer
			var url = "http://localhost:8090/iserver/services/map-china400/rest/maps/China"
			map = L.map('map', {
				crs: L.CRS.EPSG3857,
				center: [40, 118],
				maxZoom: 18,
				zoom: 2
			})
			L.supermap.tiledMapLayer(url).addTo(map)
			
			// 创建矢量图层
			var editableLayers = new L.FeatureGroup()
			editableLayers.addTo(map)
			function geoQuery() {
				// 清空矢量图层
				editableLayers.clearLayers()
				// 创建绘制控件并启用
				var handler = new L.Draw.Polygon(map);
				handler.enable();
				// 开启监听事件
				map.on(L.Draw.Event.CREATED, function (e) {
					editableLayers.addLayer(e.layer)
					// 坐标转换，与服务器端坐标系一致
					var geo = L.Util.transform(e.layer, L.CRS.EPSG4326, L.CRS.EPSG3857)
					
					// 集合查询
					var param = new SuperMap.QueryByGeometryParameters({
						queryParams: {name: 'Airport_pt@China.1'},
						geometry: geo
					})
					L.supermap
						.queryService(url)
						.queryByGeometry(param, function (serviceResult) {
							var result = serviceResult.result
							// 再次进行坐标转换，转换成4325坐标系，与leaflet叠加
							var  features = L.Util.transform(result.recordsets[0].features, L.CRS.EPSG3857, L.CRS.EPSG4326)
							resultLayer = L.geoJSON(features).addTo(map)
						})
				})
			}
		</script>
	</body>
</html>
  • 交互式绘制操作效果

在这里插入图片描述

bus_lupe
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webgl坐标转换_WebGL笔记_绘制流程以及三维坐标变换(一)
weixin_39744606的博客
02-22 378
WebGL绘制一个模型的步骤：1、获取模型的顶点坐标2、图元装配(即画相应的三角形面片)3、光栅化(生成片元，绘制每个三角片上的像素点，染色、纹理映射都在此步)顶点坐标处理现实中最常见的三维模型，都是通过3D建模软件导出的文件，文件内容通常包括，模型的顶点格式，模型的顶点坐标，以及定点之间的映射关系。通常要经过以下过程，才能将模型文件所描述的三维模型绘制到二维的屏幕上。相关坐标作一新求抖直微圈系介...
Twojs是一个二维的绘图API用于较新的Web浏览器
08-11
Two.js 是一个二维的绘图 API，用于较新的 Web 浏览器，可基于不同上下文绘制，包括 svg、canvas 和 webgl。
two.js：面向Web的渲染器不可知的二维绘图api
02-03
Two.js 适用于现代浏览器的二维绘图API。 它与渲染器无关，可以使同一api在多个上下文中渲染：webgl，canvas2d和svg。 ••••• 用法 下载最新的并将其包含在html中。 < script src =" js/two.min.js " > </ script > 也可以通过 ，Node Package Manager安装： npm install -- save two . js 另外，请参阅。 这是样板html，以便在two.js中绘制旋转的矩形： <!doctype html > < html > < head > < meta charset =" utf-8 " > < script src =" js/two.min.js " > </ script > </ head > < body > < script > var two = new Two ( { fullscreen : true , autostart : true } ) . ap
使用HTML5 canvan进行Web绘图
weixin_34253126的博客
03-21 404
参考：http://www.html5china.com/HTML5features/canvas/ 开始： <canvasid="canvas"width="300"height="200">Fallbackcontent,incasethebrowserdoesnotsupportCanvas.</canvas&g...
《Leaflet 进阶知识点》- Leaflet.draw 交互绘制
前端技术
08-16 9542
一、安装 使用插件Leaflet.draw（GitHub地址、install） npm i leaflet-draw 二、 Vue 中引入 <script> 中引入 js import 'leaflet-draw' <style> 中引入 css @import '~leaflet-draw/dist/leaflet.draw.css' 三、初始化 //初始化绘制控件 this.drawControl = new L.Control.Draw({ ..
web3D构建三维房间空间（three.js）
12-04
本项目以"web3D构建三维房间空间（three.js）"为主题，利用JavaScript库three.js实现了从二维平面图到三维空间的转换，让用户能够互动地查看、操作虚拟房间。 首先，我们需要理解Web3D的基本概念。Web3D是一种在...
SuperMap Objects.Net二维地图上绘制场景的飞行路线
12-08
综上所述，实现"SuperMap Objects.Net二维地图上绘制场景的飞行路线"这一范例，开发者需要掌握SuperMap Objects.Net的API用法，理解二维地图的显示原理，以及如何通过编程手段实现地图动画效果。同时，还需要具备...
SuperMap iClient3D 8C for Plugin绘制二维矢量圆
12-15
在SuperMap iClient3D 8C for Plugin中，绘制二维矢量圆是一项重要的功能，它使得用户可以在三维场景中创建并展示具有圆形轮廓的二维图形。这项技术广泛应用于地理信息系统（GIS）和地图可视化中，例如标记点、区域...
JavaScript中的快速静态二维空间索引
08-12
在JavaScript开发中，静态二维空间索引是一种优化技术，用于高效地管理和检索二维坐标系统中的对象，例如点或矩形。这种索引方法通常应用于游戏开发、地理信息系统、图形渲染等场景，它允许我们快速查询特定区域内...
动态绘制二维统计图表
05-12
在IT领域，动态绘制二维统计图表是一项常见的任务，特别是在数据分析、可视化和监控系统中。C#作为.NET框架的主要编程语言，提供了丰富的库和API来帮助开发者实现这一目标。本篇文章将深入探讨如何利用C# Graph API...
ArcGIS js api 4+版本 draw measure legend tooltip 标注点 贝塞尔曲线扩展
07-29
此文件是基于arcgis4.3做的一些扩展
Leaflet.UTM:用于L.LatLng的简单UTM（WGS84）方法
05-03
单张 L.LatLng的简单 （WGS84）方法。 用Leaflet 0.7、1.0.3、1.1.0、1.2.0、1.3.1、1.6.0和1.7.1进行测试。 基于Chuck Taylorjavascript代码。 安装 使用npm进行browserify npm安装leaflet.utm（和require（'leaflet.utm'）），或仅下载L.LatLng.UTM.js并在html中为其添加脚本标签。 用法 LatLng-> UTM 在任何L.LatLng对象中调用方法utm()以获取UTM坐标对象。 方法toString会将其无缝转换为字符串。 例如，要在标记中创建弹出窗口： marker . bindPopup ( 'UTM: ' + marker . getLatLng ( ) . utm ( ) ) ; 带有文本UTM: 467486.3, 4101149.3,
Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
BADAO_LIUMANG_QIZHI的博客
04-07 5318
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122466785 上面也使用了draw插件实现要素编辑，这里进行补充。 插件地址： https://github.com/Leaflet/Leaflet.draw 下载插件，引入draw插件所需的js、css和image ​ <link rel="stylesheet" href="ht...
java如何添加自定义的图片_向Leaflet Draw工具栏添加自定义图标
weixin_39517520的博客
02-24 341
大家好 . 我正在尝试为传单Draw工具栏添加自定义图标 . 但我似乎无法弄清楚如何 .如图所示，我有两个标记 . 目标是更改工具栏中的一个图标 . 我的代码如下：L.DrawToolbar.include({getModeHandlers: function (map) {return [{enabled: true,handler: new L.Draw.Polyline(map, { met...
java删除按钮_leaflet-draw删除按钮删除“全部清除”操作
weixin_42357837的博客
02-21 584
编辑工具栏测试按钮处理程序上是否存在 removeAllLayers 成员 . 因此，禁用清除所有操作的简单但可能很重的方法是在 L.EditToolbar.Delete 模块上进行核心 removeAllLayers ：L.EditToolbar.Delete.include({removeAllLayers: false});new L.Control.Draw({edit: {feature...
Leaflet中使用draw绘制时获取图形的几何信息
BADAO_LIUMANG_QIZHI的博客
04-07 2321
场景 Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124009721 上面在使用draw进行绘制几何图形的基础上，怎样在绘制结束后获取图形的几何信息。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、
各种降维方法在2维空间上的可视化
liguandong
11-18 2252
利用digits手写数据集实现降维方法在2维空间上的可视化表达。 from time import time import numpy as np import matplotlib.pyplot as plt from matplotlib import offsetbox from sklearn import (manifold, datasets, decomposition, ense
SuperMap iClient for Leaflet对EPSG:4509图加载&滑动查询
最新发布
SuperMap技术控
12-05 725
SuperMap iClient for Leaflet对EPSG:4509图加载&滑动查询
leaflet使用draw插件测量距离和面积
weixin_44523653的博客
11-18 5961
官网在线例子 draw插件在线预览 我的测量预览图： 按照文档给出的例子，先引入这个插件，采用import形式 import "leaflet-draw"; import "leaflet-draw/dist/leaflet.draw.css"; 初始化使用插件 //添加画图的提示信息 L.drawLocal.draw.handlers.polyline = { tooltip: { start: "点击地图开始画线", cont: "继续选择",
光信息处理技术及应用二维不变线性系统.pptx
05-11
"该资源是关于光信息处理技术及其在二维不变线性系统中的应用的学术资料。主要探讨了二维不变线性系统的概念、输入输出关系、卷积积分原理、传递函数以及空间频率的含义。" 二维不变线性系统是光信息处理中的核心...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值