更改高德地图自定义数据范围

原创

已于 2023-06-28 09:48:49 修改 · 819 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swift #开发语言 #ios

于 2023-06-27 18:17:55 首次发布

在项目中，为解决高德地图上一次性加载大量图标导致的页面加载缓慢问题，采用了动态渲染的解决方案。通过绘制透明圆圈限制显示数据的范围，仅在圆内显示部分图标。当用户点击地图时，以点击位置为中心更新圆圈，从而改变显示的图标，这样既能加速页面加载，又能避免图标过多造成的混乱。

在项目中遇到用高德地图中绘制海量图标，但是如果数据量太多的话，一次性绘制大量的图标marker，导致页面加载速度很慢。

这个问题，我想到在高德地图绘制一个透明的圆来作为用户查看数据的范围，在圆内显示部分数据，当用户点击圆范围之外的地图的话，以点击的位置的坐标作为圆范围的中心，以达到修改显示范围的目的，如此，每次高度地图只渲染部分数据，加快了页面的加载速度，还解决了图标过多，显得页面过于凌乱

            请求方法.then(res=>{
                AMapLoader.load({
                  key: "", // 申请好的Web端开发者Key，首次调用 load                 时必填
                  version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                  plugins: [
                     "AMap.ToolBar", //工具条
                     "AMap.Geocoder",
                  ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then((AMap) =>{
                    this.map = new AMap.Map("mapid", {
                        zoom: 14,
                        center: 地图中心,
                    });
                    res.data.map(item=>{
                        var marker = new AMap.Marker({
                            opacity: 1,
                            zIndex: 0,