关于我为什么使用了 在线的 js引入方法,而不是使用 npm 直接下载依赖问题,之前有一篇文章讲过原因:关于 Vue-iClient-MapboxGL 的使用注意事项
网上提供的 vue-iclient-mapboxgl 比较多,但是我这里使用的是 iclient-supermap, 以及 mapboxgl 中的 api。
如果各位大佬有幸能帮助解答,可直接留言回复我,感谢。
因为给公司写的内容涉密,所以给定一个基础样式实例
最佳路径分析:https://iclient.supermap.io/examples/classic/editor.html#analysis_findPath
上述示例仅完成选点规划路径,还要增加输入框输入功能,就结合了 地址的正向匹配和反向匹配功能
地址匹配:https://iclient.supermap.io/examples/mapboxgl/editor.html#addressMatchService
我使用的 在线方法引入:
<link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.css" rel="stylesheet" />
<link href="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.js"></script>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
当你引入之后在控制台打印内容就会发现这种引入方法和 npm 引入的内容不同。(请求解答)
// 地图配置
mapOptions: {
container: 'map', // container id
style: ****, // 提供的地图配置,也可自己研究json直接写入即可
center: [101, 38], // starting position
zoom: 13, // starting zoom
maxZoom: 16,
minZoom: 10,
},
init() {
mapboxgl.accessToken = '*********';
const map = new mapboxgl.Map(this.mapOptions);
// 添加控件
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
const geojson = {
type: 'FeatureCollection',
features: [],
};
// 加载地图 - 处理方法
map.on('load', () => {
//初始化标记图层类
map.addSource('geojson', {
type: 'geojson',
data: geojson,
});
});
this.map = map;
this.selectPoints() // 点击选点方法
},
// 放入数组中
map.on('click', async(e) => {
let point = [e.lngLat.lng, e.lngLat.lat]
this.fillInputWithPoint(point)
});
/**
* 在地图上添加标记点
* point: [lng, lat]
* color: '#83f7a0'
*/
addMarkerOnMap(point, color = '#83f7a0') {
const marker = new mapboxgl.Marker({
draggable: false,
color: color,
}).setLngLat(point).addTo(this.map);
this.markersList.push(marker);
},
按照参数要求提交即可,这边设计**内容
以上方法均为不完成代码示例,若有需要可直接留言!特总结思路