vue中使用OpenLayers（三）：绘制文字叠加和相对位置的调整

vue中使用OpenLayers（三）：绘制文字叠加和相对位置的调整

第一步 引入需要js

之前我已经引过了，现在就不引了，想知道了直接看上一章

第二步

          let rome;
          rome = new Feature({
            data: item,
            lnglat: [item.lng, item.lat],//坐标
            geometry: new Point(fromLonLat([item.lng, item.lat]))
          });
          rome.setStyle([new Style({
              text: new Text({
                textAlign: "center",
                textBaseline: "middle",
                font: " 12px serif",
                text: "编号：" + item.towerNumber,//这里是要写的内容分
                fill: new Fill({
                  color: "#eee"
                }),
                stroke: new Stroke({ color: "rgba(255,255,255,0)" }),
                offsetX: 0,
                offsetY: -50,//调整相对位置
                rotation: 0
              })

            }), new Style({
              text: new Text({
                textAlign: "center",
                textBaseLine: "middle",
                font: "12px serif",
                text: "人数：" + item.personList.length,
                fill: new ol.style.Fill({ color: "#eee" }),
                stroke: new ol.style.Stroke({ color: "rgba(255,255,255,0)" }),
                offsetX: 0,
                offsetY: -30,
                rotation: 0
              })

            }), new Style({
              image: new Icon({
                src: 图片地址,
                anchor: [0.5, 1.2],//这里是调整图片的位置
              })

            })]
          );

               this.markervectorLayer = new VectorLayer({
                  source: new VectorSource({
                    features: [rome ]
                  })
                });
                this.map.addLayer(this.markervectorLayer);

openlayers所有的东西都是可以叠加起来的，包括样式，在同一个maker里可以绘制多个样式。

文字调整位置的方式 offsetX: 0, offsetY: -30,这是调整文字位置的参数

openlayers里面的绘制图形都是创建canvas 的，我嫌太麻烦直接让ui设计了个图片，通过anchor: [0.5, 1.2]这调整图片的位置。
图片效果：