openlayers 在地图上绘制矩形框，非鼠标框选

  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title data-i18n="resources.title_tiledMapLayer3857"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="width: 100%; height: 100%"></div>
<script type="text/javascript">
      var map,
        url =
          (window.isLocal ? window.server : 'https://iserver.supermap.io') +
          '/iserver/services/map-china400/rest/maps/China';
      // 方式一：1.调用 ol.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
    //   ol.supermap.initMap(url, {
    //     mapOptions: {
    //       controls: ol.control
    //         .defaults({ attributionOptions: { collapsed: false } })
    //         .extend([new ol.supermap.control.Logo()])
    //     }
    //   });
      
      /* 方式二：1.调用 ol.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
                2.调用 ol.supermap.viewOptionsFromMapJSON 获取地图视图参数
                3.调用 ol.Map 创建地图
                4.调用 ol.layer.Tile 与 ol.source.TileSuperMapRest 创建底图
      */
      new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
        const mapObj = serviceResult.result;
        map = new ol.Map({
          target: 'map',
          controls: ol.control
            .defaults({ attributionOptions: { collapsed: false } })
            .extend([new ol.supermap.control.Logo()]),
          view: new ol.View(ol.supermap.viewOptionsFromMapJSON(mapObj))
        });
        var layer = new ol.layer.Tile({
          source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapObj, true))
        });
        map.addLayer(layer);
        map.addControl(new ol.supermap.control.ScaleLine());
        
        
        var coords = [[110,20],[112,22],[114,25],[116,28],[111,40],[110,20]]; // 多边形坐标数组
        
        var vectorLayer = new ol.layer.Vector();
        var vectorSource = new ol.source.Vector();
        var polygon = new ol.geom.Polygon([coords]); // 多边形形构造方法
        polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857')); // 4326 对应的是经纬度坐标系，3857叫墨卡托？反正不是经纬度，需要做个转换
        vectorSource.addFeature(new ol.Feature(polygon)); // 形成Feature，并添加到source
        vectorLayer.setSource(vectorSource); // layer设置source
        map.addLayer(vectorLayer); // 将layer加入地图
      });
    </script>
</body>
</html>

谁知道这里是为什么又套了一层数组？
var polygon = new ol.geom.Polygon([coords]); // 矩形构造方法，不知道这里为啥又套了一层数组，去掉这层数组则无法显示矩形
如果这么写的话，按照上面的例子，传入的内容为[ [ [110,20],[112,22],[114,25],[116,28],[111,40],[110,20] ] ]岂不是没有按照一般人的思路来，为什么多套一层？
解：
多套一层是因为一个Polygon 可以绘制多个多边形，根据supermap问答区的解释是

因为 Polygon 可以做多对象复合多边形 —— 来自 SuperMap 执笔画月，感谢

reference:

__EOF__

本文作者：echo_lovely
本文链接：https://www.cnblogs.com/echo-lovely/p/17146843.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2023-02-23 09:47 echo_lovely 阅读(696) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· OpenLayers 绘制带箭头的LineString

· Openlayers 距离环绘制

· Openlayers 通过canvas渲染部分地图

· # openlayer 绘制多边形

· openlayers | ol.Overlay实现点击地图图标，图标跳动

历史上的今天：
2021-02-23 OpenCvSharp 打开rtsp视频并录制mp4文件

公告

openlayers 在地图上绘制矩形框，非鼠标框选

发表于 2023-02-23 09:47阅读：696评论：0推荐：0

Html&Css JavaScript OpenLayers

关注

跳至底部

昵称： echo_lovely
园龄： 5年5个月
粉丝： 39
关注： 12

+加关注

随笔分类

随笔档案

文章分类

C#(1)

echo

openlayers 在地图上绘制矩形框，非鼠标框选

reference:

公告

echo_lovely

openlayers 在地图上绘制矩形框，非鼠标框选

搜索

常用链接

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title data-i18n="resources.title_tiledMapLayer3857"></title>
	<script type="text/javascript" src="../js/include-web.js"></script>
	<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
	</head>
	<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
	<div id="map" style="width: 100%; height: 100%"></div>
	<script type="text/javascript">
	var map,
	url =
	(window.isLocal ? window.server : 'https://iserver.supermap.io') +
	'/iserver/services/map-china400/rest/maps/China';
	// 方式一：1.调用 ol.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
	// ol.supermap.initMap(url, {
	// mapOptions: {
	// controls: ol.control
	// .defaults({ attributionOptions: { collapsed: false } })
	// .extend([new ol.supermap.control.Logo()])
	// }
	// });

	/* 方式二：1.调用 ol.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
	2.调用 ol.supermap.viewOptionsFromMapJSON 获取地图视图参数
	3.调用 ol.Map 创建地图
	4.调用 ol.layer.Tile 与 ol.source.TileSuperMapRest 创建底图
	*/
	new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
	const mapObj = serviceResult.result;
	map = new ol.Map({
	target: 'map',
	controls: ol.control
	.defaults({ attributionOptions: { collapsed: false } })
	.extend([new ol.supermap.control.Logo()]),
	view: new ol.View(ol.supermap.viewOptionsFromMapJSON(mapObj))
	});
	var layer = new ol.layer.Tile({
	source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapObj, true))
	});
	map.addLayer(layer);
	map.addControl(new ol.supermap.control.ScaleLine());


	var coords = [[110,20],[112,22],[114,25],[116,28],[111,40],[110,20]]; // 多边形坐标数组

	var vectorLayer = new ol.layer.Vector();
	var vectorSource = new ol.source.Vector();
	var polygon = new ol.geom.Polygon([coords]); // 多边形形构造方法
	polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857')); // 4326 对应的是经纬度坐标系，3857叫墨卡托？反正不是经纬度，需要做个转换
	vectorSource.addFeature(new ol.Feature(polygon)); // 形成Feature，并添加到source
	vectorLayer.setSource(vectorSource); // layer设置source
	map.addLayer(vectorLayer); // 将layer加入地图
	});
	</script>
	</body>
	</html>