1、添加map div容器

<template><div class="map-wrapper"><div id="map" class="container"></div></div></template>

2、創建天地圖衛星地圖

option = {crossOrigin: "Anonymous",tileSystem : [1,-1,-180,90],urlTemplate:'https://t{s}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=8018806e15db96c4a9f4f02c9df359e4',subdomains:['1','2','3','4','5'],styles: 'default',version: '1.0.0',// layer: 'img',// format: 'image/png',transparent: true,}let ciaLayer = new maptalks.TileLayer('cia', option)// ciaLayer.addTo(map)let center = [113.5,23.02]center = [105.08052356963802, 36.04231948670001]// center = [105.08052356963802, 36.04231948670001]center = [111.75416377072762,25.541698834449345]let map = new maptalks.Map('map', {center: center ,zoom: 8.9,baseLayer: baseLayer,minZoom:1,maxZoom:18000,pitch: 45,spatialReference:{projection:'EPSG:4326'},layers: [ciaLayer,]});

3、利用阿里高德geo獲取geojson數據，繪制省級輪廓，地市輪廓，tips顯示所有地市房價信息，

async initGeojson(){let hnsCode = '430000'let yzsCode = '431100'let sjJson = await this.getGeoJson(hnsCode)//創建一個新的圖層，名為vector ， 可使用getLayer獲取該圖層，或使用removeLayer刪除該圖層let collection = maptalks.GeoJSON.toGeometry(sjJson)//將collection 添加到地圖實例中console.log(collection);let vectorLayer = new maptalks.VectorLayer('vector').addTo($map)// collection.addTo(vectorLayer)console.log('maptalks.GeoJSON.toGeometry(data)');console.log(collection);collection.forEach((item)=>{if(item.properties.adcode == yzsCode){item.setSymbol(getSjSymbol('rgb(135,196,240)',''))item.addTo(vectorLayer)}})//創建一個新的圖層將collection 添加到地圖//使用for循環設置顏色（需要在geojson數據中有colour這個屬性）let resJson = await this.getGeoJson('431100')//geojson數據let data = resJson || {}//將獲取到的geojosn數據 轉換為幾何圖形后，賦值給collectioncollection = maptalks.GeoJSON.toGeometry(data)//渲染全部房間染色// collection.addTo(vectorLayer)vectorLayer.addGeometry(collection)let markers = []let tipsMarkers = []for (let i = 0; i < collection.length; i++) {let marker = createMarker(collection[i].properties.center,collection[i].properties.name)markers.push(marker)let price = 8000 + (+(Math.random()*999).toFixed(0))let city = collection[i].properties.namelet tipsMarker = new maptalks.ui.UIMarker(collection[i].properties.center, {'draggable' : false,'single' : false,'content' : `<div class="ui-box-wrapper"><div class="ui-box"><span class="title">${city}均價：</span><span class="num">${price}</span></div> <div class="arrow"></div> </div> `});tipsMarker.show()tipsMarker.addTo($map)tipsMarkers.push(tipsMarker);if (collection[i].GeometryType.name=="Polygon") {//在collection中properties設置cunt屬性collection[i].properties.cunt=i;collection[i]._geometries = collection[i]._geometries.slice(0,1)console.log(collection[i].properties.name)console.log(collection[i].properties.cunt)collection[i].setSymbol(getSymbol(randomColor(),''))collection[i].on('mouseenter',(e)=>{if(e.target){// let symbol = e.target.getSymbol()// console.log(symbol)e.target.updateSymbol([ {lineColor : '#187208',lineWidth : 2,polygonOpacity: 0.8,shadowBlur : 30,shadowColor : '#ecb423',shadowOffsetX: 0,shadowOffsetY: 0,}])}}).on('mouseout',(e)=>{e.target.updateSymbol([{lineColor : '#000000',lineWidth : 1,shadowBlur : 0,polygonOpacity: 1}])})//渲染染色vectorLayer.setStyle({'filter': ['==', 'cunt', i],'symbol': getSymbol('rgb(135,196,240)',collection[i].properties.name)});}}vectorLayer.addGeometry(markers)function createMarker(pos,name) {let point = new maptalks.Marker(pos,{visible : true,editable : false,cursor : 'pointer',shadowBlur : 0,shadowColor : 'black',draggable : false,dragShadow : false, // display a shadow during draggingdrawOnAxis : null, // force dragging stick on a axis, can be: x, ysymbol :[{'markerType': 'ellipse','markerFill': 'rgb(135,196,240)','markerFillOpacity': 1,'markerLineColor': '#34495e','markerLineWidth': 3,'markerLineOpacity': 1,'markerLineDasharray':[],'markerWidth': 10,'markerHeight': 10,'markerDx': 0,'markerDy': 0,'markerOpacity' : 1},{'markerDy': 20,'textFaceName' : 'sans-serif','textName' : name,'textFill' : '#ffffff','textHorizontalAlignment' : 'center','textSize' : 14,'textDx' : 0,'textDy' : 16,},]})return point}//設置線和面的屬性（設置顏色,設置文字）function getSjSymbol() {return [{'lineColor' : '#187208','lineWidth' : 2,'polygonFill' : '#c6830e','polygonOpacity' : 1,shadowBlur : 30,shadowColor : '#f10442',shadowOffsetX: 0,shadowOffsetY: 0,},{'textName' : name,'textSize' : 14,'textFill' : '#fff',}];}function randomColor() {let r = Math.random() * 255let g = Math.random() * 255let b = Math.random() * 255return `rgba(${r},${g}, ${b}, 1)`}function getSymbol(color,name) {return [{// 'lineColor' : '#2acaff',// 'lineWidth' : 1,'polygonFill' : color,'polygonOpacity' : 1,shadowBlur : 1,shadowColor : '#c1d9bc',shadowOffsetX: -2,shadowOffsetY: 1,},{'textName' : name,'textSize' : 14,'textFill' : '#fff',}];}},async getGeoJson(adCode = 431100){//431100let url = `alxzqm/areas_v3/bound/${adCode}_full.json`let param = {}let res = await ApiGetFile(url,param)return res}}

4、axios獲取geojson數據

import http from '@/utils/request' let baseUrl = './' export function ApiGetData(url,param) {return http.get(baseUrl + url,{params: param}) }export function ApiGetFile(url) {return http.get(baseUrl + url) }

5、css樣式

<style lang="scss">.ui-box-wrapper {display: flex;flex-direction: column;justify-content: center;align-items: center;font-weight: bold;.ui-box {background-color: rgb(116, 219, 198);border-radius: 4px;min-width: 100px;border: 1px solid #ffffff;box-shadow: 2px 2px 4px -4px rgba(226, 234, 234, 0.8);padding: 5px;display: flex;flex-direction: column;justify-content: center;align-items: center;.title {}.num {}}.arrow {margin: 2px;width: 0;height:0;box-sizing: content-box;border-top:8px solid rgb(116, 219, 198);border-right: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 8px solid transparent;}}</style> <style lang="scss" scoped> .map-wrapper {border: #42b983 solid 1px;background-color: #cec6c6;.container {width: 800px;height: 600px;border: #42b983 solid 1px;} }</style>

6、最后效果圖

?

總結

以上是生活随笔為你收集整理的maptalk(2) -marker文字描述以及区块着色，背景卫星图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。