zoukankan      html  css  js  c++  java
  • 高德地图的使用

    layui.define(['jquery', 'notice'], function (exports) {
        let $ = layui.jquery;
        let notice = layui.notice;
    
        /**
         * 模拟请求,判断网络
         * @param {function} callback 回调
         */
        function onLine(callback) {
            let img = new Image();
            img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
            img.onload = function () {
                if (callback) callback(true)
            };
            img.onerror = function () {
                if (callback) callback(false)
            };
        }
    
        function gaodeMap() {
            let that = this;
    
            this.map;
    
            let defaultOpt = {
                domID: 'container',
                zoom: 16,
                mapCenter: [121.503144, 31.235309]
            }
    
            this.opt = defaultOpt
    
            this.render = function (option) {
                // 根据网络情况,加载地图
                onLine(function (flag) {
                    if (flag) {
                        window.onLoad = function () {
                            that.opt = $.extend({}, defaultOpt, option);
                            that.init();
    
                            if (typeof option.done === 'function') {
                                option.done();
                            }
                        };
    
                        let url = 'https://webapi.amap.com/maps?v=1.4.15&key=d57b9f334d35402807617176c660f1c3&callback=onLoad&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.CitySearch,AMap.PolyEditor,AMap.CircleEditor';
                        let jsapi = document.createElement('script');
                        jsapi.charset = 'utf-8';
                        jsapi.src = url;
                        document.head.appendChild(jsapi);
                    } else {
                        option.done();
                        console.log('网络故障,禁止使用地图');
                    }
                });
            }
        }
    
        /*
         * @method
         * @desc 卫星地图
         */
        gaodeMap.prototype.SatelliteLayer;
    
        gaodeMap.prototype.TileLayer;
    
        /*
         * @method
         * @param {object} lnglat 高德经纬度对象或者经纬度数组
         * @desc 初始化地图对象
         */
        gaodeMap.prototype.init = function () {
            let that = this;
    
            this.SatelliteLayer = new AMap.TileLayer.Satellite();
            this.TileLayer = new AMap.TileLayer();
    
            this.map = new AMap.Map(that.opt.domID, {
                zoom: that.opt.zoom,
                zooms: [5, 18],
                center: that.opt.mapCenter,
                viewMode: '3D',
                pitch: 60,
                resizeEnable: true,
            });
    
            if (this.SatelliteLayerBuildings) {
                this.map.add(this.SatelliteLayerBuildings)
            }
    
            // 3D地图
            this.add3DCompass();
    
            // 鼠标工具
            this.mouseTool = new AMap.MouseTool(that.map);
        }
    
        gaodeMap.prototype.checkMap = function () {
            if (!this.map) {
                notice.error('地图未加载或正在加载,请稍后再试')
                return true;
            }
        }
    
        /**
         * 当你不想每个函数都检查地图是否已加载时,可以使用以下方式执行函数
         */
        /**
         * 
        gaodeMap.prototype.ExcuteFunction = function (funcName,...params) {
            if (that.checkMap()) {
                return;
            }
    
            this[funcName].apply(this,params);
        }
         */
    
        /*
         * @method
         * @desc 添加3D地图
         */
        gaodeMap.prototype.add3DCompass = function () {
            let that = this;
    
            if (that.checkMap()) {
                return;
            }
    
            AMap.plugin([
                'AMap.ControlBar',
            ], function () {
                // 添加 3D 罗盘控制
                that.map.addControl(new AMap.ControlBar({
                    position: { top: '50px', right: '20px' }
                }));
            });
        }
    
        /*
         * @method
         * @desc 添加卫星地图
         */
        gaodeMap.prototype.addSatelliteLayer = function () {
            if (this.checkMap()) {
                return;
            }
    
            if (this.SatelliteLayer) {
                this.map.add(this.SatelliteLayer);
            }
        }
    
        /*
         * @method
         * @desc 移除卫星地图
         */
        gaodeMap.prototype.removeSatelliteLayer = function () {
            if (this.checkMap()) {
                return;
            }
    
            this.map.remove(this.SatelliteLayer);
        }
    
        /*
         * @method
         * @desc 添加卫星地图
         */
        gaodeMap.prototype.addTileLayer = function () {
            if (this.checkMap()) {
                return;
            }
            this.map.add(this.TileLayer);
        }
    
        /*
         * @method
         * @desc 移除卫星地图
         */
        gaodeMap.prototype.removeTileLayer = function () {
            if (this.checkMap()) {
                return;
            }
            this.map.remove(this.TileLayer);
        }
    
        /*
         * @method
         * @param {object} option
         * @param {object} option.lnglat 高德经纬度对象或者经纬度数组
         * @param {object} option.type 移动方式
         * @desc 设置地图中心位置
         */
        gaodeMap.prototype.setCenter = function (option) {
            if (this.checkMap()) {
                return;
            }
    
            if (!option) {
                return;
            }
    
            if (!option.lnglat) {
                return;
            }
    
            option.type = option.type || 1;
    
            if (option.type == 1) {
                this.map.setCenter(option.lnglat);
            } else {
                this.map.panTo(option.lnglat);
            }
        }
    
        /*
         * @method
         * @desc 标记点集合
         */
        gaodeMap.prototype.markers = {};
    
        /*
         * @method
         * @param {object} option
         * @param {object} option.lnglat 高德经纬度对象或者经纬度数组
         * @param {object} option.size 图片大小,图片地址无时,此项无效
         * @param {object} option.imageUrl 图片地址
         * @param {object} option.extData 自定义数据
         * @param {object} option.click 点的单击事件
         * @desc 设置地图中心位置
         */
        gaodeMap.prototype.addMarker = function (option) {
            if (this.checkMap()) {
                return;
            }
    
            var defaultOption = {
                //lnglat
                size: [32, 32],
                imageUrl: undefined
            };
    
            var tempOpt = $.extend({}, defaultOption, option);
    
            var markerOpt = {
                map: this.map
            };
    
            // 经纬度
            if (!tempOpt.lnglat) {
                return;
            }
    
            markerOpt.position = tempOpt.lnglat;
    
            // 自定义图片
            if (tempOpt.imageUrl) {
                markerOpt.icon = new AMap.Icon({
                    size: new AMap.Size(tempOpt.size[0], tempOpt.size[1]),
                    image: tempOpt.imageUrl,
                    imageSize: new AMap.Size(tempOpt.size[0], tempOpt.size[1])
                })
    
                markerOpt.offset = new AMap.Pixel(-(tempOpt.size[0] / 2), -tempOpt.size[1])
            }
    
            // 鼠标滑过时的显示
            markerOpt.title = tempOpt.title || '';
    
            // 自定义参数
            markerOpt.extData = tempOpt.extData;
            markerOpt.key = tempOpt.key;
    
            var marker = new AMap.Marker(markerOpt);
    
            if (option.isPanTo) {
                this.map.panTo(tempOpt.lnglat);
            }
    
            if (!markerOpt.key) {
                markerOpt.key = this.newGuid();
            }
    
            this.markers[markerOpt.key] = marker;
    
            if (tempOpt.click) {
                marker.on('click', function (e) {
                    tempOpt.click(e, marker.getExtData());
                })
            }
    
            if (typeof tempOpt.clickAfter === 'function') {
                tempOpt.clickAfter(tempOpt.extData);
            }
    
            // 文本标注
            if (tempOpt.labelText) {
                this.addMarkerLabel(marker, tempOpt.labelText)
            }
    
            return marker;
        }
    
        gaodeMap.prototype.addMarkerLabel = function (marker, label) {
            marker.setLabel({
                offset: new AMap.Pixel(0, -30),  //设置文本标注偏移量
                content: '<div class="map-label"><div>' + label + '<div> </div></div></div>', //设置文本标注内容
                direction: 'top' //设置文本标注方位
            });
        }
    
        /*
         * @method
         * @param {bool} type true:清除点  false:清除地图
         * @desc 清除地图上的标记
         */
        gaodeMap.prototype.clearMarkers = function (type, callback) {
            if (this.checkMap()) {
                return;
            }
    
            if (type) {
                $.each(this.markers, function (key, value) {
                    value.setMap(null);
                })
            } else {
                this.map.clearMap();
            }
    
            this.markers = {};
    
            if (this.clusterer) {
                this.clusterer.setMap(null);
                this.clusterer = undefined;
            }
    
            if (typeof callback == 'function') {
                callback()
            }
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @param {bool} isExclude bool:指定删除内容,true:删除不包含key的所有内容,false:删除包含可以的marker
         * @desc 清除地图上的标记
         */
        gaodeMap.prototype.clearMarker = function (key, isExclude) {
            if (this.checkMap()) {
                return;
            }
    
            if (isExclude == undefined) {
                isExclude = false;
            }
    
            var that = this;
    
            if (!isExclude) {
                if (key) {
                    if (this.markers[key]) {
                        var marker = this.markers[key];
    
                        marker.setMap(null);
    
                        delete this.markers[key]
                    }
                }
                //this.markers = {};
    
                if (this.clusterer) {
                    this.clusterer.setMap(null);
                    this.clusterer = undefined;
                }
            }
            else {
                $.each(that.markers, function (k, v) {
                    if (k != key) {
                        v.setMap(null);
    
                        delete that.markers[k]
                    }
                })
            }
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识的一部分
         * @desc 清除地图上的标记
         */
        gaodeMap.prototype.clearAssignMarkers = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            var that = this
    
            var keys = [];
    
            $.each(that.markers, function (k, v) {
                if (k.indexOf(key) > -1) {
                    keys.push(k);
                    v.setMap(null);
                }
            })
    
            $.each(keys, function (i, item) {
                delete that.markers[item];
            })
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @desc 根据key获取marker对象
         */
        gaodeMap.prototype.getMarker = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            if (key) {
                return this.markers[key]
            }
            return undefined;
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识的一部分
         * @desc 根据key获取marker对象集合
         */
        gaodeMap.prototype.getMarkers = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            var mrks = [];
    
            $.each(that.markers, function (k, v) {
                if (k.indexOf(key) > -1) {
                    mrks.push(v);
                }
            })
    
            return mrks;
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @param {array} size array:图标大小,默认值[60,60]
         * @desc 根据key设置图标大小
         */
        gaodeMap.prototype.setMarkerIcon = function (key, size) {
            if (this.checkMap()) {
                return;
            }
    
            var marker = this.markers[key]
    
            if (marker) {
                var _size = [60, 60];
    
                if (size) {
                    _size = size;
                }
    
                var icon = marker.getIcon()
    
                marker.setIcon(new AMap.Icon({
                    size: new AMap.Size(_size[0], _size[1]),
                    image: icon.w.image,
                    imageSize: new AMap.Size(_size[0], _size[1])
                }))
    
                marker.setOffset(new AMap.Pixel(-(_size[0] / 2), -_size[1]))
            }
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @desc 选中时的图标大小
         */
        gaodeMap.prototype.checkedMarker = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            this.setMarkerIcon(key, [45, 45]);
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @desc 反选时的图标大小
         */
        gaodeMap.prototype.uncheckedMarker = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            this.setMarkerIcon(key, [32, 32]);
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @desc 设置所有图标,按反选时的图标大小设置
         */
        gaodeMap.prototype.setAllMarkersIcon = function () {
            if (this.checkMap()) {
                return;
            }
    
            var that = this;
    
            $.each(that.markers, function (k, v) {
                that.uncheckedMarker(k);
            })
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @desc 设置所有图标,按反选时的图标大小设置
         */
        gaodeMap.prototype.setUncheckedMarkersIcon = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            var that = this;
    
            $.each(that.markers, function (k, v) {
                if (k.indexOf(key) > -1) {
                    that.uncheckedMarker(k);
                }
            })
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识的一部分
         * @desc 设置选中的marker的图标大小
         */
        gaodeMap.prototype.setCheckedMarkersIcon = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            var that = this;
    
            $.each(that.markers, function (k, v) {
                if (k.indexOf(key) > -1) {
                    that.checkedMarker(k);
                }
            })
        }
    
        /*
         * @method
         * @desc 弹框对象
         */
        gaodeMap.prototype.infoWindow = undefined;
    
        /*
         * @method
         * @desc 关闭弹框
         */
        gaodeMap.prototype.addInfoWindow = function (option) {
            if (this.checkMap()) {
                return;
            }
    
            if (!option) {
                return
            }
            var html;
            if (option.content) {
                html = $(option.content)
            }
    
            this.infoWindow = new AMap.InfoWindow({
                offset: option.offset || new AMap.Pixel(0, -34),
                isCustom: true,// 自定义窗体  默认false
                closeWhenClickMap: option.closeWhenClickMap == undefined ? false : option.closeWhenClickMap, // 点击地图关闭信息窗,默认不关闭
                content: html.get(0)  //使用默认信息窗体框样式,显示信息内容
            });
    
            this.infoWindow.open(this.map, option.lnglat);
    
            this.bindCloseInfoWindow(html, option);
    
            if (typeof option.addFinish === 'function') {
                option.addFinish(html, option.extData);
            }
        }
    
        /*
         * @method
         * @desc 绑定关闭弹框事件
         */
        gaodeMap.prototype.bindCloseInfoWindow = function (html, option) {
            var that = this;
    
            html.find('.close-window').on('click', function () {
                that.infoWindow.close();
    
                if (typeof option.closeAfter === 'function') {
                    option.closeAfter(option.extData);
                }
            })
        }
    
        /*
         * @method
         * @desc 绑定关闭弹框事件
         */
        gaodeMap.prototype.closeInfoWindow = function () {
            if (this.infoWindow) {
                this.infoWindow.close();
            }
        }
    
        /*
         * @method
         * @desc 点聚合对象
         */
        gaodeMap.prototype.clusterer = undefined;
    
        /*
         * @method
         * @desc 添加点聚合效果
         */
        gaodeMap.prototype.addClusterer = function (keys, clickCallBack) {
            if (this.checkMap()) {
                return;
            }
    
            var tempMarkers = [];
            var that = this;
    
            for (var key in this.markers) {
                if (keys) {
                    $.each(keys, function (i, item) {
                        if (key.indexOf(item) > -1) {
                            tempMarkers.push(that.markers[key]);
                        }
                    })
                }
                else {
                    tempMarkers.push(that.markers[key]);
                }
            }
    
            if (!this.clusterer) {
                this.clusterer = new AMap.MarkerClusterer(this.map, tempMarkers, { gridSize: 80, maxZoom: 50, zoomOnClick: false });
    
                if (typeof clickCallBack === 'function') {
                    this.clusterer.on('click', function (cluster) {
                        clickCallBack(cluster)
                    })
                }
            } else {
                this.clusterer.clearMarkers();
                this.clusterer.setMarkers(tempMarkers);
            }
        }
    
        /*
         * @method
         * @desc 生成guid
         */
        gaodeMap.prototype.newGuid = function () {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
    
        /*
         * @method
         * @desc 覆盖物数组
         */
        gaodeMap.prototype.overlay = [];
    
        /*
         * @method
         * @desc 删除覆盖物
         */
        gaodeMap.prototype.removeOverlay = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            if (key) {
                if (this.overlay[key]) {
                    var overlay = this.overlay[key];
                    this.map.remove(overlay);
                    delete this.overlay[key]
                }
            }
        }
    
        /*
         * @method
         * @desc 添加圆
         */
        gaodeMap.prototype.addCircle = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            if (!opt.center) {
                console.error('未提供中心点坐标');
                return
            }
    
            if (!opt.radius || opt.radius == 0) {
                console.error('未提供半径');
                return
            }
    
            var _defaultOpt = {
                //center: coor,
                //radius: radius, //半径
                strokeColor: "#008ad8",//线条颜色
                strokeOpacity: 0.4,//透明度
                strokeWeight: 3,
                // 线样式还支持 'dashed'
                fillColor: '#00b0ff',
                fillOpacity: 0.4,//填充透明度
                bubble: true,//允许冒泡到地图
                map: this.map
            }
    
            var circleOpt = $.extend({}, _defaultOpt, opt)
    
            var circle = new AMap.Circle(circleOpt)
    
            if (typeof circleOpt.click === 'function') {
                circle.on('click', function (e) {
                    var data = circle.getExtData()
    
                    circleOpt.click(e, data);
                })
            }
    
            if (circleOpt.text) {
                var center = this.getLonAndLat(circleOpt.center.getLng(), circleOpt.center.getLat(), 180, circleOpt.radius)
    
                this.addText({
                    text: circleOpt.text,
                    offset: new AMap.Pixel(0, 10),
                    coor: new AMap.LngLat(center.lng, center.lat) //circleOpt.center
                })
            }
    
            if (!circleOpt.key) {
                circleOpt.key = this.newGuid();
            }
    
            this.overlay[circleOpt.key] = circle;
        }
    
        /*
         * @method
         * @desc 画圆
         */
        gaodeMap.prototype.drawCircle = function (callback) {
            if (this.checkMap()) {
                return;
            }
    
            let that = this;
            let option = {
                strokeColor: "#80d8ff",
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillColor: '#00b0ff',
                fillOpacity: 0.4,
                strokeStyle: 'solid',
            }
    
            that.mouseTool.close();
    
            that.mouseTool = new AMap.MouseTool(that.map);
    
            that.map.clearMap();
    
            that.mouseTool.circle(option)
    
            // 无法移除
            // that.mouseTool.off('draw');
    
            that.mouseTool.on('draw', function (event) {
                let radius = event.obj.getRadius()
                let center = event.obj.getCenter()
                callback && callback(radius, center)
    
                // 编辑
                that.editCircle({
                    callback: callback,
                    radius: radius,
                    center: center
                });
            });
        }
    
        /*
         * @method
         * @desc 编辑圆
         */
        gaodeMap.prototype.editCircle = function (option) {
            if (this.checkMap()) {
                return;
            }
    
            let that = this;
    
            let editOption = {
                strokeColor: "#008ad8",
                strokeWeight: 3,
                strokeOpacity: 0.4,
                fillColor: '#00b0ff',
                fillOpacity: 0.4,
                strokeStyle: 'solid',
                center: option.center,
                radius: option.radius, //半径
                borderWeight: 3,
                strokeDasharray: [10, 10],
                zIndex: 50,
                map: that.map
            }
    
            that.map.clearMap();
    
            // 编辑前,先删除图层
            let circle = new AMap.Circle(editOption);
    
            let circleEditor = new AMap.CircleEditor(that.map, circle);
    
            circleEditor.on('adjust', function (e) {
                option.callback && option.callback(e.radius, option.center)
            })
    
            circleEditor.on('move', function (e) {
                option.callback && option.callback(option.radius, e.lnglat)
            })
    
            circleEditor.open();    //打开圆形编辑器
    
            that.map.setFitView();
        }
    
        /**
        * 根据一个经纬度及距离角度,算出另外一个经纬度
        * @param {float} lng 经度 113.3960698
        * @param {float} lat 纬度 22.941386
        * @param {int} brng 方位角 45 ---- 正北方:000°或360° 正东方:090° 正南方:180° 正西方:270°
        * @param {int} dist 90000距离(米)
        *
        * 1、角度转换为弧度公式:弧度=角度×(π ÷度180 )
        * 2、弧度转换为角度公式: 角度=弧度×(180÷π)
        */
        gaodeMap.prototype.getLonAndLat = function (lng, lat, brng, dist) {
            //大地坐标系资料WGS-84 长半径a=6378137 短半径b=6356752.3142 扁率f=1/298.2572236
            var a = 6378137;
            var b = 6356752.3142;
            var f = 1 / 298.257223563;
    
            var lon1 = lng * 1;
            var lat1 = lat * 1;
            var s = dist;
            var alpha1 = brng * (Math.PI / 180)//mapNumberUtil.rad(brng);
            var sinAlpha1 = Math.sin(alpha1);
            var cosAlpha1 = Math.cos(alpha1);
    
            //var tanU1 = (1 - f) * Math.tan(mapNumberUtil.rad(lat1));
            var tanU1 = (1 - f) * Math.tan(lat1 * (Math.PI / 180));
            var cosU1 = 1 / Math.sqrt((1 + tanU1 * tanU1)), sinU1 = tanU1 * cosU1;
            var sigma1 = Math.atan2(tanU1, cosAlpha1);
            var sinAlpha = cosU1 * sinAlpha1;
            var cosSqAlpha = 1 - sinAlpha * sinAlpha;
            var uSq = cosSqAlpha * (a * a - b * b) / (b * b);
            var A = 1 + uSq / 16384 * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)));
            var B = uSq / 1024 * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)));
    
            var sigma = s / (b * A), sigmaP = 2 * Math.PI;
            while (Math.abs(sigma - sigmaP) > 1e-12) {
                var cos2SigmaM = Math.cos(2 * sigma1 + sigma);
                var sinSigma = Math.sin(sigma);
                var cosSigma = Math.cos(sigma);
                var deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
                    B / 6 * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM)));
                sigmaP = sigma;
                sigma = s / (b * A) + deltaSigma;
            }
    
            var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1;
            var lat2 = Math.atan2(sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1,
                (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp));
            var lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1);
            var C = f / 16 * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha));
            var L = lambda - (1 - C) * f * sinAlpha *
                (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)));
    
            var revAz = Math.atan2(sinAlpha, -tmp); // final bearing
    
            var lngLatObj = { lng: lon1 + L * (180 / Math.PI), lat: lat2 * (180 / Math.PI) }
            return lngLatObj;
        }
    
        /*
         * @method
         * @desc 添加多边形
         */
        gaodeMap.prototype.addPolygon = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            if (!opt.path || opt.path.length < 3) {
                console.error('未提供坐标')
                return
            }
    
            var _defaultOpt = {
                strokeColor: "#008ad8",//线条颜色
                strokeOpacity: 0.4,//透明度
                strokeWeight: 3,
                // 线样式还支持 'dashed'
                fillColor: '#00b0ff',
                fillOpacity: 0.4,//填充透明度
                bubble: true,//允许冒泡到地图
                map: this.map
            };
    
            var polygonOpt = $.extend({}, _defaultOpt, opt);
    
            var polygon = new AMap.Polygon(polygonOpt);
    
            if (typeof polygonOpt.click === 'function') {
                polygon.on('click', function (e) {
                    var data = polygon.getExtData()
    
                    polygonOpt.click(e, data);
                })
            }
    
            if (polygonOpt.text) {
                var point = this.getMinLatPoint(polygonOpt.path)
    
                this.addText({
                    text: polygonOpt.text,
                    offset: new AMap.Pixel(0, 10),
                    coor: point//polygonOpt.path
                })
            }
    
            if (!polygonOpt.key) {
                polygonOpt.key = this.newGuid();
            }
    
            this.overlay[polygonOpt.key] = polygon;
        }
    
        gaodeMap.prototype.getMinLatPoint = function (points) {
            var point = {};
    
            $.each(points, function (i, item) {
                if (item.getLat() < (point.lat || 999)) {
                    point = item;
                }
            })
    
            return point;
        }
    
        gaodeMap.prototype.addText = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            if (!opt.text) {
                console.error('添加文本标记失败,文本标记内容为空')
                return;
            }
    
            if (!opt.coor) {
                console.error('添加文本标记失败,文本标记坐标不确定')
                return;
            }
    
            var lnglat;
    
            if (opt.coor.length > 2) {
                lnglat = this.getCenterPoint(opt.coor);
            } else {
                lnglat = opt.coor;
            }
    
            var txt = new AMap.Text({
                text: opt.text,
                offset: opt.offset || new AMap.Pixel(0, 0),
                map: this.map,
                position: lnglat
            });
    
            txt.setStyle({ 'font-size': '10px' });
        }
    
        /**
         * 画多边形
         */
        gaodeMap.prototype.drawPolygon = function (callback) {
            if (this.checkMap()) {
                return;
            }
    
            let that = this;
            let option = {
                strokeColor: "#008ad8",
                strokeWeight: 3,
                strokeOpacity: 0.4,
                fillColor: '#00b0ff',
                fillOpacity: 0.4,
                strokeStyle: 'solid'
            }
            that.mouseTool.close();
    
            that.mouseTool = new AMap.MouseTool(that.map);
    
            that.map.clearMap();
    
            that.mouseTool.polygon(option)
    
            // 无法移除
            // that.mouseTool.off('draw');
    
            that.mouseTool.on('draw', function (event) {
                event.obj.getPath()
    
                callback && callback(event.obj.getPath())
    
                that.editPolygon({
                    paths: event.obj.getPath(),
                    callback
                })
            });
        }
    
        /**
         * 编辑多边形
         */
        gaodeMap.prototype.editPolygon = function (option) {
            if (this.checkMap()) {
                return;
            }
    
            let that = this;
    
            that.map.clearMap();
    
            let polygon = new AMap.Polygon({
                path: option.paths,
                isOutline: true,
                strokeColor: "#008ad8",
                strokeWeight: 3,
                strokeOpacity: 0.4,
                fillColor: '#00b0ff',
                fillOpacity: 0.4,
                strokeStyle: 'solid',
                map: that.map
            })
    
            let polyEditor = new AMap.PolyEditor(that.map, polygon);//创建多边形编辑器
    
            polyEditor.open();
    
            polyEditor.on('adjust', function (e) {
                option.callback && option.callback(polygon.getPath())
            })
    
            polyEditor.open();    //打开圆形编辑器
    
            that.map.setFitView();
        }
    
        /*
         * @method
         * @desc 获取中心坐标
         */
        gaodeMap.prototype.getCenterPoint = function (coor) {
            if (this.checkMap()) {
                return;
            }
    
            if (coor) {
                var total = coor.length;
                var lat = 0, lng = 0;
    
                $.each(coor, function (i, item) {
                    lat += (item.getLat() || item.lat) * Math.PI / 180;
                    lng += (item.getLng() || item.lng) * Math.PI / 180;
                })
    
                lat /= total;
                lng /= total;
    
                return new AMap.LngLat(lng * 180 / Math.PI, lat * 180 / Math.PI);
            }
        }
    
        gaodeMap.prototype.massMarks = undefined;
    
        /*
         * @method
         * @desc 设置海量点
         */
        gaodeMap.prototype.setMassMarkers = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            if (!opt) {
                return;
            }
    
            if (!opt.data) {
                return;
            }
            // 示例数据
            // {"lnglat":[116.258446,37.686622],"name":"景县","style":2}
    
            this.map.clearMap();
    
            if (!this.massMarks) {
                this.massMarks = new AMap.MassMarks(
                    opt.data,
                    {
                        //map: this.map,
                        opacity: 0.9,
                        zIndex: 99999,
                        alwaysRender: opt.alwaysRender || false,//是否在地图缩放时重绘
                        style: [{
                            anchor: new AMap.Pixel(0, 0),
                            url: '/images/green.png',
                            size: new AMap.Size(20, 20)
                        },
                        {
                            anchor: new AMap.Pixel(0, 0),
                            url: '/images/red.png',
                            size: new AMap.Size(20, 20)
                        }]
                    })
            }
            else {
                this.massMarks.setData(opt.data)
            }
    
            this.massMarks.setMap(this.map);
    
            var marker = new AMap.Marker({ content: ' ', map: this.map });
    
            this.massMarks.on('mouseover', function (e) {
                marker.setPosition(e.data.lnglat);
                marker.setLabel({ content: e.data.name })
            });
    
            this.massMarks.on('mouseout', function (e) {
                marker.setLabel({ content: "" })
            });
    
            this.map.setZoom(5);
            this.map.setCenter([102.342785, 35.312316])
        }
    
        /*
         * @method
         * @desc 清除海量点
         */
        gaodeMap.prototype.clearMassMarkers = function () {
            if (this.checkMap()) {
                return;
            }
    
            if (this.massMarks) {
                this.massMarks.clear();
            }
            this.map.clearMap();
        }
    
        /*
         * @method
         * @desc 添加行政范围
         */
        gaodeMap.prototype.addAreaRang = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            var _map = this.map;
            var that = this;
            (new AMap.Geocoder()).getAddress(opt.lnglat, function (status, result) {
                console.log(JSON.stringify(result))
                if (status === 'complete' && result.regeocode) {
                    // 获取区域编码
                    var adcode = result.regeocode.addressComponent.adcode;
    
                    // 设置显示范围
                    new AMap.DistrictSearch({
                        extensions: 'all',
                        subdistrict: 0
                    }).search(adcode, function (status, result) {
                        // 外多边形坐标数组和内多边形坐标数组
                        var outer = [
                            new AMap.LngLat(-360, 90, true),
                            new AMap.LngLat(-360, -90, true),
                            new AMap.LngLat(360, -90, true),
                            new AMap.LngLat(360, 90, true),
                        ];
    
                        var holes = result.districtList[0].boundaries
    
                        var pathArray = [
                            outer
                        ];
    
                        var centerPoint = that.getCenterPoint(holes[0])
    
                        pathArray.push.apply(pathArray, holes);
    
                        var polygon = new AMap.Polygon({
                            pathL: pathArray,
                            strokeColor: '#000000',
                            strokeWeight: 1,
                            fillColor: '#000000',
                            fillOpacity: 0.9
                        });
                        polygon.setPath(pathArray);
                        _map.add(polygon)
                        //_map.panTo(opt.lnglat);
                        _map.panTo(centerPoint)
                        _map.setZoom(opt.zoom || 12);
                    })
                } else {
                    console.log('经纬度查询失败')
                }
            });
        }
    
        gaodeMap.prototype.mapClick;
    
        /**
         * 绑定地图点击
         * @param {boolean} opt.isclearMap 是否清除地图
         * @param {string} opt.key 清除指定key的覆盖物
         * @param {Function} opt.callback 点击回调
         */
        gaodeMap.prototype.bindMapClick = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            let that = this;
    
            let _map = this.map;
    
            if (!that.mapClick) {
                that.mapClick = function (e) {
                    if (opt.isclearMap) {
                        if (opt.key) {
                            that.clearMarker(opt.key);
                        }
                        else {
                            that.clearMarkers();
                        }
                    }
    
                    let address;
                    (new AMap.Geocoder()).getAddress(e.lnglat, function (status, result) {
                        if (status === 'complete' && result.regeocode) {
                            address = {
                                address: result.regeocode.formattedAddress,
                                //lnglat: e.lnglat
                                lng: e.lnglat.getLng(),
                                lat: e.lnglat.getLat()
                            }
    
                            if (typeof opt.callback === 'function') {
                                opt.callback(e, address);
                            }
                        }
                    });
                }
            }
    
            _map.on('click', that.mapClick);
        }
    
        gaodeMap.prototype.cancleMapClick = function () {
            if (this.checkMap()) {
                return;
            }
    
            let _map = this.map;
    
            _map.off('click', this.mapClick);
            //this.map.clearEvents('click');
        }
    
        /*
         * @method
         * @desc 绑定地图搜索
         */
        gaodeMap.prototype.bindSearch = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            let _map = this.map;
    
            if (opt.isclearMap) {
                this.clearMarkers();
            }
    
            let auto = new AMap.Autocomplete({
                input: opt.inputID || "tipinput"
            });
    
            let placeSearch = new AMap.PlaceSearch({ map: _map });
    
            AMap.event.addListener(auto, "select", select);
    
            function select(e) {
                //placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name, function (status, result) {
                    // 查询成功时,result即对应匹配的POI信息
                    let pois = result.poiList.pois;
                    let address;
                    //return false;
                    if (pois.length > 0) {
                        (new AMap.Geocoder()).getAddress(pois[0].location, function (status, result) {
                            if (status === 'complete' && result.regeocode) {
                                address = {
                                    address: result.regeocode.formattedAddress,
                                    //lnglat: pois[0].location
                                    lng: pois[0].location.lng,
                                    lat: pois[0].location.lat
                                }
    
                                if (typeof opt.success === 'function') {
                                    opt.success(address);
                                }
                            }
                        });
                    }
                })
            }
        }
    
        /*
         * @method
         * @desc 获取地址
         */
        gaodeMap.prototype.getAddress = function (lnglat, callback) {
            if (this.checkMap()) {
                return;
            }
    
            (new AMap.Geocoder()).getAddress(lnglat, function (status, result) {
                if (status === 'complete' && result.regeocode) {
                    callback && callback(result.regeocode.formattedAddress);
                }
            })
        }
    
        exports('gdmap', new gaodeMap());
    })
    

      

    岁月无情催人老,请珍爱生命,远离代码!!!
  • 相关阅读:
    EasyPlayer-Android播放器是如何实现播放器退到后台后,再回到前台时,播放画面的无缝衔接?
    EasyPlayer网页全终端播放器之Android版的分屏策略及如何设置2分屏
    海康大华安防网络摄像头Onvif、RTSP网络无插件直播流媒体服务解决方案EasyNVR表单重复提交的优化方案
    Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR中直播页面和视频列表页面的区别介绍
    Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR如何使用Excel将通道配置简单化?
    集RTMP, HLS, FLV, WebSocket 于一身的网页直播/点播播放器EasyPlayer.js引用videojs无法自动播放问题解决
    Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR登陆用户名密码失效问题解决方案
    RTSP转RTSP、RTMP、HLS、FLV安防摄像头网页无插件直播流媒体服务器EasyNVR在IE浏览器下的 pointer-events- none前端兼容性调试
    Onvif/RTSP网络安防摄像机网页无插件直播方案EasyNVR接口调用返回出现“Unauthorized”解决方案
    安防监控流媒体服务器对接宇视摄像机配置OCX插件安装时出现Failed to register ocx, error code 14001错误问题分析
  • 原文地址:https://www.cnblogs.com/zhoushangwu/p/15006430.html
Copyright © 2011-2022 走看看