小程序地图

liuyg

2021-05-11 f77c76036252275735a9ab379b58bc1d8f749c5d

小程序地图

 public/xcxh5map/css/body.css

@@ -43,13 +43,13 @@
    justify-content: center;
}

.title::after {
/* .title::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border: springgreen solid 1px;
}
} */

.main {
    display: flex;

 public/xcxh5map/js/vueMain.js

@@ -17,6 +17,27 @@
        drawer: false,
    },
    methods: {
        getDataList() {
            var that = this;
            var url = 'https://web.byisf.com/api/blade-jfpts/equipment/equipment/listAll';
            axios.get(url).then((res) => {
                that.getdata = res.data.data;
                that.beginCome();
            })
        },
        beginCome() {
            // this.getdata = this.getQueryVariable('data');//url解码

            this.map = this.beginMap(this.map, this.getdata);//创建并接受map
            this.move = new myDomMove('#seedata', '.title', '#map');
            var dy = document.documentElement.clientHeight - 50;
            $('#seedata').animate({ top: dy + "px" }, 10);
            $('#map').css("height", (index, value) => {//改变地图高度
                return '100%';
            })
            this.map.invalidateSize(true);//应用地图高度
            this.move.followFinger(this.map, 'up');
        },
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
@@ -30,16 +51,20 @@
            var that = this;
            var createMap = () => {
                map = L.map('map', { //初始化地图
                    center: [31.87, 120.54],
                    center: [28.658056100535727, 115.85803985595703],
                    zoom: 12,
                    // crs: L.CRS.EPSG4326, //设置坐标系4326
                    minZoom: 2,
                    maxZoom: 17,
                    attributionControl: false, //去掉右下角
                    zoomControl: false, //去掉缩放
                });
                L.tileLayer( //添加切片图层
                    "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
                    subdomains: ["1", "2", "3", "4"],
                    attribution: "高德"
                    // "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", {//顺丰地图
                    "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", {//顺丰地图
                    // "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {

                    // subdomains: ["1", "2", "3", "4"],
                    // attribution: "高德"
                }
                ).addTo(map);
            }
@@ -64,8 +89,8 @@
                });
            console.log(data, 43545343)
            var setData = (a) => {//定义图标
                marker = L.marker([a.jd, a.wd], {
                    icon: a.state == 0 ? carIcon : a.state == 1 ? planeIcon : a.state == 2 ? busIcon : '',
                marker = L.marker([a.wd, a.jd], {
                    icon: a.dtype == 0 ? carIcon : a.dtype == 1 ? planeIcon : a.dtype == 2 ? busIcon : '',
                    title: title,
                    myData: {//自定义数据
                        ...a
@@ -75,11 +100,11 @@
            for (var i = 0; i < data.length; i++) {
                var a = data[i];
                var title = a.title;
                if (a.state == 0) {
                if (a.dtype == 0) {
                    setData(a);
                } else if (a.state == 1) {
                } else if (a.dtype == 1) {
                    setData(a);
                } else if (a.state == 2) {
                } else if (a.dtype == 2) {
                    setData(a);
                }
                // marker.bindPopup(title);
@@ -100,22 +125,31 @@
                that.move.followFinger(map, 'down');

            });

            // map.on('mousemove', (e) => {//实时显示坐标
            //     let latlng = e.latlng;
            //     console.log(latlng);// {lat: 30.59, lng: 114.32}
            // });
            return map;//抛出map
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        }
    },
    created() {
    },
    mounted() {
        this.getdata = this.getQueryVariable('data');
        this.map = this.beginMap(this.map, this.getdata);//创建并接受map
        this.move = new myDomMove('#seedata', '.title', '#map');
        var dy = document.documentElement.clientHeight - 50;
        $('#seedata').animate({ top: dy + "px" }, 10);
        $('#map').css("height", (index, value) => {//改变地图高度
            return '100%';
        })
        this.map.invalidateSize(true);//应用地图高度
        this.move.followFinger(this.map, 'up');
        this.getDataList();
        // this.getdata = this.getQueryVariable('data');//url解码

        // this.map = this.beginMap(this.map, this.getdata);//创建并接受map
        // this.move = new myDomMove('#seedata', '.title', '#map');
        // var dy = document.documentElement.clientHeight - 50;
        // $('#seedata').animate({ top: dy + "px" }, 10);
        // $('#map').css("height", (index, value) => {//改变地图高度
        //     return '100%';
        // })
        // this.map.invalidateSize(true);//应用地图高度
        // this.move.followFinger(this.map, 'up');
    }
})

 public/xcxh5map/lid/proj4.js

New file
Diff too large

 public/xcxh5map/lid/proj4leaflet.js

New file
@@ -0,0 +1,263 @@
(function (factory) {
    var L, proj4;
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['leaflet', 'proj4'], factory);
    } else if (typeof module === 'object' && typeof module.exports === "object") {
        // Node/CommonJS
        L = require('leaflet');
        proj4 = require('proj4');
        module.exports = factory(L, proj4);
    } else {
        // Browser globals
        if (typeof window.L === 'undefined' || typeof window.proj4 === 'undefined')
            throw 'Leaflet and proj4 must be loaded first';
        factory(window.L, window.proj4);
    }
}(function (L, proj4) {

    L.Proj = {};

    L.Proj._isProj4Obj = function(a) {
        return (typeof a.inverse !== 'undefined' &&
            typeof a.forward !== 'undefined');
    };

    L.Proj.Projection = L.Class.extend({
        initialize: function(code, def, bounds) {
            var isP4 = L.Proj._isProj4Obj(code);
            this._proj = isP4 ? code : this._projFromCodeDef(code, def);
            this.bounds = isP4 ? def : bounds;
        },

        project: function (latlng) {
            var point = this._proj.forward([latlng.lng, latlng.lat]);
            return new L.Point(point[0], point[1]);
        },

        unproject: function (point, unbounded) {
            var point2 = this._proj.inverse([point.x, point.y]);
            return new L.LatLng(point2[1], point2[0], unbounded);
        },

        _projFromCodeDef: function(code, def) {
            if (def) {
                proj4.defs(code, def);
            } else if (proj4.defs[code] === undefined) {
                var urn = code.split(':');
                if (urn.length > 3) {
                    code = urn[urn.length - 3] + ':' + urn[urn.length - 1];
                }
                if (proj4.defs[code] === undefined) {
                    throw 'No projection definition for code ' + code;
                }
            }

            return proj4(code);
        }
    });

    L.Proj.CRS = L.Class.extend({
        includes: L.CRS,

        options: {
            transformation: new L.Transformation(1, 0, -1, 0)
        },

        initialize: function(a, b, c) {
            var code,
                proj,
                def,
                options;

            if (L.Proj._isProj4Obj(a)) {
                proj = a;
                code = proj.srsCode;
                options = b || {};

                this.projection = new L.Proj.Projection(proj, options.bounds);
            } else {
                code = a;
                def = b;
                options = c || {};
                this.projection = new L.Proj.Projection(code, def, options.bounds);
            }

            L.Util.setOptions(this, options);
            this.code = code;
            this.transformation = this.options.transformation;

            if (this.options.origin) {
                this.transformation =
                    new L.Transformation(1, -this.options.origin[0],
                        -1, this.options.origin[1]);
            }

            if (this.options.scales) {
                this._scales = this.options.scales;
            } else if (this.options.resolutions) {
                this._scales = [];
                for (var i = this.options.resolutions.length - 1; i >= 0; i--) {
                    if (this.options.resolutions[i]) {
                        this._scales[i] = 1 / this.options.resolutions[i];
                    }
                }
            }

            this.infinite = !this.options.bounds;

        },

        scale: function(zoom) {
            var iZoom = Math.floor(zoom),
                baseScale,
                nextScale,
                scaleDiff,
                zDiff;
            if (zoom === iZoom) {
                return this._scales[zoom];
            } else {
                // Non-integer zoom, interpolate
                baseScale = this._scales[iZoom];
                nextScale = this._scales[iZoom + 1];
                scaleDiff = nextScale - baseScale;
                zDiff = (zoom - iZoom);
                return baseScale + scaleDiff * zDiff;
            }
        },

        zoom: function(scale) {
            // Find closest number in this._scales, down
            var downScale = this._closestElement(this._scales, scale),
                downZoom = this._scales.indexOf(downScale),
                nextScale,
                nextZoom,
                scaleDiff;
            // Check if scale is downScale => return array index
            if (scale === downScale) {
                return downZoom;
            }
            // Interpolate
            nextZoom = downZoom + 1;
            nextScale = this._scales[nextZoom];
            if (nextScale === undefined) {
                return Infinity;
            }
            scaleDiff = nextScale - downScale;
            return (scale - downScale) / scaleDiff + downZoom;
        },

        distance: L.CRS.Earth.distance,

        R: L.CRS.Earth.R,

        /* Get the closest lowest element in an array */
        _closestElement: function(array, element) {
            var low;
            for (var i = array.length; i--;) {
                if (array[i] <= element && (low === undefined || low < array[i])) {
                    low = array[i];
                }
            }
            return low;
        }
    });

    L.Proj.GeoJSON = L.GeoJSON.extend({
        initialize: function(geojson, options) {
            this._callLevel = 0;
            L.GeoJSON.prototype.initialize.call(this, geojson, options);
        },

        addData: function(geojson) {
            var crs;

            if (geojson) {
                if (geojson.crs && geojson.crs.type === 'name') {
                    crs = new L.Proj.CRS(geojson.crs.properties.name);
                } else if (geojson.crs && geojson.crs.type) {
                    crs = new L.Proj.CRS(geojson.crs.type + ':' + geojson.crs.properties.code);
                }

                if (crs !== undefined) {
                    this.options.coordsToLatLng = function(coords) {
                        var point = L.point(coords[0], coords[1]);
                        return crs.projection.unproject(point);
                    };
                }
            }

            // Base class' addData might call us recursively, but
            // CRS shouldn't be cleared in that case, since CRS applies
            // to the whole GeoJSON, inluding sub-features.
            this._callLevel++;
            try {
                L.GeoJSON.prototype.addData.call(this, geojson);
            } finally {
                this._callLevel--;
                if (this._callLevel === 0) {
                    delete this.options.coordsToLatLng;
                }
            }
        }
    });

    L.Proj.geoJson = function(geojson, options) {
        return new L.Proj.GeoJSON(geojson, options);
    };

    L.Proj.ImageOverlay = L.ImageOverlay.extend({
        initialize: function (url, bounds, options) {
            L.ImageOverlay.prototype.initialize.call(this, url, null, options);
            this._projectedBounds = bounds;
        },

        // Danger ahead: Overriding internal methods in Leaflet.
        // Decided to do this rather than making a copy of L.ImageOverlay
        // and doing very tiny modifications to it.
        // Future will tell if this was wise or not.
        _animateZoom: function (event) {
            var scale = this._map.getZoomScale(event.zoom);
            var northWest = L.point(this._projectedBounds.min.x, this._projectedBounds.max.y);
            var offset = this._projectedToNewLayerPoint(northWest, event.zoom, event.center);

            L.DomUtil.setTransform(this._image, offset, scale);
        },

        _reset: function () {
            var zoom = this._map.getZoom();
            var pixelOrigin = this._map.getPixelOrigin();
            var bounds = L.bounds(
                this._transform(this._projectedBounds.min, zoom)._subtract(pixelOrigin),
                this._transform(this._projectedBounds.max, zoom)._subtract(pixelOrigin)
            );
            var size = bounds.getSize();

            L.DomUtil.setPosition(this._image, bounds.min);
            this._image.style.width = size.x + 'px';
            this._image.style.height = size.y + 'px';
        },

        _projectedToNewLayerPoint: function (point, zoom, center) {
            var viewHalf = this._map.getSize()._divideBy(2);
            var newTopLeft = this._map.project(center, zoom)._subtract(viewHalf)._round();
            var topLeft = newTopLeft.add(this._map._getMapPanePos());

            return this._transform(point, zoom)._subtract(topLeft);
        },

        _transform: function (point, zoom) {
            var crs = this._map.options.crs;
            var transformation = crs.transformation;
            var scale = crs.scale(zoom);

            return transformation.transform(point, scale);
        }
    });

    L.Proj.imageOverlay = function (url, bounds, options) {
        return new L.Proj.ImageOverlay(url, bounds, options);
    };

    return L.Proj;
}));

 public/xcxh5map/xcxmap.html

@@ -22,6 +22,9 @@
    <!-- <link rel="stylesheet" href="../map/lib/layui/css/layui.css" media="all"> -->
    <!-- <script src="../map/lib/layui/layui.js" charset="utf-8"></script> -->

    <!-- axios支持 -->
    <script src="../map/lib/axios.js"></script>

    <!-- elementui -->
    <script src="../map/lib/elementUi.js"></script>
    <!-- <link rel="stylesheet" href="../map/lib/elementUi.css"> -->
@@ -44,15 +47,10 @@

<body>
    <div id="mapVue">
        <!-- <div class="popup">
            <el-drawer title="我是标题" :visible.sync="drawer" >
                <span>我来啦!123{{dialogVisible}}222</span>
            </el-drawer>
        </div> -->
        <div id="map"></div>
        <div id="seedata">
            <div class="title">
                {{seedata.title}}
                {{seedata.deviceName}}
            </div>
            <div class="main">
                <div>