yunsu/ys_int/src/views/map/map.vue

<template>
	<div id="container"></div> 
</template>

<script>
    import Vue from 'vue';

	export default {
		data() {
			return {
                moldList: [],
                map: "",
			}
		},
		methods: {
            setMap() {
                var _this = this;
                AMapUI.load(['ui/geo/DistrictCluster', 'ui/misc/PointSimplifier', 'lib/$',  'lib/utils'], function(DistrictCluster, PointSimplifier, $, utils) {

                    AMapUI.loadUI(['overlay/SvgMarker'], function(SvgMarker) {
                    // var pointSimplifierIns = new PointSimplifier({
                    //     map: _this.map, //所属的地图实例
                    //     autoSetFitView: false, //禁止自动更新地图视野
                    //     zIndex: 110,
                    //     getPosition: function(item) {
                    //         if (!item) {
                    //             return null;
                    //         }
                    //         //返回经纬度
                    //         return [parseFloat(item.lng), parseFloat(item.lat)];
                    //     },
                    //     getHoverTitle: function(dataItem, idx) {
                    //         var state = "" , hovertitle = "";
                    //         if(dataItem.state == '0'){
                    //             state = '<span style="color:#909399">'+_this.$t('base.static')+'</span>'//_this.$t('base.static') // 静止
                    //         } else if(dataItem.state == '1'){
                    //             state = '<span style="color:#00CD66">'+_this.$t('base.run')+'</span>'
                    //         } else if(dataItem.state == '2'){
                    //             state = '<span style="color:#F56C6C">'+_this.$t('base.warning')+'</span>'
                    //         } else if(dataItem.state == '3'){
                    //             state = '<span style="color:#909399">'+_this.$t('base.beScrapped')+'</span>'
                    //         } else if(dataItem.state == '4'){
                    //             state = '<span style="color:#909399">'+_this.$t('base.scraped')+'</span>'
                    //         } else if(dataItem.state == '5'){
                    //             state = '<span style="color:#F56C6C">'+_this.$t('base.abnormal')+'</span>'
                    //         } else if(dataItem.state == '6'){
                    //             state = '<span style="color:#F56C6C">'+_this.$t('base.dropped')+'</span>'
                    //         }
                    //         hovertitle = "<div>模具名称：&nbsp;&nbsp;&nbsp;"+ dataItem.modelName +"</div><div>运行状态：&nbsp;&nbsp;&nbsp;"+ state +"</div>"
                    //         return hovertitle;
                    //     },
                    //     renderOptions: {
                    //         //点的样式
                    //         pointStyle: {
                    //             width: 6,
                    //             height: 6,
                    //             fillStyle:'rgba(255, 0, 0, 1)',
                    //         },
                    //         //鼠标hover时的title信息
                    //         hoverTitleStyle: {
                    //             position: 'top'
                    //         }
                    //     }
                    // });
                   

                    function MyRender(distClusterIns, opts) {
                        //直接调用父类的构造函数
                        MyRender.__super__.constructor.apply(this, arguments);
                    }

                    //继承默认引擎
                    utils.inherit(MyRender, DistrictCluster.Render.Default);

                    utils.extend(MyRender.prototype, {
                        drawFeaturePolygons: function(ctx, polygons, styleOptions, feature, dataItems) {
                            //调用父类方法
                            MyRender.__super__.drawFeaturePolygons.apply(this, arguments);

                            //直接绘制聚合信息
                            this.drawMyLabel(feature, dataItems);
                        },
                        _initContainter: function() {
                            //调用父类方法
                            MyRender.__super__._initContainter.apply(this, arguments);

                            //创建一个新的canvas
                            this._createCanvas('mylabel', this._container);
                        },
                        /**
                         * 绘制一个蓝底白字的label替代聚合标注
                         */
                        drawMyLabel: function(feature, dataItems) {
                            var pixelRatio = this.getPixelRatio(); //高清下存在比例放大
                            var containerPos = _this.map.lngLatToContainer(feature.properties.centroid || feature.properties.center);
                            var labelCtx = this._getCanvasCxt('mylabel');

                            //文字的中心点
                            var centerX = containerPos.getX() * pixelRatio,
                                centerY = containerPos.getY() * pixelRatio;

                            labelCtx.save();

                            labelCtx.font = 12 * pixelRatio + 'px 微软雅黑';
                            
                            var name = feature.properties.name;
                            if(feature.properties.level == "province") {
                                if(name == "黑龙江省" || name == "内蒙古自治区"){
                                    name = name.substring(0,3)
                                } else {
                                    name = name.substring(0,2)
                                }
                            }
                            var text = name;
                            var textMetrics = labelCtx.measureText(text);
                            var halfTxtWidth = textMetrics.width / 2;

                            var num = dataItems.length;
                            var numMetrics = labelCtx.measureText(num);
                            var halfNumWidth = numMetrics.width / 2;

                            labelCtx.beginPath();
                            labelCtx.fillStyle = 'rgba(12 , 239 , 231 , 0.8)';//'#3366cc';

                            //绘制一个蓝色背景
                            labelCtx.strokeStyle= "rgba(12 , 239 , 231 , 0.65)"
                            labelCtx.fillStyle = 'rgba(12 , 239 , 231 , 0.65)';
                            
                            var radius = 0;
                            if(textMetrics.width > numMetrics.width) {
                                radius = (textMetrics.width + 6 * pixelRatio) / 2;
                            } else {
                                radius = (numMetrics.width + 6 * pixelRatio) / 2;
                            }

                            labelCtx.arc(centerX , centerY, radius + 6,
                                0*Math.PI, 2*Math.PI, false);

                            labelCtx.closePath();
                            labelCtx.fill();

                            labelCtx.fillStyle = '#ffffff';
                            labelCtx.textBaseline = 'middle';

                            labelCtx.fillText(text, centerX - halfTxtWidth, centerY - 5);
                            labelCtx.fillText(num , centerX - halfNumWidth, centerY + 12);

                            labelCtx.stroke();
                            labelCtx.restore();
                        }
                    });

                    var distCluster = new DistrictCluster({
                        zIndex: 100,
                        map: _this.map, //所属的地图实例
                        getPosition: function(item) {
                            if (!item) {
                                return null;
                            }
                            //返回经纬度
                            return [parseFloat(item.lng) + (0.0001 * Math.random() * 10), parseFloat(item.lat) - (0.0001 * Math.random() * 10)];
                        },
                        renderConstructor: MyRender,
                        //特定区划级别的默认样式
                        renderOptions: {
                            getClusterMarker: null,
                            featureClickToShowSub: true,
                            featureStyle: {
                                lineWidth: 2, //描边线宽
                                strokeStyle: 'rgba(75, 143, 239, 0.5)', //描边色
                                //鼠标Hover后的样式
                                hoverOptions: {
                                    fillStyle: 'rgba(255,255,255,0.2)'
                                }
                            },
                            getFeatureStyle: function(feature, dataItems) {
                                return {
                                    fillStyle: ''
                                };
                            }
                        },
                    });

                    window.distCluster = distCluster;

                    // function refresh() {
                    //     var zoom = _this.map.getZoom();
                    //     //获取 pointStyle
                    //     var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;
                    //     //根据当前zoom调整点的尺寸
                    //     pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, _this.map.getZoom() - 3);
                    // }

                    // _this.map.on('zoomend', function() {
                    //     refresh();
                    // });

                    // refresh();

                     if (!SvgMarker.supportSvg) {
                        //当前环境并不支持SVG，此时SvgMarker会回退到父类，即SimpleMarker
                        alert('当前环境不支持SVG');
                    }

                    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -10)});
                    function setPoint(data) {
                        for (var i = 0, marker; i < data.length; i++) {
                            // var marker = new AMap.Marker({
                            //     position: [parseFloat(data[i].lng), parseFloat(data[i].lat)],
                            //     map: _this.map
                            // });

                            var shape = new SvgMarker.Shape['Circle']({
                                height: 20 * (1 * 0.3),
                                strokeWidth: 1,
                                strokeColor: 'rgba(255, 0, 0, 1)',
                                fillColor: 'rgba(255, 0, 0, 1)'
                            });
                            var marker = new SvgMarker(
                                shape, {
                                    map: _this.map,
                                    position: [parseFloat(data[i].lng) + (0.0001 * Math.random() * 10), parseFloat(data[i].lat) - (0.0001 * Math.random() * 10)],
                                }
                            );
                            var state = "";
                            if(data[i].state == '0'){
                                state = '<span style="color:#909399">'+_this.$t('base.static')+'</span>'//_this.$t('base.static') // 静止
                            } else if(data[i].state == '1'){
                                state = '<span style="color:#00CD66">'+_this.$t('base.run')+'</span>'
                            } else if(data[i].state == '2'){
                                state = '<span style="color:#F56C6C">'+_this.$t('base.warning')+'</span>'
                            } else if(data[i].state == '3'){
                                state = '<span style="color:#909399">'+_this.$t('mold.beScrapped')+'</span>'
                            } else if(data[i].state == '4'){
                                state = '<span style="color:#909399">'+_this.$t('mold.scraped')+'</span>'
                            } else if(data[i].state == '5'){
                                state = '<span style="color:#F56C6C">'+_this.$t('mold.abnormal')+'</span>'
                            } else if(data[i].state == '6'){
                                state = '<span style="color:#F56C6C">'+_this.$t('mold.dropped')+'</span>'
                            }

                            var str = "<div>模具名称：&nbsp;&nbsp;&nbsp;<router-link :to='{ path: '/moldList/"+ data[i].id +"/0' }'>"+ data[i].modelName +"</router-link></div>"
                                +"<div>运行状态：&nbsp;&nbsp;&nbsp;"+ state +"</div>"
                            
                            marker.content = str;
                            marker.id = data[i].id;
                            marker.on('click', jumpTo);
                            marker.on('mouseover', openInfo);
                            marker.on('mouseout', closeInfo);
                        }
                    }

                    function jumpTo(e) {
                        _this.$router.push("/moldList/" + e.target.id + "/0");
                    }

                    function openInfo(e) {
                        infoWindow.setContent(e.target.content);
                        infoWindow.open(_this.map, e.target.getPosition());
                    }

                    function closeInfo() {
                        infoWindow.close();
                    }

                    $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
                    _this.http.post( _this.port.map.newMap, {},
                    res => {
                        $('#loadingTip').remove();
                        var data = res.data;
                        _this.moldList = data;
                        distCluster.setData(data);
                        // pointSimplifierIns.setData(data);
                        setPoint(data);
                        _this.map.setZoomAndCenter(5, [105.205467, 34.907761]);
                    },
                    error => {
                        _this.$message({
                            message: error,
                            type: "error"
                        });
                    })
                });
                })
            },

            jumpTo(id) {
                console.log(id)
            }
        },
        mounted() {
            this.$el.style.height = (window.innerHeight - 100) + "px";
            const that = this;
            window.onresize = function temp() {
                that.$el.style.height = (window.innerHeight - 100) + "px";
            };

            //新地图
            that.map = new AMap.Map('container', {
                zoom: 4,
                mapStyle: "amap://styles/8016abec658e1132508723183f848f14",
                features: ['bg']
            });

            that.setMap();
        },
        // mounted() {
        //     this.$el.style.height = (window.innerHeight - 100) + "px";
        //     const that = this;
        //     window.onresize = function temp() {
        //         that.$el.style.height = (window.innerHeight - 100) + "px";
        //     };

        //     //新地图
        //     var map = new AMap.Map('container', {
        //         zoom: 4,
        //         mapStyle: "amap://styles/8016abec658e1132508723183f848f14",
        //         features: ['bg']
        //     });

        //     var _this = this;
        //     //加载相关组件
        //     AMapUI.load(['ui/geo/DistrictCluster', 'ui/misc/PointSimplifier', 'lib/$' ,  'lib/utils'], function(DistrictCluster, PointSimplifier , $ , utils) {

        //         window.DistrictCluster = DistrictCluster;

        //         //启动页面
        //         var pointSimplifierIns = new PointSimplifier({
        //             map: map, //所属的地图实例
        //             autoSetFitView: false, //禁止自动更新地图视野
        //             zIndex: 110,
        //             getPosition: function(item) {
        //                 if (!item) {
        //                     return null;
        //                 }
        //                 console.log(item)
        //                 //返回经纬度
        //                 // return [parseFloat(item.lng), parseFloat(item.lat)];
        //                 return [item.lng, item.lat];
        //             },
        //             getHoverTitle: function(dataItem, idx) {
        //                 var state = "";
        //                 if(dataItem.state == '0'){
        //                     state = '<span style="color:#909399">'+_this.$t('base.static')+'</span>'//_this.$t('base.static') // 静止
        //                 } else if(dataItem.state == '1'){
        //                     state = '<span style="color:#00CD66">'+_this.$t('base.run')+'</span>'
        //                     // state = _this.$t('base.run') // 运行
        //                 } else if(dataItem.state == '2'){
        //                     state = '<span style="color:#F56C6C">'+_this.$t('base.warning')+'</span>'
        //                     // state = _this.$t('base.warning') // 告警
        //                 } else if(dataItem.state == '3'){
        //                     state = '<span style="color:#909399">'+_this.$t('base.beScrapped')+'</span>'
        //                     // state = _this.$t('base.scrap') // 报废
        //                 } else if(dataItem.state == '4'){
        //                     state = '<span style="color:#909399">'+_this.$t('base.scraped')+'</span>'
        //                 } else if(dataItem.state == '5'){
        //                     state = '<span style="color:#F56C6C">'+_this.$t('base.abnormal')+'</span>'
        //                 } else if(dataItem.state == '6'){
        //                     state = '<span style="color:#F56C6C">'+_this.$t('base.dropped')+'</span>'
        //                 }

        //                 var str = "<div>模具名称：&nbsp;&nbsp;&nbsp;"+ dataItem.modelName +"</div><div>运行状态：&nbsp;&nbsp;&nbsp;"+ state +"</div>"
                        
        //                 return  str;
        //             },
        //             renderOptions: {
        //                 //点的样式
        //                 pointStyle: {
        //                     width: 6,
        //                     height: 6,
        //                     // fillStyle:'rgba(0, 236, 252, 0.9)'
        //                     fillStyle:'rgba(255, 0, 0, 1)',
        //                 },
        //                 //鼠标hover时的title信息
        //                 hoverTitleStyle: {
        //                     position: 'top'
        //                 },
        //             }
        //         });

        //         function MyRender(distClusterIns, opts) {
        //             //直接调用父类的构造函数
        //             MyRender.__super__.constructor.apply(this, arguments);
        //         }

        //         //继承默认引擎
        //         utils.inherit(MyRender, DistrictCluster.Render.Default);

        //         utils.extend(MyRender.prototype, {
        //             drawFeaturePolygons: function(ctx, polygons, styleOptions, feature, dataItems) {
        //                 //调用父类方法
        //                 MyRender.__super__.drawFeaturePolygons.apply(this, arguments);

        //                 //直接绘制聚合信息
        //                 this.drawMyLabel(feature, dataItems);
        //             },
        //             _initContainter: function() {
        //                 //调用父类方法
        //                 MyRender.__super__._initContainter.apply(this, arguments);

        //                 //创建一个新的canvas
        //                 this._createCanvas('mylabel', this._container);
        //             },
        //             /**
        //              * 绘制一个蓝底白字的label替代聚合标注
        //              */
        //             drawMyLabel: function(feature, dataItems) {
        //                 var pixelRatio = this.getPixelRatio(); //高清下存在比例放大

        //                 var containerPos = map.lngLatToContainer(feature.properties.centroid || feature.properties.center);

        //                 var labelCtx = this._getCanvasCxt('mylabel');

        //                 //文字的中心点
        //                 var centerX = containerPos.getX() * pixelRatio,
        //                     centerY = containerPos.getY() * pixelRatio;

        //                 labelCtx.save();

        //                 labelCtx.font = 12 * pixelRatio + 'px 微软雅黑';
                        
        //                 var name = feature.properties.name;
        //                 if(feature.properties.level == "province") {
        //                     if(name == "黑龙江省" || name == "内蒙古自治区"){
        //                         name = name.substring(0,3)
        //                     } else {
        //                         name = name.substring(0,2)
        //                     }
        //                 }
        //                 var text = name;//feature.properties.name ;//+ '\n' + dataItems.length;
        //                 var textMetrics = labelCtx.measureText(text);
        //                 var halfTxtWidth = textMetrics.width / 2;

        //                 var num = dataItems.length;
        //                 var numMetrics = labelCtx.measureText(num);
        //                 var halfNumWidth = numMetrics.width / 2;

        //                 // labelCtx.fillStyle = 'rgba(3 , 94 , 255 , 0.5)';//'#3366cc';
                        
        //                 labelCtx.beginPath();
        //                 labelCtx.fillStyle = 'rgba(12 , 239 , 231 , 0.8)';//'#3366cc';

        //                 //绘制一个蓝色背景
        //                 labelCtx.strokeStyle= "rgba(12 , 239 , 231 , 0.65)"
        //                 labelCtx.fillStyle = 'rgba(12 , 239 , 231 , 0.65)';
                        
        //                 var radius = 0;
        //                 if(textMetrics.width > numMetrics.width) {
        //                     radius = (textMetrics.width + 6 * pixelRatio) / 2;
        //                 } else {
        //                     radius = (numMetrics.width + 6 * pixelRatio) / 2;
        //                 }

        //                 labelCtx.arc(centerX , centerY, radius + 6,
        //                     0*Math.PI, 2*Math.PI, false);

        //                 labelCtx.closePath();
        //                 labelCtx.fill();

        //                 labelCtx.fillStyle = '#ffffff';
        //                 labelCtx.textBaseline = 'middle';

        //                 labelCtx.fillText(text, centerX - halfTxtWidth, centerY - 5);
        //                 labelCtx.fillText(num , centerX - halfNumWidth, centerY + 12);

        //                 labelCtx.stroke();
        //                 labelCtx.restore();
        //             }
        //         });

        //         var distCluster = new DistrictCluster({
        //             zIndex: 100,
        //             map: map, //所属的地图实例
        //             getPosition: function(item) {
        //                 if (!item) {
        //                     return null;
        //                 }
        //                 //返回经纬度
        //                 // return [parseFloat(item.lng), parseFloat(item.lat)];
        //                 return [item.lng, item.lat];
        //             },
        //             renderConstructor: MyRender,
        //             //特定区划级别的默认样式
        //             renderOptions: {
        //                 getClusterMarker: null,
        //                 featureClickToShowSub: true,
        //                 featureStyle: {
        //                     lineWidth: 2, //描边线宽
        //                     // strokeStyle: 'rgba(0, 119, 180, 0.5)', //描边色
        //                     strokeStyle: 'rgba(75, 143, 239, 0.5)', //描边色
        //                     //鼠标Hover后的样式
        //                     hoverOptions: {
        //                         fillStyle: 'rgba(255,255,255,0.2)'
        //                     }
        //                 },
        //                 getFeatureStyle: function(feature, dataItems) {
        //                     return {
        //                         fillStyle: ''
        //                     };
        //                 }
        //             },
        //         });

        //         window.distCluster = distCluster;

        //         map.on('zoomend', function() {
        //             var zoom = map.getZoom();
        //             //获取 pointStyle
        //             var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;
        //             //根据当前zoom调整点的尺寸
        //             pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);
        //         });

        //         var zoom = map.getZoom();
        //         //获取 pointStyle
        //         var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;
        //         //根据当前zoom调整点的尺寸
        //         pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);

        //         $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
        //         _this.http.post( _this.port.map.newMap, {},
        //         res => {
        //             $('#loadingTip').remove();
        //             var data = res.data;
        //             _this.moldList = data;
        //             distCluster.setData(data);
        //             pointSimplifierIns.setData(data);
        //             map.setZoomAndCenter(5, [105.205467, 34.907761]);
        //         },
        //         error => {
        //             _this.$message({
        //                 message: error,
        //                 type: "error"
        //             });
        //         })
        //     });
        // }
	}

</script>

<style scoped lang="scss">
    #container {
        width: 100%; 
        margin-top: 10px;
    }  
</style>