酸雨

src/views/visualiz/sound/road/index.vue

@@ -3,49 +3,76 @@
     <div id="map"></div>
   </div>
 </template>
-
 <script>
-import { Scene } from "@antv/l7";
-import { Mapbox } from "@antv/l7-maps";
-// import axios from "axios";
-// import { GaodeMap } from "@antv/l7-maps";
-import { CityLayer } from "@antv/l7-district";
+import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 export default {
+  data() {
+    return {};
+  },
   mounted() {
     const scene = new Scene({
-      id: "map",
-      map: new Mapbox({
-        center: [108.33, 22.84],
-        pitch: 0,
-        style: "blank",
-        zoom: 3,
-        minZoom: 3,
-        maxZoom: 10,
-      }),
-    });
-
-    scene.on("loaded", () => {
-      new CityLayer(scene, {
-        // data: res,
-        joinBy: ["adcode", "citycode"],
-        adcode: ["450100", "771"],
-        depth: 3,
-        label: {
-          field: "NAME_CHN",
-          textAllowOverlap: false,
-        },
-
-        popup: {
-          enable: true,
-          Html: (props) => {
-            return `<span>${props.NAME_CHN}:</span><span>${props.citycode}</span>`;
-          },
-        },
+  id: 'map',
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'light',
+    center: [ 121.435159, 31.256971 ],
+    zoom: 14.89,
+    minZoom: 10
+  })
+});
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    const pointLayer = new PointLayer({})
+      .source(data, {
+        parser: {
+          type: 'json',
+          x: 'longitude',
+          y: 'latitude'
+        }
+      })
+      .shape('name', [
+        'circle',
+        'triangle',
+        'square',
+        'pentagon',
+        'hexagon',
+        'octogon',
+        'hexagram',
+        'rhombus',
+        'vesica'
+      ])
+      .size('unit_price', [ 10, 25 ])
+      .color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
+      .style({
+        opacity: 0.3,
+        strokeWidth: 2
       });
-    });
-  },
+
+    scene.addLayer(pointLayer);
+  });
+
+  }
 };
 </script>
-
 <style>
+::-webkit-scrollbar {
+  display: none;
+}
+
+html,
+body {
+  overflow: hidden;
+  margin: 0;
+}
+
+#map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
 </style>