覆盖物一般包括标准点marker、折线polyline、多边形polygon、矩形rectangle、圆形circle等,这些功能在所有地图中都是支持的,有些地图对应的矩形使用多边形来实现,因为矩形也是多边形的一种。除了上述5种基础的覆盖物以外,还有两种高级的覆盖物,那就是点聚合和海量点,点聚合是标准点的高级分组版本,是将一定范围区域内的标准点合并到一个点,这个点上面显示总共包含多少个标准点,单击这个点,自动切换缩放级别显示更详细的标准点信息,这样可以大大节约内存,同时绘制也会显示不那么密集,不然全部挤在一块也是显得非常的不友好。
海量点相当于是标准点的低资源占用版本,由于单纯的标注点带的信息比较多,随着数量的增多,占用的资源也很多,如果标注点的数量成千上万,很容易卡主地图,有没有一种方式既可以显示所有的点,而资源占用更低呢,这就是海量点的出现的原因,它采用canvas绘制,除了经纬度信息,其他都不带,每个点都是绘制的圆形或者其他指定的枚举值中的图形,统一定义的大小,一般会设置一个小一点的值。总之,在项目中,可以根据实际需求,选择哪种绘制方式。
二、相关代码 void MapObjFunOverlay::editOverlay(QStringList &html){ //启用禁用编辑所有覆盖物 html << QString(" function editOverlays(edit) {"); html << QString(" var overlays = getOverlays();"); html << QString(" for (var i = 0; i < overlays.length; ++i) {"); html << QString(" var overlay = overlays[i];"); html << QString(" editOverlay2(overlay, edit);"); html << QString(" }"); html << QString(" }"); //指定唯一标识启动图元编辑/这里对地图中的所有覆盖物查找 html << QString(" function editOverlay(flag, edit) {"); html << QString(" var overlays = getOverlays();"); html << QString(" var overlay = findOverlay(overlays, flag);"); html << QString(" if (overlay) {"); html << QString(" editOverlay2(overlay, edit);"); html << QString(" }"); html << QString(" }"); //指定覆盖物编辑 html << QString(" function editOverlay2(overlay, edit) {"); html << QString(" if (edit) {"); html << QString(" enableEditOverlay(overlay);"); html << QString(" } else {"); html << QString(" disableEditOverlay(overlay);"); html << QString(" }"); html << QString(" }"); //指定覆盖物开启编辑 html << QString(" function enableEditOverlay(overlay) {"); html << QString(" if ('enableEdit' in overlay) {"); html << QString(" overlay.enableEdit();"); html << QString(" } else if ('enableEditing' in overlay) {"); html << QString(" overlay.enableEditing();"); html << QString(" } else if ('enableDragging' in overlay) {"); html << QString(" overlay.enableDragging();"); html << QString(" } else {"); html << QString(" if ('setDraggable' in overlay) {"); html << QString(" overlay.setDraggable(true);"); html << QString(" }"); html << QString(" if ('setEditable' in overlay) {"); html << QString(" overlay.setEditable(true);"); html << QString(" }"); html << QString(" if ('setOptions' in overlay) {"); html << QString(" overlay.setOptions({editable:true});"); html << QString(" }"); html << QString(" if (overlay.dragging) {"); html << QString(" overlay.dragging.enable();"); html << QString(" }"); html << QString(" }"); html << QString(" }"); //指定覆盖物停止编辑 html << QString(" function disableEditOverlay(overlay) {"); html << QString(" if ('disableEdit' in overlay) {"); html << QString(" overlay.disableEdit();"); html << QString(" } else if ('disableEditing' in overlay) {"); html << QString(" overlay.disableEditing();"); html << QString(" } else if ('disableDragging' in overlay) {"); html << QString(" overlay.disableDragging();"); html << QString(" } else {"); html << QString(" if ('setDraggable' in overlay) {"); html << QString(" overlay.setDraggable(false);"); html << QString(" }"); html << QString(" if ('setEditable' in overlay) {"); html << QString(" overlay.setEditable(false);"); html << QString(" }"); html << QString(" if ('setOptions' in overlay) {"); html << QString(" overlay.setOptions({editable:false});"); html << QString(" }"); html << QString(" if (overlay.dragging) {"); html << QString(" overlay.dragging.disable();"); html << QString(" }"); html << QString(" }"); html << QString(" }");}void MapObjFunOverlay::getOverlays(QStringList &html){ QString getOverlays = "map.getOverlays()"; if (mapCore == MapCore_GaoDe) { getOverlays = "map.getAllOverlays()"; } else if (mapCore == MapCore_TengXun) { getOverlays = "overlays"; } else if (mapCore == MapCore_Google) { getOverlays = "overlays"; } else if (mapCore == MapCore_Leaflet) { getOverlays = "overlays"; } html << QString(" function getOverlays() {"); html << QString(" return %1;").arg(getOverlays); html << QString(" }");}void MapObjFunOverlay::updateOverlay(QStringList &html){ QString setPath = "setPath"; QString setCenter = "setCenter"; if (mapCore == MapCore_Tian) { setPath = "setLngLats"; } else if (mapCore == MapCore_Leaflet) { setPath = "setLatLngs"; setCenter = "setLatLng"; } //指定类型和标识更新覆盖物数据 html << QString(" function updateOverlay(type, flag, points, radius) {"); html << QString(" var overlays = getOverlays();"); html << QString(" var overlay = findOverlay(overlays, flag);"); html << QString(" if (!overlay) {"); html << QString(" return;"); html << QString(" }"); html << QString(" if (type == 'circle') {"); html << QString(" var center = getPoint(points);"); html << QString(" overlay.%1(center);").arg(setCenter); html << QString(" overlay.setRadius(radius);"); html << QString(" } else {"); html << QString(" var points = getPoints(points);"); html << QString(" overlay.%1(points);").arg(setPath); html << QString(" }"); html << QString(" }");}void MapObjFunOverlay::setOverlayVisible(QStringList &html){ QString show = "show()"; QString hide = "hide()"; if (mapCore == MapCore_TengXun) { show = "setVisible(true)"; hide = "setVisible(false)"; } else if (mapCore == MapCore_Google) { show = "setVisible(true)"; hide = "setVisible(false)"; } else if (mapCore == MapCore_Leaflet) { show = "setOpacity(1)"; hide = "setOpacity(0)"; } //指定唯一标识设置覆盖物可见状态/没有指定标识则表示对所有的 html << QString(" function setOverlayVisible(flag, visible) {"); html << QString(" var overlays = getOverlays();"); html << QString(" if (!flag) {"); html << QString(" for (var i = 0; i < overlays.length; ++i) {"); html << QString(" var overlay = overlays[i];"); html << QString(" visible ? overlay.%1 : overlay.%2;").arg(show).arg(hide); html << QString(" }"); html << QString(" return;"); html << QString(" }"); html << QString(" var overlay = findOverlay(overlays, flag);"); html << QString(" if (overlay) {"); html << QString(" visible ? overlay.%1 : overlay.%2;").arg(show).arg(hide); html << QString(" }"); html << QString(" }");}三、相关地址文件地址:https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取码:o05q 文件名:bin_map.zip国内站点:https://gitee.com/feiyangqingyun国际站点:https://github.com/feiyangqingyun四、效果图
