1.自定义海量点的图标，需要用到AMAPui组件库。2.0版本引入过程：
AMapUI.PointSimplifier，绘制引擎的官方文章PointSimplifier.Render.Canvas
2.icon字体库
cionfont
选一个喜欢的字体库
第一步：拷贝项目下面生成的font-face
@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的样式
.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">3</i>
3.转义函数
function iconFont(Unicode = '') {// 将使用的图标的Unicode放在以下方式进行转义，便可以使用//后台返回的字段进行了转义，需要进行反转义if(Unicode.indexOf('&') !== -1){Unicode = Unicode.replace('&','&')}if(Unicode.indexOf('&') !== -1){Unicode = Unicode.replace('&','&')}var icon = eval('("'+`${Unicode}`.replace('&#x','\\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('&#x','\\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('/amap-ui/static/data/10w.txt', function(csv) {var data = csv.split('\n');console.log(data);pointSimplifierIns.setData(data);});}
