高德api,3D地图,marker事件/标注,非Dom事件,线条,地图事件,行政区图层

  • 加载地图,样式主题,3D
map = new AMap.Map('map-container', {
        zoom: 18,
        center: [116.39, 39.9],
        showLabel: false, //隐藏文字标注
        mapStyle: 'amap://styles/whitesmoke', //样式主题
        viewMode: '3D',//...
        pitch: 40,//视角
      })
map.getCenter() // 获取中心点
map.getZoom() // 获取缩放级别
  • marker创建,增加标注,增加事件,非dom事件
const marker = new AMap.Marker({
   position: [location.lng, location.lat],
   content: '
'
, }) marker.on('mouseover', () => {))//鼠标移入 .on('mouseout', () => {))//鼠标移出 .on('click', () => {))//点击 //显示标注 marker.setLabel({ offset: new AMap.Pixel(10, 10), content: `
${location.address}
`
, direction: 'right', }) //隐藏标注 marker.setLabel({ content: null, direction: null, }) //触发非dom事件 AMap.Event.trigger(marker, 'mouseover')
  • 缩放并改变中心点,不显示动画
map.setZoomAndCenter(18, currentMarker.getPosition(), true)
  • 画线
var polyline = new AMap.Polyline({ 
   path: [[v.lng, v.lat],[v1.lng, v1.lat]], 
   strokeColor: '#FF0000', // 线条颜色 
   strokeWeight: 1, // 线条宽度 
   strokeOpacity: 0.9 // 线条透明度 
 })
 map.add(polyline)
  • 地图,增加事件
map.on('complete', () => {
        console.log('map complete')
        emit('onMapInit')
      }).on('click', () => {//普通点击
      
      }).on('dragend', () => {//拖动

      }).on('touchstart', () => {//移动端事件

      })
  • 3D行政区图层AmbientLight,DirectionLight,Object3DLayer
    这是效果图,可以基于此在上面添加图层,绘制轨迹和其它覆盖物(基于canvas)
    官方提示: JS API v1.4.5版本开始,提供在3D视图模式下创建和添加三维立体图形的能力,这些立体图形包括网格(Mesh)类型、线类型、点类型等
    高德api,3D地图,marker事件/标注,非Dom事件,线条,地图事件,行政区图层_第1张图片
    vue相关加载map和Object3D的部分
	const loadMap = () => {
      console.log('initMap')
      const AMap = window.AMap
      console.log(window.AMap)
      map.value = new AMap.Map('map', {
        resizeEnable: true,
        mapStyle: 'amap://styles/darkblue',
        viewMode: '3D',
        pitch: 40,
        zoom: 12,
        showLabel: false
        // labelzIndex: -1,
      })
      map.value.on('complete', () => {
        console.log('map complete')
        emit('onMapInit')
        ambientLight()
      })
    }
    const ambientLight = () => {
      const AMap = window.AMap
      const _map = map.value
      _map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5)
      _map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1)
      var object3Dlayer = new AMap.Object3DLayer()
      _map.add(object3Dlayer)

      new AMap.DistrictSearch({
        subdistrict: 0, // 返回下一级行政区
        extensions: 'all', // 返回行政区边界坐标组等具体信息
        level: 'city' // 查询行政级别为 市
      }).search('北京市', function (status, result) {
        var bounds = result.districtList[0].boundaries
        var height = 1000
        var color = '#0088ff4f'
        var prism = new AMap.Object3D.Prism({
          path: bounds,
          height: height,
          color: color
        })

        prism.transparent = true
        object3Dlayer.add(prism)

        var text = new AMap.Text({
          text: result.districtList[0].name + '
('
+ result.districtList[0].adcode + ')', verticalAlign: 'bottom', position: [116.528261, 39.934313], height: 5000, style: { 'background-color': 'transparent', '-webkit-text-stroke': 'red', '-webkit-text-stroke-width': '0.5px', 'text-align': 'center', border: 'none', color: 'white', 'font-size': '24px', 'font-weight': 600 } }) text.setMap(_map) }) }
  • 以下是官方找的demo, 然后再增加一些随机轨迹图层的渲染
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>英文、中英文地图</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    #map-styles .input-item {
      height: 2rem;
    }

    #map-styles .input-item span{
      display: inline-block;
      width: 4rem;
    }

    #map-styles .input-item .input-text {
      color: #0288d1;
      margin-left: 1rem;
      margin-right: 0rem;
      width: 6rem;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script src="https://webapi.amap.com/maps?v=1.4.10&key=xxx&plugin=Map3D,AMap.DistrictSearch"></script>
  <!--script crossorigin="anonymous" id="amap_plus_js" src="https://webapi.amap.com/maps/modules?v=1.4.22&key=bb01f498549fe82c328c9dc1c2280d6c&vrs=1671592305593&m=mouse,vectorlayer,overlay,wgl,vectorlayer,wgl,AMap.CustomLayer,rbush,Map3D,AMap.DistrictSearch,sync" type="text/javascript"></script-->
  <script>
    //初始化地图
    var map = new AMap.Map('container', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      mapStyle: "amap://styles/darkblue",
      viewMode:'3D',
      pitch: 70,
      zoom: 12,
      labelzIndex: -1,
    });
    //隐藏地图上的所有地名
    //map.setFeatures(['bg', 'point', 'building']);

    //绑定radio点击事件
    var radios = document.querySelectorAll("#map-styles input");
    radios.forEach(function(ratio) {
      ratio.onclick = setMapStyle;
    });

    function setMapStyle() {
      var styleName = "amap://styles/" + this.value;
      map.setMapStyle(styleName);
    }
        // 设置光照
    map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
    map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);

    var object3Dlayer = new AMap.Object3DLayer();
    map.add(object3Dlayer);
    
    new AMap.DistrictSearch({
        subdistrict: 0,   //返回下一级行政区
        extensions: 'all',  //返回行政区边界坐标组等具体信息
        level: 'city'  //查询行政级别为 市
    }).search('朝阳区', function (status, result) {
		console.log(status)
        var bounds = result.districtList[0].boundaries;
        var height = 1000;
        var color = '#0088ff4f'; // rgba
        var prism = new AMap.Object3D.Prism({
            path: bounds,
            height: height,
            color: color
        });

        prism.transparent = true;
        object3Dlayer.add(prism);

        var text = new AMap.Text({
            text: result.districtList[0].name + '
('
+ result.districtList[0].adcode + ')', verticalAlign: 'bottom', position: [116.528261, 39.934313], height: 5000, style: { 'background-color': 'transparent', '-webkit-text-stroke': 'red', '-webkit-text-stroke-width': '0.5px', 'text-align': 'center', 'border': 'none', 'color': 'white', 'font-size': '24px', 'font-weight': 600 } }); text.setMap(map); }); function getData(callback){ AMap.plugin('AMap.DistrictSearch', function() { var search = new AMap.DistrictSearch(); search.search('朝阳区', function(status, data) { if (status === 'complete') { var positions = [] var provinces = data['districtList'][0]['districtList'] for (var i = 0; i < provinces.length; i += 1) { positions.push({ center: provinces[i].center, radius:Math.max(2, Math.floor(Math.random() * 10)) }) } callback(positions) } }); }); } //绘制多段的轨迹 function addLayerV2() { AMap.plugin('AMap.CustomLayer', function() { var canvas = document.createElement('canvas'); var customLayer = new AMap.CustomLayer(canvas, { zooms: [10, 18], alwaysRender:true,//缩放过程中是否重绘,复杂绘制建议设为false zIndex: 120 //显示高度 }); var segments = []; var positions = []; var lat_min = 39.86, lat_max = 40.05, lng_min = 116.38, lng_max = 116.55; for (var i = 0; i < 5; i++) { var positions = []; var count = Math.floor(Math.random() * 10) + 10; for (var j = 0; j < count; j++) { var lat = Math.random() * (lat_max - lat_min) + lat_min; var lng = Math.random() * (lng_max - lng_min) + lng_min; positions.push([lng, lat]); } segments.push(positions); } var onRender = function(){ var retina = AMap.Browser.retina; var size = map.getSize();//resize var width = size.width; var height = size.height; canvas.style.width = width+'px' canvas.style.height = height+'px' if(retina){//高清适配 width*=2; height*=2; } canvas.width = width; canvas.height= height;//清除画布 var ctx = canvas.getContext("2d"); for (var i = 0; i < segments.length; i++) { var positions = segments[i]; ctx.strokeStyle = "#" + ((1 << 24) * Math.random() | 0).toString(16); ctx.lineWidth = 5; ctx.beginPath(); for (var j = 0; j < positions.length; j++) { var pixel = map.lngLatToContainer(positions[j]); if (j == 0) { ctx.moveTo(pixel.x, pixel.y); } else { ctx.lineTo(pixel.x, pixel.y); } } ctx.stroke(); } }; customLayer.render = onRender; customLayer.setMap(map); }); } getData(addLayerV2); </script> </body> </html>

你可能感兴趣的:(前端,javascript,vue)