在MapTalks中,你可以使用`VectorLayer`和`Graphic`来绘制矢量标注,并使用`Style`对象来定义图形的样式,包括渐变填充。
以下是一个简单的示例,展示如何绘制一个渐变填充的矩形:
// 创建地图 var map = new maptalks.Map('map', { center: [116.39, 39.9], zoom: 10, baseLayer: new maptalks.TileLayer('base', { urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', subdomains: ['a', 'b', 'c'] }) }); // 创建样式 var style = { fillGradient: [ { offset: 0, color: 'red' }, { offset: 1, color: 'blue' } ], lineColor: '#fff', lineWidth: 2 }; // 创建图形 var graphic = new maptalks.Graphic([ [116.38, 39.89], [116.4, 39.89], [116.4, 39.91], [116.38, 39.91] ], { symbol: { 'polygonFill': style.fillGradient, 'lineWidth': style.lineWidth, 'lineColor': style.lineColor } }); // 创建矢量图层并添加图形 var vectorLayer = new maptalks.VectorLayer('vector').addTo(map); vectorLayer.addGraphic(graphic);
在这个示例中,我们创建了一个从红色渐变到蓝色的矩形。`fillGradient`属性用于定义渐变填充,它是一个包含多个颜色停止点的数组,每个停止点都有一个`offset`(范围从0到1)和一个`color`。`lineWidth`和`lineColor`则分别定义了边框的宽度和颜色。
<!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: 14, 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 marker0 = new maptalks.Marker([-0.109049,51.49856], { symbol:{ 'markerType' : 'ellipse', 'markerFill' : { 'type' : 'linear', 'places' : [0, 0, 1, 1], 'colorStops' : [ [0.00, '#fff'], [0.50, '#fff27e'], [1, '#f87e4b'] ] }, 'markerLineWidth' : 0, 'markerWidth' : 100, 'markerHeight' : 100 } }).addTo(layer); var marker1 = new maptalks.Marker([-0.119049,51.49856], { symbol:{ 'markerType' : 'ellipse', 'markerFill' : { 'type' : 'radial', 'colorStops' : [ [0.00, 'rgba(216,115,149,0)'], [0.50, 'rgba(216,115,149,1)'], [1.00, 'rgba(216,115,149,1)'] ] }, 'markerLineWidth' : 0, 'markerWidth' : 100, 'markerHeight' : 100 } }).addTo(layer); </script> </body></html>
评论可见,请评论后查看内容,谢谢!!!
发表评论