OpenLayers笔记

项目中用到了ol，但是写法跟网上搜到的不太一样，记一下方便后面用
新建map

    <ol-map
      ref="map"
      :load-tiles-while-animating="true"
      :load-tiles-while-interacting="true"
      class="map__x"
      @click="mapClick"
      @movestart="movestart"
      @moveend="moveend"
    >

新建视图

      <ol-view
        ref="view"
        :center="view.center"
        :rotation="view.rotation"
        :zoom="view.zoom"
        :max-zoom="view.maxZoom"
        :min-zoom="view.minZoom"
        :constrain-resolution="view.constrainResolution"
      />

新建vector层（一条线）

      <ol-vector-layer>
        <ol-source-vector>
          <ol-feature ref="overlay">
            <ol-geom-line-string :coordinates="taskMap" />
            <ol-style>
              <ol-style-stroke color="#848484" :width="5" line-cap="butt"  />
            </ol-style>
          </ol-feature>
        </ol-source-vector>
      </ol-vector-layer>

其中taskMap格式[[fromLonLat([lon,lat])],[fromLonLat([lon,lat])],…]
新建vector层（多条线）

      <ol-vector-layer>
        <ol-source-vector>
          <ol-feature ref="overlay">
            <ol-geom-multi-line-string :coordinates="multipleLines"/>
            <ol-style>
              <ol-style-stroke color="#848484" :width="5" line-cap="butt"  />
            </ol-style>
          </ol-feature>
        </ol-source-vector>
      </ol-vector-layer>

其中multipleLines格式[taskMap,taskMap,…]

用到高德导航文档
index里需要引入用到的插件（这里是Driving)

import AMapLoader from '@amap/amap-jsapi-loader';
            AMapLoader.load({
              plugins: ['AMap.Driving'],
            }).then((AMap) => {
              let driving=new AMap.Driving({
              //策略，可选有很多，选的最快的
                policy: AMap.DrivingPolicy.LEAST_TIME
              })
              //siteList里是需要连起来的节点列表
              for(let i=0;i<siteList.length-1;i++){
                driving.search(siteList[i], siteList[i+1], function (status, result) {
                  // 未出错时，result即是对应的路线规划方案
                  if(status=='complete'){
                    for(const step of result.routes[0].steps){
                      //pos 格式[12955415.215279303, 4846312.905273205]，就是fromLonLat处理经纬度后的格式，openlayers要的是这种格式
                      //[lng,lat]
                      //需求不用很精细，只拿了每一步起点和终点的值，也可以拆里面的step细节出来效果就会比较精准
                      that.taskMap.push(step['end_location'].pos)
                    }
                  }
                })
              }
            });

效果

然后被打回去重新设计UI了(