高德地图的海量点加载并自定义fonticon的过程可以分为几个步骤。请注意,高德地图API的使用可能随着时间和版本更新而有所变化,因此请参考最新的官方文档。
AMapUI.PointSimplifier,绘制引擎的官方文章PointSimplifier.Render.Canvas
大致操作步骤:
引入高德地图API:
首先,你需要在你的项目中引入高德地图的API。通常是通过在HTML文件中添加一个标签来引入的。
准备自定义图标字体(fonticon):
如果你已经有了一套自定义的图标字体(比如通过iconfont.cn生成的),你需要将生成的字体文件(通常是.eot
、.woff
、.ttf
、.svg
等格式)和CSS样式文件放到你的项目中,并在HTML中引用它们。
使用AMap.UI组件库(如果需要):
对于海量点的渲染,你可能需要使用高德地图提供的AMap.UI组件库中的相关组件,比如AMapUI.PointSimplifier
。这个组件可以帮助你简化点的显示,提高性能。
创建地图实例:
使用高德地图API创建一个地图实例,并设置中心点、缩放级别等参数。
加载海量点数据:
准备你的海量点数据,这些数据通常是一个包含经纬度坐标的数组。
自定义图标渲染:
在加载点数据之前,你需要定义一个函数来自定义图标的渲染方式。在这个函数中,你可以使用你的自定义图标字体来为每个点设置图标。
添加点到地图上:
使用高德地图API提供的方法(比如addMarker
或者addOverlays
),将你的点数据添加到地图上。在添加点的时候,传入你定义的自定义图标渲染函数。
处理性能和交互:
由于是海量点的加载,性能和交互是需要特别关注的问题。你可以使用高德地图提供的集群策略来优化性能,比如使用MarkerClusterer
。同时,考虑到交互,你可能需要添加事件监听来处理用户的点击、鼠标悬停等操作。
调试和测试:
完成以上步骤后,进行充分的调试和测试,确保在不同设备和浏览器上都能正常工作。
@font-face {font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
uniapp的webview中,只支持ttf
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
<i class="iconfont">3i>
function iconFont(Unicode = '') {
// 将使用的图标的Unicode放在以下方式进行转义,便可以使用
//后台返回的字段进行了转义,需要进行反转义
if(Unicode.indexOf('&') !== -1){
Unicode = Unicode.replace('&','&')
}
if(Unicode.indexOf('&') !== -1){
Unicode = Unicode.replace('&','&')
}
var icon = eval('("'+`${Unicode}`.replace('','\\u').replace(';','')+'")')
return icon;
}
function iconFont(Unicode = '',font = 'iconfont') {
// 将使用的图标的Unicode放在以下方式进行转义,便可以使用
//后台返回的字段进行了转义,需要进行反转义
if(Unicode.indexOf('&') !== -1){
Unicode = Unicode.replace('&','&')
}
if(Unicode.indexOf('&') !== -1){
Unicode = Unicode.replace('&','&')
}
var icon = eval('("'+`${Unicode}`.replace('','\\u').replace(';','')+'")')
return icon;
}
AMapLoader.load({
"key": "你的key", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins": ['misc/PointSimplifier', '../lib/$'], // 需要加载的 AMapUI ui插件
},
"Loca": { // 是否加载 Loca, 缺省不加载
"version": '2.0' // Loca 版本,缺省 1.3.2
},
}).then((AMap) => {
var map = new AMap.Map('container', {
zoom: 4
});
var pointSimplifierIns = new AMapUI.PointSimplifier({
zIndex: 300,
map: map,
//maxChildrenOfQuadNode:3,
getPosition: function(item) {
if (!item) {
return null;
}
var parts = item.split(',');
return [parseFloat(parts[0]), parseFloat(parts[1])];
},
compareDataItem: function(a, b, aIndex, bIndex) {
if (aIndex === bIndex) {
return 0;
}
return aIndex > bIndex ? -1 : 1;
},
getHoverTitle: function(dataItem, idx) {
return '序号: ' + idx;
},
renderOptions: {
//点的样式
pointStyle: {
//绘制点占据的矩形区域
content: function(ctx, x, y, width, height) {
ctx.font = '30px iconfont'
// 绘制内容
ctx.fillText(iconFont("") , x, y)
},
//宽度
width: 15,
//高度
height: 24,
offset: ['-50%', '-100%'],
fillStyle: '#316395',
lineWidth: 1,
strokeStyle: 'gray'
},
topNAreaStyle: {
content: function(ctx, x, y, width, height) {
//绘制一个连接矩形四边中点的菱形
var top = [x + width / 2, y],
right = [x + width, y + height * 1 / 2],
bottom = [x + width / 2, y + height],
left = [x, y + height * 1 / 2];
ctx.moveTo(top[0], top[1]);
ctx.lineTo(right[0], right[1]);
ctx.lineTo(bottom[0], bottom[1]);
ctx.lineTo(left[0], left[1]);
ctx.lineTo(top[0], top[1]);
},
},
//鼠标hover时,绘制的叠加点的样式
pointHoverStyle: {
width: 10,
height: 10,
content: 'circle'
},
//鼠标hover时显示的title样式
hoverTitleStyle: {
classNames: 'my-hover-title',
offset: [0, -15],
position: 'top'
}
},
});
$.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {
var data = csv.split('\n');
console.log(data);
pointSimplifierIns.setData(data);
});
}