openlayers划线、标记点

最新推荐文章于 2024-02-19 16:38:54 发布
最新推荐文章于 2024-02-19 16:38:54 发布
阅读量652 收藏
点赞数
文章标签： javascript
原文链接：https://blog.csdn.net/zy13608089849/article/details/70815887
版权

参考代码1：https://blog.csdn.net/zy13608089849/article/details/70815887
参考代码2：http://t.csdn.cn/35iol

实现结果：

  • 只有线段：在这里插入图片描述
  • 只有标记点：
    在这里插入图片描述
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./ol/ol.css">
    <style>
        .map-class {
            height: 100rem;
            width: 100%;
        }
    </style>
    <!-- 加载OpenLayers 类库 -->
    <script src="./ol/ol.js"></script>
    <title>天地图划线</title>
</head>

<body>
    <!-- <img src="./img/arrow.png"> -->
    <div id="map-id" class="map-class"></div>
    <script type="text/javascript">
        var center = [103, 45] //中心经纬度
        var view = new ol.View({
            center: ol.proj.fromLonLat(center),  //默认使用EPSG:3857地图坐标系，引入输出一般使用EPSG:4326实际坐标系，需要转换
            zoom: 5,
            minZoom: 1,
            maxZoom: 17
        })

        //新建map容器
        var map = new ol.Map({

            target: 'map-id',  // 绑定 DIV 元素
            // 添加图层
            layers: [
                // 设置图层的数据源
                //   矢量底图
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk='
                    })
                }),
                //   矢量标记
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk='
                    })
                }),
            ],
            // 设置视图窗口
            view: view
        });
        //划线准备：
        //准备新图层用来加入标注的点和线,标记数据集
        var source = new ol.source.Vector();

        //标记层
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector()
        });
        //定义标注点坐标
        //散列点数组
        var coordinate = new Array();

        //散列点
        var coordinate1 = [104.1005229950, 30.6743128087];
        var coordinate2 = [103.9271879196, 30.7462617980];
        var coordinate3 = [103.6227035522, 30.9932085864];
        var coordinate4 = [103.5752069950, 31.4663367378];
        var coordinate5 = [103.4307861328, 30.1941019446];
        var coordinate6 = [106.4500522614, 29.5811456252];
        var coordinate7 = [106.5885615349, 29.5679608922];
        var coordinate8 = [107.7666950226, 29.4161988273];
        var coordinate9 = [118.1862562895, 24.4891501310];
        var coordinate10 = [118.1982564926, 24.4947641146];

        coordinate.push(coordinate1);
        coordinate.push(coordinate2);
        coordinate.push(coordinate3);
        coordinate.push(coordinate4);
        coordinate.push(coordinate5);
        coordinate.push(coordinate6);
        coordinate.push(coordinate7);
        coordinate.push(coordinate8);
        coordinate.push(coordinate9);
        coordinate.push(coordinate10);

        var geometry = new ol.geom.LineString([
            ol.proj.transform([114,27], 'EPSG:4326', 'EPSG:3857'),
            ol.proj.transform([125.151421, 42.920414], 'EPSG:4326', 'EPSG:3857'),
        ]);
        for (var i = 0; i < coordinate.length; i++) {
            // 将点加入geometry中存储几何信息；坐标系转换，保证map中坐标系一致
            geometry.appendCoordinate(ol.proj.transform(coordinate[i], 'EPSG:4326', 'EPSG:3857'));
            // 创建一个Feature，并设置好在地图上的位置
            var anchor = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform(coordinate[i], 'EPSG:4326', 'EPSG:3857'))
            });
            // 设置样式，在样式中就可以设置图标
            anchor.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 10,
                    stroke: new ol.style.Stroke({
                        color: '#fff'
                    }),
                    fill: new ol.style.Fill({
                        color: '#3399CC'
                    })
                })
            }));
            // 添加到之前的创建的layer中去
            layer.getSource().addFeature(anchor);
        }

        var feature = new ol.Feature({
            geometry: geometry
        });
        source.addFeature(feature);
        //标记点集
        var vector = new ol.layer.Vector({
            source: source,
            style: styleFunction
        });

        //获取样式
        var styleFunction = function (feature) {
            var geometry = feature.getGeometry();
            //线段样式
            var styles = [
                new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: '#0044CC'
                    }),
                    stroke: new ol.style.Stroke({
                        lineDash: [1, 3, 5],
                        width: 2,
                        color: [255, 0, 0, 1]
                    })
                })
            ];
            //箭头样式
            geometry.forEachSegment(function (start, end) {
                var arrowLonLat = [(end[0] + start[0]) / 2, (end[1] + start[1]) / 2];
                var dx = end[0] - start[0];
                var dy = end[1] - start[1];
                var rotation = Math.atan2(dy, dx);
                styles.push(new ol.style.Style({
                    geometry: new ol.geom.Point(arrowLonLat),
                    image: new ol.style.Icon({
                        src: "./image/arrow.png",
                        anchor: [0.75, 0.5],
                        rotateWithView: true,
                        rotation: -rotation
                    })
                }));
            });
            return styles;
        };

        // map.addLayer(vector) // 线段
        map.addLayer(layer)  // 标记点


    </script>
