vue+高德地图根据不同标准换图标
关键;
①
代码：
Markup
realPointSimplifierIns(){
this.map =amapManager.getMap();
let data="";
//this.monitorInfo=this.tableData;
let i=0;
let list=this.tableData;
this.tableData.forEach((item) => {
// console.log(""[[[[]]]],item);
if(item.longitude){
this.monitorInfo.push(item)
data +=[item.longitude+","+item.latitude] + "|"
}
});
// console.log("4454848",data);
AMapUI.load(['ui/geo/DistrictCluster','ui/misc/PointSimplifier', 'lib/$'], (DistrictCluster, PointSimplifier, $)=>{
const blue = require('@/assets/cmp.png') ;
const yellow = require('@/assets/yel.png') ;
const ora = require('@/assets/ora.png') ;
const red = require('@/assets/red.png') ;
const gre = require('@/assets/gre.png') ;
let groupStyleMap ;
let pointSimplifierIns;
if (!PointSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
}
let distCluster = new DistrictCluster({
zIndex: 100,
topAdcodes: [330000],
map: this.map, //所属的地图实例
getPosition: function(item) {
if (!item) {
return null;
}
var parts = item.split(',');
//返回经纬度
return [parseFloat(parts[0]), parseFloat(parts[1])];
}
});
window.distCluster = distCluster;
pointSimplifierIns = new PointSimplifier({
map: this.map, //所属的地图实例
getPosition: function(item) {
if (!item) {
return null;
}
var parts = item.lngLatLine.split(',');
// var parts = item.split(',');
//返回经纬度
return [parseFloat(parts[0]), parseFloat(parts[1])];
},
getHoverTitle: (dataItem, idx) =>{
let data =this.monitorInfo[idx];
var centent =`<div style="font-size: 14px;cursor: pointer;" class="part-box" >
<div class="part-tittle" @click="toComDetail('company',${data.id})">企业全称:${data.entName} </div>
<div class="part-tittle">企业社会信用代码:${data.corporateSocialCreditCode ?data.corporateSocialCreditCode :'未知'} </div>
<div class="part-tittle">企业简称:${data.entShotName?data.entShotName :'未知'} </div>
<div class="part-tittle">固定电话:${data.telNo?data.telNo :'未知'} </div>
<div class="part-tittle">企业地址:${data.entAddress?data.entAddress :'未知'} </div>
</div>`;
return centent ;
},
renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
renderOptions: {
//点的样式
pointStyle: {
width: 6,
height: 6
},
//鼠标hover时的title信息
hoverTitleStyle: {
position: 'top'
},
getGroupId: function(item, idx) {
return item.groupId;
},
groupStyleOptions: (gid)=>{
console.log("99*8989",gid);
return groupStyleMap[gid];
}
}
});
window.pointSimplifierIns = pointSimplifierIns;
$('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
console.log("信息",this.tableData);
let _icon = [];
let grouId = 0;
for (let i = 0; i < this.tableData.length; i++) {
if(this.tableData[i].longitude){
grouId = 4;
data +=[this.tableData[i].longitude+","+this.tableData[i].latitude] + "|";
// console.log("2312333333:",this.monitorInfo[i].ol)
if(this.tableData[i].riskLevel == "E1704"){
grouId = 0;
}else if(this.tableData[i].riskLevel == "E1703"){
grouId = 1;
}else if(this.tableData[i].riskLevel == "E1702"){
grouId = 2;
}else if(this.tableData[i].riskLevel == "E1701"){
grouId = 3;
}else if(this.tableData[i].riskLevel == null){
grouId = 4;
}
_icon.push({
lngLatLine:this.tableData[i].longitude+","+this.tableData[i].latitude,
groupId: grouId
})
}
}
pointSimplifierIns.setData(_icon);
distCluster.setData(data.split("|"));
$('#loadingTip').remove();
pointSimplifierIns.on('pointClick', (e, record)=> {
console.log("ssssssss")
//window.showModalDialog("modal.htm","","dialogWidth=200px;dialogHeight=100px");
console.log(e)
console.log(record)
let data=this.monitorInfo[record.index];
console.log(data);
window.open("/#/bigindex/company/"+data.id)
// dialogWindows
});
groupStyleMap = {
'0': {
pointStyle: {
//绘制点占据的矩形区域
content: PointSimplifier.Render.Canvas.getImageContent(
blue, ()=>{
// 延时设定的毫秒
pointSimplifierIns.renderLater();
},()=>{
}),
//宽度
width: 20,
//高度
height: 20,
//定位点为中心
offset: ['-50%', '-50%'],
fillStyle: null,
//strokeStyle: null
}
},
'1': {
pointStyle: {
//绘制点占据的矩形区域
content: PointSimplifier.Render.Canvas.getImageContent(
yellow, ()=>{
// 延时设定的毫秒
pointSimplifierIns.renderLater();
},()=>{
}),
//宽度
width: 20,
//高度
height: 20,
//定位点为中心
offset: ['-50%', '-50%'],
fillStyle: null,
//strokeStyle: null
}
},
'2': {
pointStyle: {
//绘制点占据的矩形区域
content: PointSimplifier.Render.Canvas.getImageContent(
ora, ()=>{
// 延时设定的毫秒
pointSimplifierIns.renderLater();
},()=>{
}),
//宽度
width: 20,
//高度
height: 20,
//定位点为中心
offset: ['-50%', '-50%'],
fillStyle: null,
//strokeStyle: null
}
},
'3': {
pointStyle: {
//绘制点占据的矩形区域
content: PointSimplifier.Render.Canvas.getImageContent(
red, ()=>{
// 延时设定的毫秒
pointSimplifierIns.renderLater();
},()=>{
}),
//宽度
width: 20,
//高度
height: 20,
//定位点为中心
offset: ['-50%', '-50%'],
fillStyle: null,
//strokeStyle: null
}
},
'4': {
pointStyle: {
//绘制点占据的矩形区域
content: PointSimplifier.Render.Canvas.getImageContent(
gre, ()=>{
// 延时设定的毫秒
pointSimplifierIns.renderLater();
},()=>{
}),
//宽度
width: 20,
//高度
height: 20,
//定位点为中心
offset: ['-50%', '-50%'],
fillStyle: null,
//strokeStyle: null
}
}
};
} );
this.map.setCity('杭州市');
},效果：
