maptalks 开发GIS地图（27）maptalks.three.20

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