开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天， 点击查看活动详情

openLayer显示坐标点图标，并移动到中心点

实现的需求是定位到指定位置，并且地图移动到这个位置，移动后位置图标发生变化（表示选中状态）。

1、渲染显示坐标点图标

这一步和 上篇文章 类似，但是多了一步自定义图标。 addressLayer 是自定义的图层。 data 是数据数组，数据里面包含坐标属性 coordinate ，这里是多个坐标点同时渲染的情况，所以用 for循环 就行。 需要引入：

import { Point } from 'ol/geom'//用于绘点
import * as olEasing from 'ol/easing'//移动地图的动画效果
import Feature from 'ol/Feature'
import {Fill, Stroke, Style,Circle, Icon,Text} from 'ol/style'
import cityItemImg from '../img/newContentImg/city-item.png'//引入默认图标
import citySelectImg from '../img/newContentImg/city-select.png'//引入选中图标
显示场景，进入页面显示坐标图标。
数据data例：
let data = [
  {id:1,coordinate:[ 120.078006, 30.300977]},
下面这个方法是把所有数据渲染到地图上的方法。
addAllIcon(data){
  let addressLayer = null
  let layers = this.map.getLayers().getArray()
  addressLayer = layers.filter((l) => l.get('lid') === 'addressLayer')
  let layerSource = null
  if (layers.length > 0) {
    layerSource =  addressLayer[0].getSource()
  if (layerSource) {
    layerSource.clear();
    let arr = [];
    for (let i = 0; i < data.length; i++) {
      const e = data[i];
      if(e.coordinate){
        const feature = new Feature({ geometry: new Point(e.coordinate), feature_id: e.id })
        feature.setStyle(
          new Style({
            image: new Icon({
              src: cityItemImg,//图标地址
              scale: 0.9,//size大小 等比大小 默认1
        this.specialFeature = null;// 默认进来没有选中feature
        layerSource.addFeature(feature)
2、渲染选中图标并移动到坐标点
下面这个方法是当选择单个数据时，高亮（改图标）并移动地图使这个数据位于数据正中间。

功能逻辑：移除上次选中的specialFeature，渲染新的feature，更新这个选中结果。

注意：这个方法中没有清除这个图层，只移除了单个的feature，这个feature也不是上面那个方法中添加的feature，而是下面的方法添加的；所以实际上是在原来的图层上覆盖了一个图层，这个图层上只有这一个feature也就是specialFeature。
toSpecialIcon(item) {
  let coordinate = item.coordinate;
  let addressLayer = null
  let layers = this.map.getLayers().getArray()
  addressLayer = layers.filter((l) => l.get('lid') === 'addressLayer')
  let layerSource = null
  if (layers.length > 0) {
    layerSource =  addressLayer[0].getSource()
  if (layerSource) {
    layerSource.removeFeature(this.specialFeature)
    const feature = new Feature({ geometry: new Point(coordinate), feature_id: item.id })
    feature.setStyle(
      new Style({
        image: new Icon({
          src: citySelectImg,//图标地址
          scale: 0.9,//size大小 等比大小 默认1
    this.specialFeature = feature;
    layerSource.addFeature(feature)
  this.map.getView().animate({
    center: coordinate, // 目标位置
    easing: olEasing.easeOut // 动画: 传入动画函数，olEasing是内置动画集
3、效果图
这里高亮是选中了数据才跳过来的，还有一种是点击这个图标移动过来，下次再加上。

        前端工程师