Uniapp map底图组件使用 polygons 画出省市轮廓

polygons 画出轮廓

使用 polygons 导入广东省经纬度点位数据, 描出广东地图轮廓

DataV.GeoAtlas 坐标信息

注意: 广东省地图为 陆地 + 岛屿

也就是绘制多边形时 需要绘制一个陆地多边形 和 许多个独立的多边形(岛屿)

若只当做一个多边形绘制会出现如下图错乱

1. 将下载好的GeoJSON数据存放在 static 目录中, 并导入risk.vue

    import guangdongData from "../../static/json/guangdong.json";
   

2. 将GeoJSON数据转换为坐标数组

    // 将GeoJSON坐标转换为小程序地图坐标点数组
    // 数据地址: https://datav.aliyun.com/portal/school/atlas/area_selector
    const convertGeoJsonToMapPoints = (geoJson : any) => {
      const polygons = [];
    ​
      geoJson.features.forEach(feature => {
        const geometry = feature.geometry;
        const type = geometry.type;
        const coordinates = geometry.coordinates;
    ​
        if (type === 'Polygon') {
          /*
            陆地+岛屿 每个岛屿都是一个独立的多边形
            每个Polygon单独添加为一个多边形
           */
          const points = coordinates[0].map(coord => ({
            latitude: coord[1],
            longitude: coord[0],
          }));
          polygons.push({ points });
        } else if (type === 'MultiPolygon') {
          // 每个MultiPolygon中的Polygon也单独添加为一个多边形
          coordinates.forEach(polygon => {
            const points = polygon[0].map(coord => ({
              latitude: coord[1],
              longitude: coord[0],
            }));
            polygons.push({ points });
          });
        }
      });
    ​
      return polygons;
    };
   

3. 编写绘制多边形函数 并在onMounted页面加载时绘制

    // 处理绘制多边形轮廓
    const drawPolygons = () => {
      const mapPolygons = convertGeoJsonToMapPoints(guangdongData);
    ​
      polygons.value = mapPolygons.map((polygon) => ({
        points: polygon.points,
        strokeColor: '#066efa',  // 原型: #478fef
        fillColor: '#257afb19', // 透明度15 rgba(37,122,251,0.1) 转十六进制,否则调试时默认黑色
        lineWidth: 2,
      }));
    };
    ​
    onMounted(() => {
      drawPolygons(); // 绘制轮廓
    });
   

4. 在map地图设置polygons属性

      <map
        id="map"
        :longitude="mapCenter.longitude"
        :latitude="mapCenter.latitude"
        :scale="mapCenter.scale"
        :markers="markers"
        :polygons="polygons"
        class="map-style"
      >