1. 创建一个地图实例
//创建一个地图实例
var map = new maptalks.Map('map', {
center: [115.45302, 38.87137],
//缩放等级
zoom: 20,
centerCross : true,
baseLayer: new maptalks.TileLayer('base', {
//底图风格滤镜
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
// urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png',
subdomains: ['a','b','c','d'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
}),
});
2. 将osm转成geojosn,再将geojosn数据转换为几何图形后。
2.1 关于如何将osm转成geojosn:
http://tyrasd.github.io/osmtogeojson/
2.2 将geojosn数据转换为几何图形
//geojson数据
var data ={};
//将获取到的geojosn数据 转换为几何图形后,赋值给collection
var collection = maptalks.GeoJSON.toGeometry(data);
console.log(collection);
3. 创建一个新的图层将collection 添加到地图
//创建一个新的图层,名为vector , 可使用getLayer获取该图层,或使用removeLayer删除该图层
//将collection 添加到地图实例中
var vectorLayer=new maptalks.VectorLayer('vector',collection).addTo(map);
4. 使用for循环设置颜色(需要在geojson数据中有colour这个属性)
//渲染全部房间染色
for (var i = 0; i < collection.length; i++) {
if (collection[i].type=="Polygon") {
//在collection中properties设置cunt属性
collection[i].properties.cunt=i;
console.log(collection[i].properties.name)
console.log(collection[i].properties.colour)
console.log(collection[i].properties.cunt)
//渲染染色
vectorLayer.setStyle(
{
'filter': ['==', 'cunt', i],
'symbol': getSymbol(collection[i].properties.colour,collection[i].properties.name)
}
);
}
}
//设置线和面的属性(设置颜色,设置文字)
function getSymbol(colour,name) {
return [
{
'polygonFill': colour,
'lineColor':'#999',
// 'lineColor':colour,
},
{
'textName' : name,
'textSize' : 10,
'textFill' : '#000'
}
];
}
4.1 关于显示
https://maptalks.org/examples/cn/map/load/#map_load
4.2 VectorLayer: 批量设置图形样式
https://maptalks.org/examples/cn/layer/vectorlayer-style/#layer_vectorlayer-style