最新公告
  • 欢迎您光临码巴巴,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 腾讯地图3D自定义图形,腾讯地图线路图循环驾驶,腾讯地图自定义标注+文字

    1.因为腾讯地图比其他地图乡镇级支持好,所以选用腾讯地图

    2.先看效果图

    3.代码实例

    <template>
        <div id="mapContainer" style="width: 100%; height: 100vh"></div>
    </template>
    <script>
    
    import { listsDpMap } from "@/api/system/dpMap";
    import { listsMapIcon} from "@/api/system/mapIcon";
    import { listsMapPath } from "@/api/system/mapPath";
    export default {
      name: 'dpMApShow',
    
      data() {
        return {
          keyword: "", // 搜索关键词
          nearPointList: [], // 附近地址
          isShowDialog: false, // 是否显示弹窗
          markersArray: [],
          geocoder: null,
          nowAddress: null, // 选择的地点
          geocoderLocation: null,
          path:[],
          mapData:[],
          icosns:[],
          baseUrl:"/dev-api",
          routePath:[ ],
          map:{},
          marker:{},
          routeObjects:[],
          map:{},
          remark:''
    
        };
      },
      mounted() {
        this.listsDpMap();
        this.remark = this.$route.query.remark;
    
      },
      methods: {
          listsMapIcon(){
            listsMapIcon({page:this.remark}).then(resp=>{
                this.icosns = resp.data;
                this.listsMapPath();
                  this.initMap();
            })
          },
    
          listsDpMap(){
            listsDpMap({remark:this.remark}).then(resp=>{
                this.mapData=resp.data;
                 this.listsMapIcon();
    
            })
          },
          listsMapPath(){
            listsMapPath({page:this.remark}).then(resp=>{
                this.routeObjects = resp.data;
                 this.routeObjects.map((item,index) =>{
                     this.createPath(item);
                 });
    
            })
          },
          createPath(item){
    
            let  routePath = JSON.parse(item.path);
              //路线部分
             let path = routePath.map((item,index)=>{
                   return  new TMap.LatLng(item[1],item[0])
             });
            let map = this.map;
            let polylineLayer = new TMap.MultiPolyline({
    
              map, // 绘制到目标地图
              // 折线样式定义
              styles: {
                style_blue: new TMap.PolylineStyle({
                  color: item.baseColor, // 线填充色
                  width:  parseInt(item.width), // 折线宽度
                  borderWidth: 2, // 边线宽度
                  borderColor: '#FFF', // 边线颜色
                  lineCap: 'round', // 线端头方式
                  eraseColor: 'rgba(190,188,188,1)',
                }),
              },
              geometries: [
                {
                  id: 'erasePath',
                  styleId: 'style_blue',
                  paths: path,
                },
              ],
            });
    
             var marker = new TMap.MultiMarker({
                map,
               id:item.id,
                styles: {
                  'car-down': new TMap.MarkerStyle({
                    width: item.carWidth == null ?25:item.carWidth,
                    height: item.carHeight == null ?35:item.carHeight,
                    anchor: {
                      x: 20,
                      y: 20,
                    },
                    faceTo: 'map',
                    rotate: 180,
                    src: this.baseUrl + item.carImg,
                  }),
                  start: new TMap.MarkerStyle({
                    width: 25,
                    height: 35,
                    anchor: { x: 16, y: 32 },
                    src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
                  }),
                  end: new TMap.MarkerStyle({
                    width: 25,
                    height: 35,
                    anchor: { x: 16, y: 32 },
                    src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
                  }),
                },
                geometries: [
                  {
                    id: 'car',
                    styleId: 'car-down',
                    position: new TMap.LatLng(routePath[0][1], routePath[0][0]),
                  },
                  {
                    id: 'start',
                    styleId: 'start',
                    position: new TMap.LatLng(routePath[0][1], routePath[0][0]),
                  },
                  {
                    id: 'end',
                    styleId: 'end',
                    position: new TMap.LatLng(routePath[routePath.length-1][1], routePath[routePath.length-1][0]),
                  },
                ],
              });
    
    
            //小车行进循环滚动
            marker.moveAlong( { car: {  path, speed: item.speed, }, }, {  autoRotation: true,  } );
            marker.on('moving', (e) => {
                let passedLatLngs = e.car && e.car.passedLatLngs;
                if (passedLatLngs) {
                  // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
                  polylineLayer.eraseTo(
                    'erasePath',
                    passedLatLngs.length - 1,
                    passedLatLngs[passedLatLngs.length - 1]
                  );
                }
              });
    
               marker.on('move_ended', (e) => {
                    marker.moveAlong( e, {  autoRotation: true,  } );
               })
    
    
    
          },
        // 初始化地图
        initMap() {
          	//初始化地图
            var map = new TMap.Map('mapContainer', {
              center: new TMap.LatLng(40.553998, 109.953582),//地图显示中心点
              zoom:15,	//缩放级别
              pitch:45,
            });
    
            this.map = map;
            //图标部分
           this.icosns.map((item,index) =>{
            new TMap.MultiMarker({
              map: map,
              styles: {
                default: new TMap.MarkerStyle({
                  //点标注的相关样式
                  width: 60, //宽度
                  height: 60, //高度
                  anchor: { x: 46, y: 46 }, //锚点位置
                  src: this.baseUrl + item.icon, //标注点图片url或base64地址
                  color: "#000", //标注点文本颜色
                  size: 22, //标注点文本文字大小
                  offset: { x: 0, y: 26 }, //标注点文本文字基于direction方位的偏移属性
                }),
              },
              geometries: [
                {
                  position: new TMap.LatLng(item.latitude, item.longitude), //标注点位置
                  content: item.remark, //标注点文本
                },
              ],
            });
    
            });
    
    
    
    
            //3D部分
             this.mapData.map((item,index) =>{
    
    
                  //转为LatLng数组
                 var mapPath = JSON.parse(item.geoJson).map(p => {
                    return new TMap.LatLng(p[1], p[0]);
                  });
    
                    var mapColor = JSON.parse(item.coler);
                  //初始化polygon
                    new TMap.MultiPolygon({
                        id: 'polygon-layer' + index, //图层id
                        map: map, //设置多边形图层显示到哪个地图实例中
                        //多边形样式
                        styles: {
                          'polygon': new TMap.ExtrudablePolygonStyle({
                            'color': mapColor == null ||mapColor.color == null? 'rgba(0,125,255,0.7)':mapColor.color, //面填充色
                            'showBorder':false, //是否显示拔起面的边线
                            'extrudeHeight':mapColor == null ||mapColor.extrudeHeight == null?30:mapColor.extrudeHeight, //多边形拔起高度
                            'borderColor': mapColor == null ||mapColor.borderColor == null ?'rgba(0,125,255,1)': mapColor.borderColor//边线颜色
                          })
                        },
                        //多边形数据
                        geometries: [
                          {
                            'id': 'p1', //该多边形在图层中的唯一标识(删除、更新数据时需要)
                            'styleId': 'polygon', //绑定样式名
                            'paths': mapPath, //多边形轮廓
                          }
                        ]
    
    
                  });
              });
    
    
        },
    
    
      },
    };
    </script>
    <style scoped lang="scss">
    </style>
    

    4.对数据说明一下:

    mapData 3D地图数据结构

    {
        "msg": "操作成功",
        "code": 200,
        "data": [
            {
                "createBy": "",
                "createTime": "2023-09-07 10:29:13",
                "updateBy": "",
                "updateTime": "2023-09-08 20:37:17",
                "remark": "3D地图展示",
                "id": 1,
                "name": "同官村",
                "type": null,
                "geoJson": "[\n\t\t\t\t\t[109.98709978776506, 40.550780374221134],\n\t\t\t\t\t[109.98476183135007, 40.55263467078786],\n\t\t\t\t\t[109.98536213650412, 40.55369967409627],\n\t\t\t\t\t[109.98107569355837, 40.55411283596895],\n\t\t\t\t\t[109.98131461887174, 40.555500257234115],\n\t\t\t\t\t[109.98133168996488, 40.556096689286434],\n\t\t\t\t\t[109.9815364765982, 40.55690061204312],\n\t\t\t\t\t[109.98151941471619, 40.557263652359275],\n\t\t\t\t\t[109.9814170334689, 40.558495385269474],\n\t\t\t\t\t[109.97795270884764, 40.558274971157104],\n\t\t\t\t\t[109.97773085969814, 40.55954558620107],\n\t\t\t\t\t[109.97773086248948, 40.55970112926018],\n\t\t\t\t\t[109.97752608036035, 40.56088095643477],\n\t\t\t\t\t[109.96537355, 40.56107089],\n\t\t\t\t\t[109.9654428500598, 40.56260655484202],\n\t\t\t\t\t[109.98153645585025, 40.56241067930531],\n\t\t\t\t\t[109.981519385159, 40.560841919126496],\n\t\t\t\t\t[109.98349899944674, 40.560841919126496],\n\t\t\t\t\t[109.98397684904222, 40.56234585505154],\n\t\t\t\t\t[109.98788488330817, 40.56233288537505],\n\t\t\t\t\t[109.98785073522524, 40.560725232745604],\n\t\t\t\t\t[109.98793380207951, 40.55889512805301],\n\t\t\t\t\t[109.9877483044342, 40.55666704355398],\n\t\t\t\t\t[109.98766296316883, 40.555474181998335],\n\t\t\t\t\t[109.98727043187995, 40.55374969583237],\n\t\t\t\t\t[109.98740695676825, 40.55349037984058],\n\t\t\t\t\t[109.98733875022137, 40.55333480701205],\n\t\t\t\t\t[109.98738994612353, 40.553282941084376],\n\t\t\t\t\t[109.98718514309196, 40.552375282465526],\n\t\t\t\t\t[109.98718512755605, 40.55148058135415],\n\t\t\t\t\t[109.98709978776506, 40.550780374221134]\n\t\t\t\t]",
                "coler": "{\n\"color\":\"rgba(18,255,110,0.1)\",\n\"extrudeHeight\":30,\n\"borderColor\":\"rgba(0,125,255,1)\"\n}"
            },
            {
                "createBy": "",
                "createTime": "2023-09-08 09:57:40",
                "updateBy": "",
                "updateTime": "2023-09-08 20:37:34",
                "remark": "3D地图展示",
                "id": 2,
                "name": "交界营子",
                "type": null,
                "geoJson": "[\n\t\t\t\t\t[109.93825453965145, 40.55747418521928],\n\t\t\t\t\t[109.93644289, 40.54823738],\n\t\t\t\t\t[109.93860537290726, 40.548859128174215],\n\t\t\t\t\t[109.93860538739575, 40.54805974087578],\n\t\t\t\t\t[109.93866386220697, 40.546460939733834],\n\t\t\t\t\t[109.93889767825672, 40.54464003976991],\n\t\t\t\t\t[109.94030037460095, 40.54477327790924],\n\t\t\t\t\t[109.94123553304651, 40.543218817657305],\n\t\t\t\t\t[109.94427471575986, 40.54290792159256],\n\t\t\t\t\t[109.94573588665524, 40.54095368711698],\n\t\t\t\t\t[109.94776125218468, 40.540461983157904],\n\t\t\t\t\t[109.94813041253025, 40.5384515623686],\n\t\t\t\t\t[109.95034521665853, 40.537235931852855],\n\t\t\t\t\t[109.95299063732254, 40.538872352762844],\n\t\t\t\t\t[109.95403650140658, 40.539620418499496],\n\t\t\t\t\t[109.95858915918976, 40.5427058006352],\n\t\t\t\t\t[109.95999660965762, 40.54370736591269],\n\t\t\t\t\t[109.95888611611905, 40.54712711117756],\n\t\t\t\t\t[109.95987969303043, 40.54752681109438],\n\t\t\t\t\t[109.9597022532674, 40.550450738487925],\n\t\t\t\t\t[109.95904823877882, 40.552899501210845],\n\t\t\t\t\t[109.95817032859217, 40.55645692083563],\n\t\t\t\t\t[109.95596374216052, 40.5564528661846],\n\t\t\t\t\t[109.9531583214542, 40.556985730092244],\n\t\t\t\t\t[109.9483657368126, 40.55689691971409],\n\t\t\t\t\t[109.9466707998522, 40.55676370394202],\n\t\t\t\t\t[109.94632010245876, 40.55822906391531],\n\t\t\t\t\t[109.94503427939384, 40.55867310651993],\n\t\t\t\t\t[109.94515114141956, 40.56076007017639],\n\t\t\t\t\t[109.94339774520242, 40.56124849976617],\n\t\t\t\t\t[109.94199506646952, 40.55925035782272],\n\t\t\t\t\t[109.9391311824931, 40.56027163728175],\n\t\t\t\t\t[109.93901431380053, 40.5589395307717],\n\t\t\t\t\t[109.93825453965145, 40.55747418521928]\n\t\t\t\t]",
                "coler": "{\n\"color\":\"rgba(28,100,110,0.1)\",\n\"extrudeHeight\":30,\n\"borderColor\":\"rgba(0,125,255,1)\"\n}"
            },
            {
                "createBy": "",
                "createTime": "2023-09-08 10:04:07",
                "updateBy": "",
                "updateTime": "2023-09-08 20:37:40",
                "remark": "3D地图展示",
                "id": 3,
                "name": "小召湾村",
                "type": null,
                "geoJson": "[\n\t\t\t\t\t[109.95397652, 40.56124864],\n\t\t\t\t\t[109.9672823429072, 40.560985738820456],\n\t\t\t\t\t[109.96719126830237, 40.55567924209359],\n\t\t\t\t\t[109.96715713832354, 40.555368060165726],\n\t\t\t\t\t[109.96162204378003, 40.55483307326867],\n\t\t\t\t\t[109.96285762051708, 40.547251681060715],\n\t\t\t\t\t[109.9630577750323, 40.54657131900983],\n\t\t\t\t\t[109.96340838166834, 40.54544360121738],\n\t\t\t\t\t[109.96413998472757, 40.54388700595785],\n\t\t\t\t\t[109.96430093525403, 40.54365351445469],\n\t\t\t\t\t[109.96466024778405, 40.543636435466084],\n\t\t\t\t\t[109.96476780718274, 40.543423930611205],\n\t\t\t\t\t[109.96646717937892, 40.543840766672645],\n\t\t\t\t\t[109.9733736015716, 40.54436573849355],\n\t\t\t\t\t[109.97351293051659, 40.543987602197916],\n\t\t\t\t\t[109.97389111274595, 40.54368509195242],\n\t\t\t\t\t[109.97391101280576, 40.54298931430949],\n\t\t\t\t\t[109.97442852558571, 40.54277755476804],\n\t\t\t\t\t[109.97430893011675, 40.54237481782799],\n\t\t\t\t\t[109.97504555626429, 40.54211202135261],\n\t\t\t\t\t[109.97588153728562, 40.54185488204911],\n\t\t\t\t\t[109.98460660474672, 40.541343322217955],\n\t\t\t\t\t[109.98701429876077, 40.541248945422815],\n\t\t\t\t\t[109.98708368482517, 40.54013625327356],\n\t\t\t\t\t[109.98720227057227, 40.53884003461649],\n\t\t\t\t\t[109.98701221766495, 40.53284078866824],\n\t\t\t\t\t[109.98383473878773, 40.533180077206985],\n\t\t\t\t\t[109.97994916037742, 40.53534567889661],\n\t\t\t\t\t[109.97353895983578, 40.53438379504004],\n\t\t\t\t\t[109.95631455, 40.53304669],\n\t\t\t\t\t[109.956373, 40.53309111],\n\t\t\t\t\t[109.95594371991517, 40.53583325574178],\n\t\t\t\t\t[109.95465176490563, 40.53555271723898],\n\t\t\t\t\t[109.95342129551933, 40.5384515623686],\n\t\t\t\t\t[109.9530163423269, 40.53878953463465],\n\t\t\t\t\t[109.9601331381658, 40.54369084393108],\n\t\t\t\t\t[109.9590350487641, 40.547081458689476],\n\t\t\t\t\t[109.96000804648502, 40.54749338151035],\n\t\t\t\t\t[109.95985515323532, 40.55021838241385],\n\t\t\t\t\t[109.95925745177001, 40.552626417308],\n\t\t\t\t\t[109.95910455021607, 40.55319672668126],\n\t\t\t\t\t[109.95879875051277, 40.5544007056359],\n\t\t\t\t\t[109.95857634753757, 40.55525614798877],\n\t\t\t\t\t[109.95834004585973, 40.556534001965964],\n\t\t\t\t\t[109.95700564081368, 40.55654456275047],\n\t\t\t\t\t[109.95664423957479, 40.5565234411803],\n\t\t\t\t\t[109.9564218343595, 40.55722045055243],\n\t\t\t\t\t[109.95585192908781, 40.55751614997572],\n\t\t\t\t\t[109.95618965487368, 40.55813216095444],\n\t\t\t\t\t[109.95397652, 40.56124864]\n\t\t\t\t]",
                "coler": "{\n\"color\":\"rgba(28,0,110,0.1)\",\n\"extrudeHeight\":30,\n\"borderColor\":\"rgba(0,125,255,1)\"\n}"
            },
            {
                "createBy": "",
                "createTime": "2023-09-08 10:08:05",
                "updateBy": "",
                "updateTime": "2023-09-08 20:37:50",
                "remark": "3D地图展示",
                "id": 4,
                "name": "黄草洼",
                "type": null,
                "geoJson": "[\n\t\t\t\t\t[109.96744723599065, 40.56094323840257],\n\t\t\t\t\t[109.96732779366457, 40.55529026451402],\n\t\t\t\t\t[109.96171323652707, 40.55477159728433],\n\t\t\t\t\t[109.96242617919599, 40.550793796643326],\n\t\t\t\t\t[109.96256551709924, 40.54988635613163],\n\t\t\t\t\t[109.96274466189503, 40.54854031630819],\n\t\t\t\t\t[109.96282427369204, 40.54810167377191],\n\t\t\t\t\t[109.96292380081947, 40.547421061653786],\n\t\t\t\t\t[109.9631029455218, 40.54674044409497],\n\t\t\t\t\t[109.96341694539055, 40.545767317379884],\n\t\t\t\t\t[109.96349617108443, 40.54546583810652],\n\t\t\t\t\t[109.9636278977037, 40.545243431199175],\n\t\t\t\t\t[109.96380523545557, 40.54490430041605],\n\t\t\t\t\t[109.96418387699023, 40.544064903858256],\n\t\t\t\t\t[109.96431556485946, 40.54379805688189],\n\t\t\t\t\t[109.96444725006187, 40.54372022637166],\n\t\t\t\t\t[109.96472525020557, 40.54369798907125],\n\t\t\t\t\t[109.96485693655266, 40.543520090479255],\n\t\t\t\t\t[109.96611524804463, 40.54384253143034],\n\t\t\t\t\t[109.96773935183057, 40.54402042941459],\n\t\t\t\t\t[109.97343331547134, 40.54447161635543],\n\t\t\t\t\t[109.97363235725506, 40.54401785316337],\n\t\t\t\t\t[109.97397073041584, 40.54368509195242],\n\t\t\t\t\t[109.97401053497708, 40.54301956562956],\n\t\t\t\t\t[109.97452804774842, 40.54280780616334],\n\t\t\t\t\t[109.97440861863568, 40.54241453718622],\n\t\t\t\t\t[109.97514507860014, 40.54217252460529],\n\t\t\t\t\t[109.97582182519272, 40.54196076303281],\n\t\t\t\t\t[109.97731465134216, 40.54187000791199],\n\t\t\t\t\t[109.98346097199494, 40.54148681453886],\n\t\t\t\t\t[109.98703136507399, 40.5413008202058],\n\t\t\t\t\t[109.98713749282906, 40.54504058505549],\n\t\t\t\t\t[109.98711680217372, 40.547746025939944],\n\t\t\t\t\t[109.98725332985946, 40.54797943894202],\n\t\t\t\t\t[109.98727040712005, 40.54873154334784],\n\t\t\t\t\t[109.98706565493382, 40.55067663936335],\n\t\t\t\t\t[109.98465937799575, 40.55259568659153],\n\t\t\t\t\t[109.98523962572881, 40.553645977140995],\n\t\t\t\t\t[109.98095623398788, 40.554035038412586],\n\t\t\t\t\t[109.98119516489938, 40.55603185990884],\n\t\t\t\t\t[109.98128049698896, 40.556498630375025],\n\t\t\t\t\t[109.9813998975207, 40.55692637104045],\n\t\t\t\t\t[109.98136583685294, 40.55723764834747],\n\t\t\t\t\t[109.98138290418937, 40.557419169351334],\n\t\t\t\t\t[109.98131463864269, 40.55839166104919],\n\t\t\t\t\t[109.9778332491503, 40.55818421224651],\n\t\t\t\t\t[109.97756020320254, 40.559610413013544],\n\t\t\t\t\t[109.97754314088253, 40.55967519881719],\n\t\t\t\t\t[109.97737248925054, 40.56076427092669],\n\t\t\t\t\t[109.96744723599065, 40.56094323840257]\n\t\t\t\t]",
                "coler": "{\n\"color\":\"rgba(28,255,10,0.1)\",\n\"extrudeHeight\":30,\n\"borderColor\":\"rgba(0,125,255,1)\"\n}"
            }
        ]
    }

    icosns  自定义标注+文字数据结构

    {
        "msg": "操作成功",
        "code": 200,
        "data": [
            {
                "createBy": "",
                "createTime": "2023-09-08 12:03:37",
                "updateBy": "",
                "updateTime": "2023-09-09 14:39:24",
                "remark": "小召湾一号厕所",
                "id": 1,
                "name": "小召湾一号厕所",
                "icon": "/profile/upload/2023/09/09/厕所_20230909112611A004.png",
                "page": "3D地图显示",
                "longitude": "109.953582",
                "latitude": "40.553998"
            },
            {
                "createBy": "",
                "createTime": "2023-09-08 14:56:59",
                "updateBy": "",
                "updateTime": "2023-09-09 14:14:40",
                "remark": "最好的垃圾桶",
                "id": 2,
                "name": "小召湾一号垃圾桶",
                "icon": "/profile/upload/2023/09/09/垃圾桶_20230909112625A005.png",
                "page": "3D地图展示",
                "longitude": "109.962921",
                "latitude": "40.54973"
            },
            {
                "createBy": "",
                "createTime": "2023-09-09 11:30:27",
                "updateBy": "",
                "updateTime": "2023-09-09 14:14:50",
                "remark": "村委会",
                "id": 3,
                "name": "村委会",
                "icon": "/profile/upload/2023/09/09/村委会_20230909112949A006.png",
                "page": "3D地图展示",
                "longitude": "109.9812",
                "latitude": "40.553091"
            },
            {
                "createBy": "",
                "createTime": "2023-09-09 11:41:45",
                "updateBy": "",
                "updateTime": "2023-09-09 14:15:19",
                "remark": "党群服务中心",
                "id": 4,
                "name": "哈哈",
                "icon": "/profile/upload/2023/09/09/党群服务中心_20230909141507A002.png",
                "page": "3D地图展示",
                "longitude": "109.94515114141956",
                "latitude": "40.56076007017639"
            }
        ]
    }

    routeObjects 线路数据结构

    {
        "msg": "操作成功",
        "code": 200,
        "data": [
            {
                "createBy": "",
                "createTime": "2023-09-08 18:46:00",
                "updateBy": "",
                "updateTime": "2023-09-09 14:06:54",
                "remark": "上面那个",
                "id": 1,
                "baseColor": "#3777FF",
                "width": "10",
                "carImg": "/profile/upload/2023/09/08/car_20230908184152A001.png",
                "carWidth": 40,
                "carHeight": 40,
                "speed": 250,
                "path": "\t\t\t\t[\n\t\t\t\t\t[109.98709978776506, 40.550780374221134],\n\t\t\t\t\t[109.98476183135007, 40.55263467078786],\n\t\t\t\t\t[109.98536213650412, 40.55369967409627],\n\t\t\t\t\t[109.98107569355837, 40.55411283596895],\n\t\t\t\t\t[109.98131461887174, 40.555500257234115],\n\t\t\t\t\t[109.98133168996488, 40.556096689286434],\n\t\t\t\t\t[109.9815364765982, 40.55690061204312],\n\t\t\t\t\t[109.98151941471619, 40.557263652359275],\n\t\t\t\t\t[109.9814170334689, 40.558495385269474],\n\t\t\t\t\t[109.97795270884764, 40.558274971157104],\n\t\t\t\t\t[109.97773085969814, 40.55954558620107],\n\t\t\t\t\t[109.97773086248948, 40.55970112926018],\n\t\t\t\t\t[109.97752608036035, 40.56088095643477],\n\t\t\t\t\t[109.96537355, 40.56107089],\n\t\t\t\t\t[109.9654428500598, 40.56260655484202],\n\t\t\t\t\t[109.98153645585025, 40.56241067930531],\n\t\t\t\t\t[109.981519385159, 40.560841919126496],\n\t\t\t\t\t[109.98349899944674, 40.560841919126496],\n\t\t\t\t\t[109.98397684904222, 40.56234585505154],\n\t\t\t\t\t[109.98788488330817, 40.56233288537505],\n\t\t\t\t\t[109.98785073522524, 40.560725232745604],\n\t\t\t\t\t[109.98793380207951, 40.55889512805301],\n\t\t\t\t\t[109.9877483044342, 40.55666704355398],\n\t\t\t\t\t[109.98766296316883, 40.555474181998335],\n\t\t\t\t\t[109.98727043187995, 40.55374969583237],\n\t\t\t\t\t[109.98740695676825, 40.55349037984058],\n\t\t\t\t\t[109.98733875022137, 40.55333480701205],\n\t\t\t\t\t[109.98738994612353, 40.553282941084376],\n\t\t\t\t\t[109.98718514309196, 40.552375282465526],\n\t\t\t\t\t[109.98718512755605, 40.55148058135415],\n\t\t\t\t\t[109.98709978776506, 40.550780374221134]\n\t\t\t\t]",
                "page": "3D地图展示"
            },
            {
                "createBy": "",
                "createTime": "2023-09-08 20:43:18",
                "updateBy": "",
                "updateTime": "2023-09-09 14:07:02",
                "remark": "下面那个",
                "id": 3,
                "baseColor": "#FF00FF",
                "width": "10",
                "carImg": "/profile/upload/2023/09/08/car_20230908204259A002.png",
                "carWidth": 40,
                "carHeight": 40,
                "speed": 1800,
                "path": "[\n\t\t\t\t\t[109.95397652, 40.56124864],\n\t\t\t\t\t[109.9672823429072, 40.560985738820456],\n\t\t\t\t\t[109.96719126830237, 40.55567924209359],\n\t\t\t\t\t[109.96715713832354, 40.555368060165726],\n\t\t\t\t\t[109.96162204378003, 40.55483307326867],\n\t\t\t\t\t[109.96285762051708, 40.547251681060715],\n\t\t\t\t\t[109.9630577750323, 40.54657131900983],\n\t\t\t\t\t[109.96340838166834, 40.54544360121738],\n\t\t\t\t\t[109.96413998472757, 40.54388700595785],\n\t\t\t\t\t[109.96430093525403, 40.54365351445469],\n\t\t\t\t\t[109.96466024778405, 40.543636435466084],\n\t\t\t\t\t[109.96476780718274, 40.543423930611205],\n\t\t\t\t\t[109.96646717937892, 40.543840766672645],\n\t\t\t\t\t[109.9733736015716, 40.54436573849355],\n\t\t\t\t\t[109.97351293051659, 40.543987602197916],\n\t\t\t\t\t[109.97389111274595, 40.54368509195242],\n\t\t\t\t\t[109.97391101280576, 40.54298931430949],\n\t\t\t\t\t[109.97442852558571, 40.54277755476804],\n\t\t\t\t\t[109.97430893011675, 40.54237481782799],\n\t\t\t\t\t[109.97504555626429, 40.54211202135261],\n\t\t\t\t\t[109.97588153728562, 40.54185488204911],\n\t\t\t\t\t[109.98460660474672, 40.541343322217955],\n\t\t\t\t\t[109.98701429876077, 40.541248945422815],\n\t\t\t\t\t[109.98708368482517, 40.54013625327356],\n\t\t\t\t\t[109.98720227057227, 40.53884003461649],\n\t\t\t\t\t[109.98701221766495, 40.53284078866824],\n\t\t\t\t\t[109.98383473878773, 40.533180077206985],\n\t\t\t\t\t[109.97994916037742, 40.53534567889661],\n\t\t\t\t\t[109.97353895983578, 40.53438379504004],\n\t\t\t\t\t[109.95631455, 40.53304669],\n\t\t\t\t\t[109.956373, 40.53309111],\n\t\t\t\t\t[109.95594371991517, 40.53583325574178],\n\t\t\t\t\t[109.95465176490563, 40.53555271723898],\n\t\t\t\t\t[109.95342129551933, 40.5384515623686],\n\t\t\t\t\t[109.9530163423269, 40.53878953463465],\n\t\t\t\t\t[109.9601331381658, 40.54369084393108],\n\t\t\t\t\t[109.9590350487641, 40.547081458689476],\n\t\t\t\t\t[109.96000804648502, 40.54749338151035],\n\t\t\t\t\t[109.95985515323532, 40.55021838241385],\n\t\t\t\t\t[109.95925745177001, 40.552626417308],\n\t\t\t\t\t[109.95910455021607, 40.55319672668126],\n\t\t\t\t\t[109.95879875051277, 40.5544007056359],\n\t\t\t\t\t[109.95857634753757, 40.55525614798877],\n\t\t\t\t\t[109.95834004585973, 40.556534001965964],\n\t\t\t\t\t[109.95700564081368, 40.55654456275047],\n\t\t\t\t\t[109.95664423957479, 40.5565234411803],\n\t\t\t\t\t[109.9564218343595, 40.55722045055243],\n\t\t\t\t\t[109.95585192908781, 40.55751614997572],\n\t\t\t\t\t[109.95618965487368, 40.55813216095444],\n\t\t\t\t\t[109.95397652, 40.56124864]\n\t\t\t\t]",
                "page": "3D地图展示"
            },
            {
                "createBy": "",
                "createTime": "2023-09-09 11:37:44",
                "updateBy": "",
                "updateTime": "2023-09-09 14:12:43",
                "remark": "啊实打实大",
                "id": 5,
                "baseColor": "#1afa29",
                "width": "10",
                "carImg": "/profile/upload/2023/09/09/未标题-1_20230909141013A001.png",
                "carWidth": 30,
                "carHeight": 100,
                "speed": 800,
                "path": "[\n\t\t\t\t\t[109.93825453965145, 40.55747418521928],\n\t\t\t\t\t[109.93644289, 40.54823738],\n\t\t\t\t\t[109.93860537290726, 40.548859128174215],\n\t\t\t\t\t[109.93860538739575, 40.54805974087578],\n\t\t\t\t\t[109.93866386220697, 40.546460939733834],\n\t\t\t\t\t[109.93889767825672, 40.54464003976991],\n\t\t\t\t\t[109.94030037460095, 40.54477327790924],\n\t\t\t\t\t[109.94123553304651, 40.543218817657305],\n\t\t\t\t\t[109.94427471575986, 40.54290792159256],\n\t\t\t\t\t[109.94573588665524, 40.54095368711698],\n\t\t\t\t\t[109.94776125218468, 40.540461983157904],\n\t\t\t\t\t[109.94813041253025, 40.5384515623686],\n\t\t\t\t\t[109.95034521665853, 40.537235931852855],\n\t\t\t\t\t[109.95299063732254, 40.538872352762844],\n\t\t\t\t\t[109.95403650140658, 40.539620418499496],\n\t\t\t\t\t[109.95858915918976, 40.5427058006352],\n\t\t\t\t\t[109.95999660965762, 40.54370736591269],\n\t\t\t\t\t[109.95888611611905, 40.54712711117756],\n\t\t\t\t\t[109.95987969303043, 40.54752681109438],\n\t\t\t\t\t[109.9597022532674, 40.550450738487925],\n\t\t\t\t\t[109.95904823877882, 40.552899501210845],\n\t\t\t\t\t[109.95817032859217, 40.55645692083563],\n\t\t\t\t\t[109.95596374216052, 40.5564528661846],\n\t\t\t\t\t[109.9531583214542, 40.556985730092244],\n\t\t\t\t\t[109.9483657368126, 40.55689691971409],\n\t\t\t\t\t[109.9466707998522, 40.55676370394202],\n\t\t\t\t\t[109.94632010245876, 40.55822906391531],\n\t\t\t\t\t[109.94503427939384, 40.55867310651993],\n\t\t\t\t\t[109.94515114141956, 40.56076007017639],\n\t\t\t\t\t[109.94339774520242, 40.56124849976617],\n\t\t\t\t\t[109.94199506646952, 40.55925035782272],\n\t\t\t\t\t[109.9391311824931, 40.56027163728175],\n\t\t\t\t\t[109.93901431380053, 40.5589395307717],\n\t\t\t\t\t[109.93825453965145, 40.55747418521928]\n\t\t\t\t]",
                "page": "3D地图展示"
            }
        ]
    }

     

    获取地图geoJson 坐标集合方式:https://datav.aliyun.com/portal/school/atlas/area_generator#3.71/103.533165/35.515549

    1. 本站所有资源来源于用户上传和网络,如有侵权请及时联系站长!

    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!

    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!

    5. 如有链接无法下载、失效或广告,请联系管理员处理!

    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    7. 如遇到加密压缩包,默认解压密码为"mababa.xin",如遇到无法解压的请联系管理员!


    码巴巴-优质代码创造者 » 腾讯地图3D自定义图形,腾讯地图线路图循环驾驶,腾讯地图自定义标注+文字

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    一个高级程序员模板开发平台
    问问管理员?

    发表评论

    • 44会员总数(位)
    • 95资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1511稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级