在MapTalks中,绘制面(Polygon)并设置其图形样式可以非常灵活,以下是一个简化的创建带有自定义样式的面要素的示例:
// 初始化地图与矢量图层 var map = new maptalks.Map('map', {...}); // 省略地图配置项 var vectorLayer = new maptalks.VectorLayer('vector').addTo(map); // 创建一个面要素(例如多边形) var polygonCoordinates = [ [116.404, 39.915], // 多边形顶点坐标数组... ... ]; var polygon = new maptalks.Polygon(polygonCoordinates, { // 设置面的样式 symbol: { 'polygonFill': '#f03', // 填充颜色 'polygonOpacity': 0.8, // 填充透明度 'lineWidth': 2, // 边框线宽 'lineColor': '#ff0000', // 边框线颜色 'lineDasharray': [4, 4], // 虚线样式(可选) }, properties: { // 可选,添加自定义属性 'name': '区域名称' } }); // 将面要素添加到矢量图层 vectorLayer.addGeometry(polygon);
此外,MapTalks还支持更复杂的样式,如渐变填充、图案填充等。例如,如果要为面设置渐变填充,可以这样做:
symbol: { 'polygonFillPatternFile': 'path/to/gradient.png', // 渐变图片路径 // 或使用内置渐变 'polygonFillGradient': { 'type': 'radial', 'center': [0.5, 0.5], 'radius': 0.5, 'stops': [[0, 'red'], [1, 'blue']] }, // 其他样式保持不变 }
确保根据实际需求调整样式参数以获得所需效果。
<!DOCTYPE html> <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>图形样式 - 面样式</title> <style type="text/css"> html,body{margin:0px;height:100%;width:100%} .container{width:100%;height:100%} </style> <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css"> <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script> <body> <div id="map" class="container"></div> <script> var map = new maptalks.Map('map', { center: [-0.113049,51.49856], zoom: 13, baseLayer: new maptalks.TileLayer('base', { urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', subdomains: ['a','b','c','d'], attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>' }) }); var layer = new maptalks.VectorLayer('vector').addTo(map); var rect = new maptalks.Rectangle( [-0.143049,51.50856], 4250, 3000, { symbol:{ 'polygonFill' : 'rgb(135,196,240)', 'polygonOpacity' : 1, 'lineColor' : '#1bbc9b', 'lineWidth' : 6, 'lineJoin' : 'round', //miter, round, bevel 'lineCap' : 'round', //butt, round, square 'lineDasharray' : null,//dasharray, e.g. [10, 5, 5] 'lineOpacity ' : 1 } } ).addTo(layer); </script> </body> </html>
评论可见,请评论后查看内容,谢谢!!!
发表评论