高德地图2.0内网部署 离线瓦片 性能优化_高德地图瓦片服务

1.在工作中遇到需要实时加载实时轨迹和实时目标 数据量大的话会很卡 （性能优化）

通过创建不同的图层来管理不同的目标物和轨迹

  function createNewMarker(item) {
        const layer2 = new AMap.LabelsLayer({  //创建图层
          zooms: [2, 20],
          zIndex: 1000,
        });
        let icon = {};
        let imgUrl = getIconUrl(Number(item.Type));
        icon = {
          type: "image",
          image: imgUrl, // 设置图标的图片地址
          size: [35, 38],
          offset: new AMap.Pixel(0, -10),
          anchor: "center",
        };
        const num = Math.floor(Math.random() * 30) + 1;
        let pos2 = _this.WGS84_2_GCJ02([item.Longitude, item.Latitude]);
        var marker = new AMap.LabelMarker({  // 创建LabelMarker
          zooms: [2, 20],
          opacity: 1,
          zIndex: 1000,
          fold: true,
          icon,
          position: pos2,
          id: item.BatchNumber,
          Exist: item.Exist,
          color: colors[num],
          angle: 0,
        });
        markerMap.set(item.BatchNumber, marker);
        // 添加 marker 到图层
        layer2.add(marker);
        window.map.add(layer2);
        _this.markers.push(marker);
      }

2.将map挂载在window.map 上避免vue的依赖收集和派发更新

2.在使用2.0的时候会有AMap is not defined 的问题 我的解决方案是将map.js放在服务端 去加载 我的是通过node 开启本地服务来访问数据 

// 允许所有来源的跨域请求
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});
// 创建API路由
const filePath = path.join(__dirname, "/js/amap.js"); // 替换为你的文件路径
// 设置路由来处理文件读取请求
app.get("/api/map-data", (req, res) => {
  // 使用 fs.readFile 读取文件内容
  fs.readFile(filePath, "utf8", (err, data) => {
    if (err) {
      console.error("Error reading file", err);
      return res.status(500).send("Error reading the file");
    }
    // 设置响应的 Content-Type 为 text/javascript
    res.setHeader("Content-Type", "text/javascript");
    // 发送原始文件内容
    res.send(data);
  });
});

访问方法 

  // 地图初始化
    const script = document.createElement("script");
    script.src = `http://localhost:3000/api/map-data`; //node服务访问
    script.type = "text/javascript";
    script.onload = this.initAmap.bind(this);  // initAmap加载地图的地方
    document.head.appendChild(script);
 
 
 let base_url = "http://localhost:3000";
      // let base_url = "http://192.168.10.99:3000";
      this.customLayer = new AMap.TileLayer({
        getTileUrl: function (x, y, z) {
          return `${base_url}/city/${z}/${x}/${y}.jpg`;
        },
        opacity: 1,
        zIndex: 99,
      });
      this.layer = new AMap.LabelsLayer({
        zooms: [2, 20],
        zIndex: 1000,
      });
      this.layer1 = new AMap.VectorLayer({
        zooms: [2, 20],
        zIndex: 100,
      });
 
      window.map = new AMap.Map("container", {
        zoom: 12,
        resizeEnable: true,
        defaultCursor: "pointer",
        showLabel: true, //是否显示文字标注
        center: this.centerPoint,
        scrollWheel: true,
        viewMode: "3D", //显示罗盘 就需要3D地图了
        pitch: 0,
        layers: [this.customLayer],
      });
 
      // window.map.add(this.customLayer)
      window.map.add(this.layer);
      window.map.add(this.layer1);

3.地图瓦片前面的文章有写

4.最后声明 以上均无商用 个人学习的小demo 无商用行为 和 任何利益收取 ，商用项目请访问高德地图官方网站更新日志-地图 JS API 1.4 | 高德地图API