如何编辑绘制的要素(点、线、面)?

0 投票
this.draw = new ol.interaction.Draw({
                source: this.source,
                type: type,
                snapTolerance: 20
            });
            this.iMap.addInteraction(this.draw);

使用Draw方法绘制feature,在完成绘制之后,如何编辑这个feature的样式?直接选中修改这个feature的style?

此外:如何添加文本要素?

2月 12 分类:  53次浏览 | 用户: 吕峥嵘 初出茅庐 (55 分)
重新分类 2月 13 用户:邬袁凯

1个回答

0 投票

https://iclient.supermap.io/examples/openlayers/editor.html#02_editFeatures

您好,编辑的功能可以参考这个范例的第276行的这个function,通过EditFeaturesParameters这个类来实现。他这个范例中编辑的对象是pointFeature,您可以根据您的代码内容进行调整,可以修改editType来实现不同的编辑功能。

文本要素的话如果是给对象添加文本标记可以用ol.style.text

2月 13 用户: 于浩 登峰造极 (5,573 分)
我这边是需要是在点击地图的时,在对应点添加文字标注
这种的话可以通过点击地图添加点对象,然后设置点风格不显示,显示他的文字标注,就是ol.style.text
具体用什么方法呢,就用draw的方法?麻烦给我提供一个demo,谢谢!

https://iclient.supermap.io/examples/openlayers/editor.html#01_mapQueryByDistance

您打开这个demo,完整替换代码。字体的设置在代码的43行位置开始


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_mapQueryByDistance"></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, point, vectorLayer, resultLayer,
        url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-world/rest/maps/World";
    map = new ol.Map({
        target: 'map',
        controls: ol.control.defaults({attributionOptions: {collapsed: false}})
            .extend([new ol.supermap.control.Logo()]),
        view: new ol.View({
            center: [100, 0],
            zoom: 3,
            projection: 'EPSG:4326',
            multiWorld: true
        })
    });
    var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: url,
            wrapX: true
        }),
        projection: 'EPSG:4326'
    });
    map.addLayer(layer);
    query();

    function query() {
        //添加查询中心点
        point = new ol.geom.Point([104, 30]);
        var iconStyle = new ol.style.Style({
            // image: new ol.style.Icon(({
            //     src: '../img/markerbig_select.png'
            // })),
            text:new ol.style.Text({ //文本样式
font: '12px Calibri,sans-serif',
text: "text demo",
fill: new ol.style.Fill({
color: '#aa3300'
}),
offsetY: -55,
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
        });
        var feature = new ol.Feature(point);
        feature.setStyle(iconStyle);
        var pointSource = new ol.source.Vector({
            features: [feature],
            wrapX: false
        });
        vectorLayer = new ol.layer.Vector({
            source: pointSource
        });
        map.addLayer(vectorLayer);
        var param = new SuperMap.QueryByDistanceParameters({
            queryParams: {name: "Capitals@World.1"},
            distance: 10,
            geometry: point
        });
        //创建距离查询实例
        new ol.supermap.QueryService(url).queryByDistance(param, function (serviceResult) {
            var vectorSource = new ol.source.Vector({
                features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
                wrapX: false
            });
            resultLayer = new ol.layer.Vector({
                source: vectorSource
            });
            map.addLayer(resultLayer);
        });
    }
</script>
</body>
</html>

如果要实现点击绘制的话就用draw方法绘制对象然后设置style

...