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介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 一个高级程序员模板开发平台
