this.draw = new ol.interaction.Draw({ source: this.source, type: type, snapTolerance: 20 }); this.iMap.addInteraction(this.draw);
使用Draw方法绘制feature,在完成绘制之后,如何编辑这个feature的样式?直接选中修改这个feature的style?
此外:如何添加文本要素?
https://iclient.supermap.io/examples/openlayers/editor.html#02_editFeatures
您好,编辑的功能可以参考这个范例的第276行的这个function,通过EditFeaturesParameters这个类来实现。他这个范例中编辑的对象是pointFeature,您可以根据您的代码内容进行调整,可以修改editType来实现不同的编辑功能。
文本要素的话如果是给对象添加文本标记可以用ol.style.text
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