1. <body>
    2.     <div id="map_container">
    4.     </div>
    5.     <script>
    6.         /* 一、加载底图 */
    7.         const map = new ol.Map({
    8.             target: 'map_container',
    9.             layers: [TianDiMap_vec, TianDiMap_cva],
    10.             view: new ol.View({
    11.                 projection: 'EPSG:4326', // 经纬度坐标系(默认是默卡托坐标系)
    12.                 center: [0, 0],
    13.                 zoom: 2
    14.             })
    15.         })
    16.         // 二. 通过Style类创建txt
    17.         const icon_text = new ol.style.Style({
    18.             text: new ol.style.Text({
    19.                 offsetX: 0,
    20.                 offsetY: 10,
    21.                 font: 'normal 12px 微软雅黑',
    22.                 text: '武汉市',
    23.                 fill: new ol.style.Fill({
    24.                     color: '#333'
    25.                 }),
    26.                 stroke: new ol.style.Stroke({
    27.                     color: "#ff2d51",
    28.                     width: 2
    29.                 })
    30.             }),
    31.             image: new ol.style.Icon({
    32.                 anchor: [0.5, 60],
    33.                 anchorOrigin: 'top-right',
    34.                 anchorXUnits: 'fraction',
    35.                 anchorYUnits: 'pixels',
    36.                 offsetOrigin: 'top-right',
    37.                 // offset:[0,10],
    38.                 //图标缩放比例
    39.                 scale: 0.5,
    40.                 //透明度
    41.                 opacity: 0.75,
    42.                 //图标的url
    43.                 src: '../image/location.png',
    44.             })
    46.         })
    47.         // 三. 创建点要素, 设置点要素样式
    48.         const point = new ol.Feature({
    49.             geometry: new ol.geom.Point([114, 36]),
    50.         })
    51.         point.setStyle(icon_text)
    52.         /* 四、创建矢量数据 */
    53.         const source = new ol.source.Vector({
    54.             features: [point],
    55.             wrapX: false
    56.         })
    57.         /* 5、创建矢量图层 */
    58.         const vector = new ol.layer.Vector({
    59.             source: source
    60.         })
    61.         map.addLayer(vector)
    62.     </script>
    63. </body>