</body>

</html>

划线流程

  1. 定义轨迹路线：new ol.geom.LineString
    var geometry = new ol.geom.LineString([], 'XYZM');
  2. 给轨迹定义相应样式：
       var styles = [
           new ol.style.Style({
               fill: new ol.style.Fill({
                   color: '#0044CC'
               }),
               stroke: new ol.style.Stroke({
                   lineDash: [1, 3, 5],
                   width: 2,
                   color: [255, 0, 0, 1]
               })
           })
       ];
  3. 新建矢量图层
    layer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [gemoetry,...,...],
    }), 
    style: styleFunction;
  });
  4. 将矢量图层添加到map中
    map.addLayer(layer)

或者在地图初始化中加入：

map = new ol.Map({
	target:
	layers:[layer,....]
})
心酸的特殊字符
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
openlayers3画线功能例子
01-03
openlayers3 画线，画扇形图， 能正常运行的小例子，
8. OpenLayers 绘画元素，画点、画线、画面、画圆（结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-01 4384
本文介绍了如何在Vue中使用OpenLayers库来实现鼠标绘制点、线、面、圆的功能，并提供清空绘画和退出绘制模式的操作。首先，我们需要创建一个地图容器，并添加底图和矢量图层。底图使用了ArcGIS World Street Map，矢量图层用于显示用户的绘制结果。然后，我们通过添加Draw交互控件来实现绘制功能。每个绘制按钮都有一个点击事件处理函数，调用addInteraction方法来添加相应类型的绘制控件。最后，我们提供了清空绘制和退出绘制模式的操作。
openlayers地图点击标记点,弹出当前位置自定义弹窗(三)
最新发布
Summer_Uncle的博客
02-19 1394
1. 效果图 2. 代码 <template> <div class="container"> <div id="map" style='width: 100%; height: 100%;border: 5px solid #a4cdff;'> <div class="toolBox"> <div class="messageBox" v-show="isShow"> <di
vue+openlayers图形交互，实现多边形绘制、编辑和保存
weixin_46074818的博客
06-11 3781
知识点： 1.绘制多边形，实例化ol.interaction.Draw对象 draw_inter = new ol.interaction.Draw({ source: source_draw,//矢量地图源 type: "Polygon",//绘图类型 }); //将交互绘图对象添加到地图中 map.addInteraction(draw_inter) 2.图形交互编辑，实例化ol.interaction.Select对象和ol.interaction.Modify对象 let select_f.
vue+openlayers根据坐标点绘制多边形
weixin_46074818的博客
05-25 3850
需求：根据多边形轮廓点及中心点在天地图上绘制形状；不同类型的多边形轮廓以颜色区分 功能： 1.中心点坐标实现聚合 2.根据地图的缩放级别显示或者隐藏多边形 3.鼠标移入多边形或者中心点实现高亮并显示弹框，移除恢复原来的效果 js代码 var map,layer_poly_A,layer_poly_B,layer_poly_C,layer_poi_A,layer_poi_B,layer_poi_C const overlapOptions = ['A类', 'B类', 'C类']; var app = new
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
我只是个很菜的前端
09-30 9376
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
4. Openlayers 点、线、面基本样式渲染（结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 4551
在本篇博客中，我们将学习如何在 OpenLayers 中使用样式系统，并在 Vue 项目中绘制点、线、面的基本样式。首先，我们将学习 OpenLayers 的样式系统，然后使用 Vue 创建一个地图组件，并在地图组件中添加点、线、面要素并为其设置样式。
openLayers绘制点、线、面
Raccon_的博客
10-24 1782
笔记
openlayers-06-坐标添加点、线、面
chuanren1991的博客
05-15 2364
openlayers坐标添加点、线、面。
Vue+Openlayer使用draw实现绘制点线面功能
~~
08-19 2617
实现代码： <template> <div> <span size="mini" @click="drawFeature('Point')">画点</span> <span size="mini" @click="drawFeature('LineString')">画线</span> <span size="mini" @click="drawFeature('Polygon')">画..
openlayers 地图 画线
weixin_43863505的博客
08-16 1885
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>de
openlayers3添加闪烁点
12-20
使用openlayers3实现动态点闪烁功能，结合canvas技术，加载到点到地图上
vue使用openlayers实现移动点动画
10-14
主要为大家详细介绍了vue使用openlayers实现移动点动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用OPENLAYERS3实现点选的方法
08-29
主要为大家详细介绍了使用OPENLAYERS3实现点选的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers5绘制点线面圆.zip
08-01
利用openlayer5在地图上进行绘制点，圆，参考自openlayers5官网。
Openlayers实现点闪烁扩散效果
10-14
主要为大家详细介绍了Openlayers实现点闪烁扩散效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
OpenLayers 在地图上画线，获取点坐标（以天地图为例）
热门推荐
_修铁路的、的博客
03-26 1万+
应用场景：        最近在开发过程中，有个需求，需要在天地图中画线，结束后获取对应的坐标集合，查阅 OpenLayers API 和网上的相关资料后得以实现，特此记录。        因为直线间的点是无数个，我们不可能去获取这线上的所有点，而应用两点一线的原理，我们只需要知道一条直线的起点和终点就可以定位到当前直线，而在天地图中，手动画线的一种方式就是通过鼠标在地图上地点，然后地图调用相应的...
OpenLayers在线调用天地图并绘制点状符号进行标记
fungis
12-30 1018
OpenLayers在线调用天地图并绘制点状符号进行标记 在做web开发时，需要用openlayers调用天地图作为底图进行开发，并绘制一些点、线、面图形进行标记。这里提供一个Demo可作为参照（注意相关css与js的引入）。 效果预览 实现代码 <html> <head> <meta charset="utf-8"> <meta ...
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
OpenLayers 标记多边形中心点
07-28
要在OpenLayers中标记多边形的中心点，你可以使用一个新的特征来表示中心点，并将其添加到地图上。 以下是实现此功能的示例代码： ```javascript // 创建多边形要素 var polygonFeature = new ol.Feature({ geometry: new ol.geom.Polygon([[ [0, 0], [10, 0], [10, 10], [0, 10], [0, 0] ]]) }); // 获取多边形中心点 var center = polygonFeature.getGeometry().getCenter(); // 创建中心点要素 var centerFeature = new ol.Feature({ geometry: new ol.geom.Point(center) }); // 创建图层 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [polygonFeature, centerFeature] }) }); // 创建地图 var map = new ol.Map({ target: 'map', layers: [vectorLayer], view: new ol.View({ center: [5, 5], zoom: 2 }) }); ``` 在上面的示例中，我们首先创建了一个多边形要素`polygonFeature`，然后通过`getCenter()`方法获取多边形的中心点坐标。接下来，我们创建了一个新的点要素`centerFeature`，并将中心点坐标作为几何属性传递给它。 然后，我们创建了一个矢量图层`vectorLayer`，并将多边形要素和中心点要素添加到图层的源中。最后，我们创建了一个地图对象`map`，并将矢量图层添加到地图中。 这样，你就可以在地图上看到多边形以及标记的中心点了。你可以根据自己的需求修改多边形的坐标点，并使用相同的方法来标记中心点。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值