项目中用到了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了(