手机使用天地图,需要在地图上实现点定位,点聚合功能。开始使用的是openlayer,底图天地图,但是在手机模拟器和真机上地图没有出现。因为ol源开发文件大,后采用renderjs+leaflet开发。
1. 将leaflet.js,leaflet.css文件放到static文件下。2.
2. 废话不多说,直接上代码:
<template>
<view :data="data" :change:data="leaflet.addMarker" class="map" id="mapId"></view>
</template>
<script>
export default {
data(){
return {
data:[]
}
}
methods: {
//接收renderjs发回的数据
markerclick(properties) {
},
}
}
</script>
<script module="leaflet" lang="renderjs">
import * as L from 'static/js/leaflet.js';
export default {
data() {
return {
map: null,
};
},
mounted() {
this.initMap()
},
methods: {
// 加载天地图
initMap() {
this.map = L.map('mapId', {
center: [38.180695, 116.412674],
zoom: 10,
minZoom: 5,
maxZoom: 18,
dragging: true,
attributionControl: false,
zoomControl: false
});
L.tileLayer(
'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图tk', {
zoomControl: true
}).addTo(this.map);
L.tileLayer(
'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图tk', {
zoomControl: true
}).addTo(this.map);
},
// 接收逻辑层发送的数据
addMarker(points) {
// 获取到数据,进行处理,可以是添加标记,也可以是其他处理
var styleFunction = L.icon({
opacity: 1,
iconUrl: '',//图片地址’,
iconSize: [24, 28],
iconAnchor: [12, 14],
});
let layer = L.geoJSON(points, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: styleFunction
});
},
onEachFeature: (feature, lay) => {
// Feature点击事件
lay.on('click', () => {
this.$ownerInstance.callMethod('markerclick', feature.properties);
})
}
}).addTo(this.map);
}
}
}
</script>
<style>
@import url('@/static/js/leaflet.css');
</style>
3. leaflet 在地图上画图形,有多种方式,具体可以查看leaflet 官网API。
简单记录一下,如有问题共同学习。