在地图上添加文字图层_前端map加字-CSDN博客

本文链接：https://blog.csdn.net/weixin_42229576/article/details/91864968

// var osmUrl = "../assets/image/riskmap-logo-166x40-2.png";//这里的asdf也可以替换成图片

var osm = new L.TileLayer("asdf", {  zoom: 3,minZoom: 3, maxZoom:18 });
this.map.addLayer(osm);
this.map.setView(new L.LatLng(34, 127),1);
var myIcon24 = L.divIcon({
    html: "<p style='color: red;-webkit-transform:rotate(90deg);'>24</p>"+
      "<p style='color: red;-webkit-transform:rotate(90deg);'>小</p>"+
      "<p style='color: red;-webkit-transform:rotate(90deg);'>时</p>"+
      "<p style='color: red;-webkit-transform:rotate(90deg);'>警</p>"+
      "<p style='color: red;-webkit-transform:rotate(90deg);'>戒</p>"+
      "<p style='color: red;-webkit-transform:rotate(90deg);'>线</p>",
    className: 'my-div-icon',
    iconSize:5,

});
var myIcon48 = L.divIcon({
    html: "<p style='color: green;-webkit-transform:rotate(90deg);'>48</p>"+
        "<p style='color: green;-webkit-transform:rotate(90deg);'>小</p>"+
        "<p style='color: green;-webkit-transform:rotate(90deg);'>时</p>"+
        "<p style='color: green;-webkit-transform:rotate(90deg);'>警</p>"+
        "<p style='color: green;-webkit-transform:rotate(90deg);'>戒</p>"+
        "<p style='color: green;-webkit-transform:rotate(90deg);'>线</p>",
    color:'red',
    className: 'my-div-icon',
    iconSize:5
});
L.marker([34, 127],{icon:myIcon24}).addTo(this.map);
L.marker([30, 132],{icon:myIcon48}).addTo(this.map);

//-webkit-transform:rotate(90deg);把文字旋转90度