maptalks 开发GIS地图（27）maptalks.three.20 - custom-circle
1. 自定义圆圈，从效果上来看，并没有太惊艳，普通的canvas应用，不过圆圈的颜色是渐变色，
这个还是头一次看到实际的应用，平时不太敢想这么去做。
2. 渐变色是使用 canvas 制作的。使用了 ctx.createLinearGradient。
1 function getMaterial(fontSize, text, fillColor) { 2 var SIZE = 256; 3 var canvas = document.createElement('canvas'); 4 canvas.width = canvas.height = SIZE; 5 var ctx = canvas.getContext('2d'); 6 var gradient = ctx.createLinearGradient(0, 0, SIZE, 0); 7 // gradient.addColorStop("0", "#ffffff"); 8 gradient.addColorStop("0.0", "#1a9bfc"); 9 gradient.addColorStop("1.0", "#7049f0"); 10 // gradient.addColorStop("0.66", "white"); 11 // gradient.addColorStop("1.0", "red"); 12 13 ctx.strokeStyle = gradient; 14 ctx.lineWidth = 40; 15 ctx.arc(SIZE / 2, SIZE / 2, SIZE / 2, 0, Math.PI * 2); 16 ctx.stroke(); 17 ctx.fillStyle = fillColor; 18 ctx.font = `${fontSize}px Aria`; 19 ctx.textAlign = 'center'; 20 ctx.textBaseline = 'middle'; 21 ctx.fillText(text, SIZE / 2, SIZE / 2); 22 ctx.rect(0, 0, SIZE, SIZE); 23 var texture = new THREE.Texture(canvas); 24 texture.needsUpdate = true; //使用贴图时进行更新 25 26 var material = new THREE.MeshPhongMaterial({ 27 map: texture, 28 // side: THREE.DoubleSide, 29 transparent: true 30 }); 31 return material; 32 }
3. 添加圆圈
1 function addCircles() { 2 var lnglats = [ 3 [13.429362937522342, 52.518205849377495] 4 , [13.41688993786238, 52.52216099633924] 5 , [13.417991247928398, 52.53296954185342] 6 , [13.438154245439819, 52.533321196953096] 7 , [13.450418871799684, 52.52653968753597] 8 , [13.390340036780685, 52.51953598324846] 9 , [13.399921081391199, 52.50920191922407] 10 , [13.366122901455583, 52.50949703597493] 11 , [13.365784792637783, 52.51964629275582] 12 , [13.371429857108524, 52.528732386936014] 13 , [13.383686384074508, 52.53781463596616] 14 , [13.40395563186371, 52.540223413847315] 15 , [13.361485408920998, 52.53916869831616] 16 , [13.35373758485457, 52.52883597474849] 17 , [13.355233792792774, 52.519259850666316] 18 , [13.369548077301943, 52.506940362998336] 19 , [13.338732610093984, 52.50860998116909] 20 , [13.341879792058194, 52.52318729489704] 21 , [13.348448231846305, 52.537668773653735] 22 ]; 23 var text = Math.round(Math.random() * 10000); 24 var material = getMaterial(70, text, '#fff'); 25 circles = lnglats.map(function (lnglat) { 26 var circle = new Circle(lnglat, { 27 radius: 200 28 }, material, threeLayer); 29 30 //tooltip test 31 circle.setToolTip('id:' + circle.getId(), { 32 showTimeout: 0, 33 eventsPropagation: true, 34 dx: 10 35 }); 36 37 38 //infowindow test 39 circle.setInfoWindow({ 40 content: 'id:' + circle.getId(), 41 title: 'message', 42 animationDuration: 0, 43 autoOpenOn: false 44 }); 45 46 47 //event test 48 ['click', 'mousemove', 'mouseout', 'mouseover', 'mousedown', 'mouseup', 'dblclick', 'contextmenu'].forEach(function (eventType) { 49 circle.on(eventType, function (e) { 50 console.log(e.type, e); 51 }); 52 }); 53 return circle; 54 }); 55 threeLayer.addMesh(circles); 56 57 initGui(); 58 }
4. 页面显示
5. 源码地址
https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo
