某片区房价信息

源代码编辑器
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>某片区的房价情况</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .demo-title {
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 1;
        }

        h1 {
            margin: 0;
            color: #abb3bb;
        }

        h3 {
            font-weight: normal;
            margin-top: 5px;
            color: #89A9C3;
        }
    </style>
</head>

<body>
    <div class="demo-title">
        <h1>标牌点-某片区的房价情况</h1>
        <h3>某一时刻某片区房价情况，立牌显示文字和动态图标，增加灵动感</h3>
    </div>
    <div id="map"></div>

    <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
    <script src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>

    <script>
      var map = new AMap.Map('map', {
          zoom: 16.82,
          center: [116.597005,39.914388],
          pitch: 80,
          rotation: 205,
          showLabel: false,
          mapStyle: 'amap://styles/84ba10a821298afbfc69cac6d854d241',
          viewMode: '3D',
      });

      var loca = new Loca.Container({
          map,
      });

      var geo = new Loca.GeoJSONSource({
          data: {
              "type": "FeatureCollection",
              "features": [{
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.59008979797363, 39.90058428630659]
                  },
                  "properties": {
                      "name": "远洋一方润园",
                      "price": 65000,
                      "count": 92
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.59378051757811, 39.89704498575387]
                  },
                  "properties": {
                      "name": "远洋一方溪语苑",
                      "price": 65000,
                      "count": 52
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.59366250038148, 39.90657598772839]
                  },
                  "properties": {
                      "name": "东会新村",
                      "price": 49000,
                      "count": 53
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.60161256790161, 39.91717540663561]
                  },
                  "properties": {
                      "name": "北京新天地（东区）",
                      "price": 62000,
                      "count": 639
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.59092664718628, 39.913423004886894]
                  },
                  "properties": {
                      "name": "京通苑阳光华苑",
                      "price": 48000,
                      "count": 651
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.59223556518555, 39.92263906258135]
                  },
                  "properties": {
                      "name": "龙湖长楹天街",
                      "price": 76000,
                      "count": 12
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.58066987991333, 39.92166814352715]
                  },
                  "properties": {
                      "name": "柏林爱乐",
                      "price": 62000,
                      "count": 471
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.5806484222412, 39.91766912840225]
                  },
                  "properties": {
                      "name": "汇鸿家园",
                      "price": 58000,
                      "count": 65
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.5688467025757, 39.91737289576941]
                  },
                  "properties": {
                      "name": "三间房南里",
                      "price": 53000,
                      "count": 45
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.57416820526123, 39.9034814381334]
                  },
                  "properties": {
                      "name": "康惠园三号院",
                      "price": 48000,
                      "count": 95
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.60126924514769, 39.89893812274133]
                  },
                  "properties": {
                      "name": "东一时区小区",
                      "price": 54000,
                      "count": 199
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.60905838012695, 39.90331683051646]
                  },
                  "properties": {
                      "name": "八里桥南院",
                      "price": 44000,
                      "count": 2
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.62437915802002, 39.9101312551376]
                  },
                  "properties": {
                      "name": "西马庄园",
                      "price": 36000,
                      "count": 102
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.60266399383545, 39.929747745342944]
                  },
                  "properties": {
                      "name": "保利嘉园1号院",
                      "price": 53000,
                      "count": 125
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.56524181365967, 39.92691752490338]
                  },
                  "properties": {
                      "name": "朝青知筑",
                      "price": 80000,
                      "count": 36
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.54335498809814, 39.903678966751734]
                  },
                  "properties": {
                      "name": "北花园小区1号院",
                      "price": 50000,
                      "count": 2
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.54949188232422, 39.921421297504764]
                  },
                  "properties": {
                      "name": "瑞和国际",
                      "price": 49000,
                      "count": 74
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [116.63712501525877, 39.92444921388591]
                  },
                  "properties": {
                      "name": "天赐良园（东区）",
                      "price": 49000,
                      "count": 51
                  }
              }]
          }
      });

      // 文字主体图层
      var zMarker = new Loca.ZMarkerLayer({
          loca: loca,
          zIndex: 120,
          depth: false,
      });
      zMarker.setSource(geo);
      zMarker.setStyle({
          content: (i, feat) => {
              var props = feat.properties;
              var leftColor = props.price < 60000 ? 'rgba(0, 28, 52, 0.6)' : 'rgba(33,33,33,0.6)';
              var rightColor = props.price < 60000 ? '#038684' : 'rgba(172, 137, 51, 0.3)';
              var borderColor = props.price < 60000 ? '#038684' : 'rgba(172, 137, 51, 1)';
              return (
                  '<div style="width: 490px; height: 228px; padding: 0 0;">' +
                  '<p style="display: block; height:80px; line-height:80px;font-size:40px;background-image: linear-gradient(to right, '
                  + leftColor + ',' + leftColor + ',' + rightColor + ',rgba(0,0,0,0.4)); border:4px solid '
                  + borderColor + '; color:#fff; border-radius: 15px; text-align:center; margin:0; padding:5px;">' +
                  props['name'] +
                  ': ' +
                  (props['price'] / 10000) +
                  '</p><span style="width: 130px; height: 130px; margin: 0 auto; display: block; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/prism_'
                  + (props['price'] < 60000 ? 'blue' : 'yellow') + '.png);"></span></div>'
              );
          },
          unit: 'meter',
          rotation: 0,
          alwaysFront: true,
          size: [490/2, 222/2],
          altitude: 0,
      });

      // 浮动三角
      var triangleZMarker = new Loca.ZMarkerLayer({
          loca: loca,
          zIndex: 119,
          depth: false,
      });
      triangleZMarker.setSource(geo);
      triangleZMarker.setStyle({
          content: (i, feat) => {
              return (
                  '<div style="width: 120px; height: 120px; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/triangle_'
                  + (feat.properties.price < 60000 ? 'blue' : 'yellow')
                  + '.png);"></div>'
              );
          },
          unit: 'meter',
          rotation: 0,
          alwaysFront: true,
          size: [60, 60],
          altitude: 15,
      });
      triangleZMarker.addAnimate({
          key: 'altitude',
          value: [0, 1],
          random: true,
          transform: 1000,
          delay: 2000,
          yoyo: true,
          repeat: 999999,
      });

      // 呼吸点 蓝色
      var scatterBlue = new Loca.ScatterLayer({
          loca,
          zIndex: 110,
          opacity: 1,
          visible: true,
          zooms: [2, 26],
          depth: false,
      });

      scatterBlue.setSource(geo);
      scatterBlue.setStyle({
          unit: 'meter',
          size: function (i, feat) {
              return feat.properties.price < 60000 ? [90, 90] : [0, 0];
          },
          texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/scan_blue.png',
          altitude: 20,
          duration: 2000,
          animate: true,
      });

      // 呼吸点 金色
      var scatterYellow = new Loca.ScatterLayer({
          loca,
          zIndex: 110,
          opacity: 1,
          visible: true,
          zooms: [2, 26],
          depth: false
      });

      scatterYellow.setSource(geo);
      scatterYellow.setStyle({
          unit: 'meter',
          size: function (i, feat) {
              return feat.properties.price > 60000 ? [90, 90] : [0, 0];
          },
          texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/scan_yellow.png',
          altitude: 20,
          duration: 2000,
          animate: true,
      });

      // 启动帧
      loca.animate.start();

      
    </script>
</body>

</html>
控制台
清空
返回顶部示例中心常见问题智能客服公众号
二维码