wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
							<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>POI标记</title>
    <script src="../assets/vue@2.7.14.js"></script>
    <script src="../../dist/index.js"></script>
    <style>
      body {
        margin: 0
      }
      #map {
        height: 100vh;
      }
      .control {
        position: absolute;
        top: 20px;
        left: 40px;
        padding: 10px 10px 0;
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="map"></div>
      <div class="control">
        <button @click="toggleVisible">展示/隐藏标记</button>
        <button @click="toggleCluster">{{cluster ? '已启用' : '已禁用'}}聚合</button>
        <button @click="setData(false)">增加标记</button>
        <button @click="setData(true)">替换标记</button>
        <button @click="selectMarker">选中标记</button>
        <button @click="deSelect">取消选中(多选模式需传参)</button>
        <button @click="selectReverse">反选(仅多选模式)</button>
        <button @click="clearSelected">清空选中</button>
        <button @click="_ => markers.clearMarkers()">清空标记</button>
        <p>注意：Vue项目中<b>不要</b>将地图相关实例对象赋值给响应式变量</p>
      </div>
    </div>
  </body>

  <script>
    function makeRandomData (count) {
      return Array(count).fill('').map((item, index) => {
        return {
          id: `id${index}`, // id0,id1,id2... id属性名可自定义，locationById 方法中使用
          longitude: Math.random() / 2 + 116.15,
          latitude: Math.random() / 2 + 39.61,
        }
      })
    }

    function transformProj (data) {
      data.forEach(item => {
        const coords = CTMapOl.proj.fromLonLat([item.longitude, item.latitude])
        item.longitude = coords[0]
        item.latitude = coords[1]
      })
      return data
    }

    const { Style, Text, Circle, Fill, Stroke } = CTMapOl.style

    const markerStyle = new Style({
      image: new Circle({
        radius: 10,
        fill: new Fill({
          color: 'rgba(72,255,0,0.8)'
        })
      })
    })

    const markerSelectedStyle = new Style({
      image: new Circle({
        radius: 10,
        fill: new Fill({
          color: 'red'
        })
      }),
      zIndex: Infinity
    })

    new Vue({
      el: '#app',
      data () {
        this.visible = true
        return {
          cluster: false
        }
      },
      mounted () {
        this.map = new CTMapOl.extend.InitMap({
          domId: 'map',
          zoom: 9
        })

        this.init()
      },
      methods: {
        init () {
          const data = transformProj(makeRandomData(3000))

          // 不要在 data 中定义 markers 变量，无需响应式
          this.markers = new CTMapOl.extend.Markers(this.map.map, data, {
            // cluster: this.cluster, // 是否启用聚合，可动态切换
            // multiSelect: true, // 是否为多选模式，不可动态切换
            getCoordsFunc: item => [item.longitude, item.latitude],
            markerStyle: feature => {
              const selected = feature.get('selected')
              // 尽量在函数外预先生成固定不变部分，可提高性能
              return selected ? markerSelectedStyle : markerStyle
            },
            clusterStyleFunc: count => {
              return new Style({
                image: new Circle({
                  radius: 10,
                  fill: new Fill({
                    color: 'blue'
                  })
                }),
                text: new Text({
                  text: count,
                  fill: new Fill({
                    color: '#fff'
                  })
                })
              })
            },
            // onClick 多选模式下 feature 参数为 undefined，data 为
            // {
            //   type, // select（选中）, deSelect（取消选中）
            //   feature,  // 点击的标记
            //   selectedFeatures // 点击后全部已选中标记
            // }
            onClick: (data, feature) => { console.log('选中：', data, feature) },
            onClickCluster: feature => { console.log('选中聚合点：', feature) },
            // onDeSelect 仅在单选模式，点击地图空白区域时触发，feature 为被取消选中的标记
            onDeSelect: (data, feature) => { console.log('取消选中：', data, feature) }
          })
        },
        toggleVisible() {
          this.visible = !this.visible
          this.markers.setVisible(this.visible)
        },
        toggleCluster () {
          this.cluster = !this.cluster
          this.markers.enableCluster(this.cluster)
        },
        selectMarker () {
          const markerFeature = this.markers.selectMarker(item => item.id === 'id9')
          console.log(markerFeature)
        },
        selectReverse () {
          const reverse = this.markers.selectReverse()
          console.log('选中：', reverse)
        },
        deSelect() {
          // 单选模式无需传参
          this.markers.deSelectMarker()
          // 多选模式需传查询方法
          // this.markers.deSelectMarker(item => item.id === 'id11')
        },
        clearSelected() {
          // 单选多选模式均可
          this.markers.clearSelected()
        },
        setData (replace) {
          const data = transformProj(makeRandomData(1000))
          this.markers.addMarkers(data, replace)
        }
      }
    })
  </script>
</html>