|
|
@@ -8,106 +8,91 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ moldList: [],
|
|
|
+ map: "",
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- //this.getMap();
|
|
|
-
|
|
|
- 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/grey",
|
|
|
- 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;
|
|
|
- }
|
|
|
- //返回经纬度
|
|
|
- return [parseFloat(item.lng), parseFloat(item.lat)];
|
|
|
- },
|
|
|
- getHoverTitle: function(dataItem, idx) {
|
|
|
- var state = "";
|
|
|
- if(dataItem.state == '0'){
|
|
|
- state = _this.$t('base.static') // 静止
|
|
|
- } else if(dataItem.state == '1'){
|
|
|
- state = _this.$t('base.run') // 运行
|
|
|
- } else if(dataItem.state == '2'){
|
|
|
- state = _this.$t('base.warning') // 告警
|
|
|
- } else if(dataItem.state == '3'){
|
|
|
- state = _this.$t('base.scrap') // 报废
|
|
|
- }
|
|
|
- return dataItem.modelName + ' ' + state;
|
|
|
- },
|
|
|
- renderOptions: {
|
|
|
- //点的样式
|
|
|
- pointStyle: {
|
|
|
- width: 6,
|
|
|
- height: 6,
|
|
|
- // fillStyle:'rgba(0, 236, 252, 0.9)'
|
|
|
- fillStyle:'rgba(255, 0, 0, 1)',
|
|
|
- },
|
|
|
- //鼠标hover时的title信息
|
|
|
- hoverTitleStyle: {
|
|
|
- position: 'top'
|
|
|
- },
|
|
|
+ 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>模具名称： "+ dataItem.modelName +"</div><div>运行状态： "+ 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);
|
|
|
}
|
|
|
- });
|
|
|
-
|
|
|
- function MyRender(distClusterIns, opts) {
|
|
|
- //直接调用父类的构造函数
|
|
|
- MyRender.__super__.constructor.apply(this, arguments);
|
|
|
- }
|
|
|
|
|
|
- //继承默认引擎
|
|
|
- utils.inherit(MyRender, DistrictCluster.Render.Default);
|
|
|
+ //继承默认引擎
|
|
|
+ utils.inherit(MyRender, DistrictCluster.Render.Default);
|
|
|
|
|
|
- utils.extend(MyRender.prototype, {
|
|
|
- drawFeaturePolygons: function(ctx, polygons, styleOptions, feature, dataItems) {
|
|
|
- //调用父类方法
|
|
|
- MyRender.__super__.drawFeaturePolygons.apply(this, arguments);
|
|
|
+ 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);
|
|
|
+ //直接绘制聚合信息
|
|
|
+ this.drawMyLabel(feature, dataItems);
|
|
|
+ },
|
|
|
+ _initContainter: function() {
|
|
|
+ //调用父类方法
|
|
|
+ MyRender.__super__._initContainter.apply(this, arguments);
|
|
|
|
|
|
- //创建一个新的canvas
|
|
|
- this._createCanvas('mylabel', this._container);
|
|
|
- },
|
|
|
- /**
|
|
|
- * 绘制一个蓝底白字的label替代聚合标注
|
|
|
- */
|
|
|
- drawMyLabel: function(feature, dataItems) {
|
|
|
- //if(dataItems.length != 0){
|
|
|
+ //创建一个新的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 containerPos = _this.map.lngLatToContainer(feature.properties.centroid || feature.properties.center);
|
|
|
var labelCtx = this._getCanvasCxt('mylabel');
|
|
|
|
|
|
//文字的中心点
|
|
|
@@ -126,7 +111,7 @@
|
|
|
name = name.substring(0,2)
|
|
|
}
|
|
|
}
|
|
|
- var text = name;//feature.properties.name ;//+ '\n' + dataItems.length;
|
|
|
+ var text = name;
|
|
|
var textMetrics = labelCtx.measureText(text);
|
|
|
var halfTxtWidth = textMetrics.width / 2;
|
|
|
|
|
|
@@ -134,8 +119,6 @@
|
|
|
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';
|
|
|
|
|
|
@@ -164,75 +147,394 @@
|
|
|
|
|
|
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)];
|
|
|
- },
|
|
|
- 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)'
|
|
|
+ });
|
|
|
+
|
|
|
+ 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)];
|
|
|
},
|
|
|
- getFeatureStyle: function(feature, dataItems) {
|
|
|
- return {
|
|
|
- fillStyle: ''
|
|
|
- };
|
|
|
+ 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>模具名称： <router-link :to='{ path: '/moldList/"+ data[i].id +"/0' }'>"+ data[i].modelName +"</router-link></div>"
|
|
|
+ +"<div>运行状态： "+ state +"</div>"
|
|
|
+
|
|
|
+ marker.content = str;
|
|
|
+ marker.id = data[i].id;
|
|
|
+ marker.on('click', jumpTo);
|
|
|
+ marker.on('mouseover', openInfo);
|
|
|
+ marker.on('mouseout', closeInfo);
|
|
|
}
|
|
|
- },
|
|
|
- });
|
|
|
+ }
|
|
|
|
|
|
- window.distCluster = distCluster;
|
|
|
+ function jumpTo(e) {
|
|
|
+ _this.$router.push("/moldList/" + e.target.id + "/0");
|
|
|
+ }
|
|
|
|
|
|
- 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);
|
|
|
- });
|
|
|
+ function openInfo(e) {
|
|
|
+ infoWindow.setContent(e.target.content);
|
|
|
+ infoWindow.open(_this.map, e.target.getPosition());
|
|
|
+ }
|
|
|
|
|
|
- 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;
|
|
|
- distCluster.setData(data);
|
|
|
- pointSimplifierIns.setData(data);
|
|
|
- map.setZoomAndCenter(5, [105.205467, 34.907761]);
|
|
|
- },
|
|
|
- error => {
|
|
|
- _this.$message({
|
|
|
- message: error,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
+ 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>模具名称： "+ dataItem.modelName +"</div><div>运行状态： "+ 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>
|
