高德地图 Web JS API示例学习笔记（11）——覆盖物（矢量图形）

最新推荐文章于 2023-09-09 12:26:08 发布

何去何从2857

最新推荐文章于 2023-09-09 12:26:08 发布

阅读量1.9k

点赞数 1

分类专栏： WebGIS

本文链接：https://blog.csdn.net/hequhecong10857/article/details/103705148

版权

WebGIS 专栏收录该内容

62 篇文章 48 订阅

订阅专栏

文章目录

矢量图形

矢量图形

折线的绘制和编辑

本示例先创建一条polyline，再通过AMap.PolyEditor插件进行编辑，功能有限，不太好用。
使用AMap.Polyline和AMap.PolyEditor插件绘制和编辑折线

var path = [
        [116.362209, 39.887487],
        [116.422897, 39.878002],
        [116.372105, 39.90651],
        [116.428945, 39.89663]
    ];

    var polyline = new AMap.Polyline({
        path: path,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 3,
        strokeColor: "#3366FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })

    polyline.setMap(map)
    // 缩放地图到合适的视野级别
    map.setFitView([ polyline ])

    var polyEditor = new AMap.PolyEditor(map, polyline)

    polyEditor.on('addnode', function(event) {
        log.info('触发事件：addnode')
    })

    polyEditor.on('adjust', function(event) {
        log.info('触发事件：adjust')
    })

    polyEditor.on('removenode', function(event) {
        log.info('触发事件：removenode')
    })

    polyEditor.on('end', function(event) {
        log.info('触发事件： end')
        // event.target 即为编辑后的折线对象
    })

多边形的绘制和编辑

使用AMap.Polygon和AMap.PolyEditor插件绘制和编辑多边形
与折线的绘制与编辑原理相同，此处不再赘述

矩形的绘制和编辑

使用AMap.Rectangle和AMap.RectangleEditor绘制和编辑矩形

圆的绘制和编辑

使用AMap.Circle和AMap.CircleEditor绘制和编辑圆

绘制矢量图形（重点）

利用AMap.MouseTool绘制折线、弧线、多边形、矩形、圆形等

var mouseTool = new AMap.MouseTool(map)

    function drawPolyline () {
      mouseTool.polyline({
        strokeColor: "#3366FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        // strokeDasharray: [10, 5],
      })
    }

    function drawPolygon () {
      mouseTool.polygon({
        strokeColor: "#FF33FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      })
    }

    function drawRectangle () {
      mouseTool.rectangle({
        strokeColor:'red',
        strokeOpacity:0.5,
        strokeWeight: 6,
        fillColor:'blue',
        fillOpacity:0.5,
        // strokeStyle还支持 solid
        strokeStyle: 'solid',
        // strokeDasharray: [30,10],
      })
    }

    function drawCircle () {
      mouseTool.circle({
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        strokeStyle: 'solid',
        // 线样式还支持 'dashed'
        // strokeDasharray: [30,10],
      })
    }

    mouseTool.on('draw', function(event) {
      // event.obj 为绘制出来的覆盖物对象
      log.info('覆盖物对象绘制完成')
    })

绘制图形后，可以在mouseTool的draw事件中，将绘制的对象存储成新的矢量要素。

带洞多边形

使用Polygon在地图上绘制带洞的多边形。

// 外多边形坐标数组和内多边形坐标数组
    var pointers = {
        outer: [
            [117.104554, 30.504444],
            [117.118974, 30.506219],
            [117.12893, 30.508586],
            [117.13305, 30.511248],
            [117.139917, 30.514501],
            [117.147126, 30.518642],
            [117.153993, 30.5216],
            [117.161546, 30.526036],
            [117.171502, 30.529289],
            [117.177339, 30.531655],
            [117.184892, 30.531063],
            [117.197595, 30.533133],
            [117.212014, 30.535499],
            [117.223001, 30.536682],
            [117.233987, 30.536977],
            [117.23845, 30.538456],
            [117.240854, 30.545848],
            [117.251153, 30.543778],
            [117.251497, 30.53816],
            [117.24875, 30.530767],
            [117.246347, 30.523965],
            [117.243943, 30.515684],
            [117.241197, 30.504149],
            [117.238107, 30.493795],
            [117.229524, 30.481073],
            [117.221971, 30.474268],
            [117.215104, 30.469533],
            [117.204461, 30.466574],
            [117.190728, 30.462727],
            [117.183862, 30.464207],
            [117.156739, 30.47456],
            [117.14644, 30.47841],
            [117.140603, 30.482257],
            [117.127214, 30.485215],
            [117.107988, 30.487878]
        ],
        inner: [
            [117.162061, 30.49361],
            [117.167211, 30.49716],
            [117.172361, 30.50071],
            [117.177167, 30.505739],
            [117.184034, 30.512542],
            [117.18987, 30.522894],
            [117.2012, 30.525851],
            [117.210126, 30.527034],
            [117.219396, 30.526443],
            [117.225919, 30.527034],
            [117.234159, 30.529104],
            [117.237935, 30.528808],
            [117.235532, 30.522894],
            [117.234502, 30.516683],
            [117.232785, 30.507514],
            [117.226262, 30.491835],
            [117.217336, 30.480297],
            [117.202916, 30.4729],
            [117.194677, 30.470828],
            [117.184034, 30.473491],
            [117.177511, 30.47793],
            [117.170644, 30.484439],
            [117.167897, 30.489173]
        ]
    };
    var pathArray = [
        pointers.outer,
        pointers.inner
    ];
    var polygon = new AMap.Polygon(polygonOptions);
    polygon.setPath(pathArray);

将外多边形的坐标数组和内多边形的坐标数组放到path中，绘制成带洞的图形。

遮罩

通过给地图添加一个无限大的带洞多边形，实现遮罩效果，即只显示某个区域的地图
原理与前文的带洞多边形示例相同，此处不再赘述。只是此处选择了一个无限大的外边界。

GeoJSON（重点）

使用GeoJSON根据标注你的GeoJSON配置在地图上对应覆盖物。
前文的WMTS和WMS服务加载的数据是Tile数据，此处相当于常规的地图WFS服务，只是无法根据条件进行过滤。
在这里插入图片描述

ajax('https://a.amap.com/jsapi_demos/static/geojson/chongqing.json', function(err, geoJSON) {
        if (!err) {
            var geojson = new AMap.GeoJSON({
                geoJSON: geoJSON,
                // 还可以自定义getMarker和getPolyline
                getPolygon: function(geojson, lnglats) {
                    // 计算面积
                    var area = AMap.GeometryUtil.ringArea(lnglats[0])

                    return new AMap.Polygon({
                        path: lnglats,
                        fillOpacity: 1 - Math.sqrt(area / 8000000000),// 面积越大透明度越高
                        strokeColor: 'white',
                        fillColor: 'red'
                    });
                }
            });

            geojson.setMap(map);

            log.success('GeoJSON 数据加载完成')
        } else {
            log.error('GeoJSON 服务请求失败')
         }
    })

通过ajax请求GeoJSON 数据，返回矢量图形，并设置style。
ajax请求的geoJSON数据中，包含了多个feature数据，如：
在这里插入图片描述

getPolygon的回调函数中geojson是每个feature数据，lnglats是每个feature的坐标数据。本示例中只使用了坐标数据，也可以读取feature中属性数据，将其渲染到地图中。
此外，本示例使用了AMap.GeometryUtil.ringArea(lnglats[0])根据坐标点数据计算面的面积。
常用的数学计算方法，包括：

计算两点间的实际距离 AMap.GeometryUtil.distance
计算点到线段的最短距离 AMap.GeometryUtil.distanceToSegment
计算点到路径的最短距离 AMap.GeometryUtil.distanceToLine
计算路径的实际长度 AMap.GeometryUtil.distanceOfLine
计算封闭区域的面积 AMap.GeometryUtil.ringArea

自定义折线方向箭头

给Polyline添加dirColor属性可以设置方向箭头的颜色，添加dirImg可以设置方向箭头的图片，支持Image和Canvas。

var polyline1 = new AMap.Polyline({
      path: path1, // 设置线覆盖物路径
      showDir: true,
      strokeColor: '#3366bb', // 线颜色
      strokeWeight: 10 // 线宽
    });
    var polyline2 = new AMap.Polyline({
      path: path2, // 设置线覆盖物路径
      showDir: true,
      dirColor: 'pink',
      strokeColor: '#336688', // 线颜色
      strokeWeight: 10 // 线宽
    });

    // 红色箭头
    var canvasDir = document.createElement('canvas')
    var width = 24;
    canvasDir.width = width;
    canvasDir.height = width;
    var context = canvasDir.getContext('2d');
    context.strokeStyle = 'red';
    context.lineJoin = 'round';
    context.lineWidth = 8;
    context.moveTo(-4, width - 4);
    context.lineTo(width / 2, 6);
    context.lineTo(width + 4, width - 4);
    context.stroke();

    var polyline3 = new AMap.Polyline({
      path: path3, // 设置线覆盖物路径
      showDir: true,
      dirImg: canvasDir,
      strokeColor: '#3366cc', // 线颜色
      strokeWeight: 10 // 线宽
    });

    // 点状（png图片）
    var polyline4 = new AMap.Polyline({
      path: path4, // 设置线覆盖物路径
      showDir: true,
      dirImg: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
      strokeColor: '#3366dd', // 线颜色
      strokeWeight: 10 // 线宽
    });

    map.add([polyline1, polyline2, polyline3, polyline4])

自定义方法使用较少，只是AMap.Polyline的showDir属性可以开启线上的箭头，可以用在导航或者类似的线路方向中，注意该属性不适用于3D视图。

何去何从2857

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
高德地图 Web JS API示例学习笔记（11）——覆盖物（矢量图形）

矢量图形折线的绘制和编辑使用AMap.Polyline和AMap.PolyEditor插件绘制和编辑折线var path = [ [116.362209, 39.887487], [116.422897, 39.878002], [116.372105, 39.90651], [116.428945, 39.89663] ...
复制链接

扫一扫