一、图片标注

图片标注的核心
1、添加一个点要素
2、给点要素设置style

步骤

  1. 1、加载底图
  2. 2、定义style对象
  3. 3、创建点要素，并设置style
  4. 4、创建矢量数据源，加载点要素
  5. 5、创建矢量图层，加载矢量数据源
  6. 6、在map中加载矢量图层
  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类创建icon
  17.         const icon = new ol.style.Style({
  18.             /**{olx.style.IconOptions}类型*/
  19.             image: new ol.style.Icon({
  20.                 anchor: [0.5,0.5 ],
  21.                 anchorOrigin: 'top-right',
  22.                 anchorXUnits: 'fraction',
  23.                 anchorYUnits: 'pixels',
  24.                 offsetOrigin: 'top-right',
  25.                 // offset:[0,10],
  26.                 //图标缩放比例
  27.                 scale: 0.5,
  28.                 //透明度
  29.                 opacity: 0.75,
  30.                 //图标的url
  31.                 src: '../image/location.png',
  32.             }),
  33.         })
  34.         // 三. 创建点要素, 设置点要素样式
  35.       const point_Icon = new ol.Feature({
  36.         geometry: new ol.geom.Point([114, 36]),
  37.       })
  38.       point_Icon.setStyle(icon)
  39.       /* 四、创建矢量数据 */
  40.       const source = new ol.source.Vector({
  41.           features:[point_Icon]
  42.       })
  43.       /* 五、创建矢量图层，加载矢量数据源 */
  44.       const vector = new ol.layer.Vector({
  45.           source:source
  46.       })
  47.       // 六、在map中加载矢量图层
  48.       map.addLayer(vector)
  49.     </script>
  50. </body>