leaflet 使用高德地图实例


 解决 Android使用高德地图定位,在web端leaflet同样的使用高德地图,不然会出现坐标偏移的问题
 
 
  /**
     * 加载地图
     * leaflet openstreetmap城市地图:https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
     * leaflat  高德在线城市地图:http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}
     */
    create_gmap() {
        this.map = L.map(this.page_id + '-map', { editable: true }).setView([39.580638, 109.749318], 13.0);
        L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', {
            minZoom: 10,
            maxZoom: 20,
            tms: false,
            attribution: '伊金霍洛旗',
            pmIgnore: true
        }).addTo(this.map);
        // FeatureGroup is to store editable layers

 

        var drawnItems = new L.FeatureGroup();
        this.map.addLayer(drawnItems);
        var drawControl = new L.Control.Draw({
            edit: {
                featureGroup: drawnItems
            }
        });
        this.map.addControl(drawControl);
        this.map.on(L.Draw.Event.CREATED, (e) => {
            var type = e.layerType,
                layer = e.layer;
            if (type === 'marker') {
                layer.bindPopup('A popup!');
            }
            console.log(layer.toGeoJSON());
            // this.add_title(layer);
        });
        //加载伊金霍洛旗矢量图层
        $.getJSON("assets/150627.json", (data) => {
            console.log(data);
            var datalayer = L.geoJson(data, { pmIgnore: true, style: { fillColor: '#00000000' } }).addTo(this.map);
            console.log(datalayer);

 

        });
    }


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM