openlayer 剪短点标记

<script lang="js" setup>
import { Map, View } from 'ol';
import { XYZ } from 'ol/source';
import { onMounted } from 'vue';
import { fromLonLat } from 'ol/proj';
import TileLayer from 'ol/layer/Tile'; 
import heatData from "../Data/heatData.json"
import { Vector } from 'ol/layer';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import { Icon, Style } from 'ol/style';
import icomImage from "../assets/image/green.png"
let mapIns=null
const initMap=()=>{
  mapIns=new Map({
    layers:[new TileLayer({
        source:new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9fa1f50b096728fe4e46dc15df76211d",
            projection: "EPSG:3857",
        }),
        name:"map1"
    })],
    view:new View({
        center:fromLonLat([116.403963, 39.915119]),
        zoom:3
    }),
    target:'map'
  })

  let iconStyle = new Style({
        image: new Icon({ // 定义图标锚点
          anchor: [0.5, 46], // 根据图标的大小，对应上面 [0, 0] 的坐标
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: icomImage,
          width:30,
        })
      })
  let vectorLayer=new Vector({
    source:new VectorSource({
      features:new GeoJSON().readFeatures(heatData,{
          dataProjection: "EPSG:4326",
          featureProjection: "EPSG:3857"
      })
    }),
    style:iconStyle
  })
  mapIns.addLayer(vectorLayer)
}

onMounted(()=>{
    initMap()
})
</script>
<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100%;
  #map {
    height: 100%;
  }
}
</style>