uniapp+h5混合开发实现天地图手机加载

手机使用天地图，需要在地图上实现点定位，点聚合功能。开始使用的是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。

简单记录一下，如有问题共同学习。