效果展示:
引用leaflet-polycolor组件
npm installleaflet-polycolor
.vue文件中使用
import leafletPolycolor from ‘leaflet-polycolor’;
leafletPolycolor(L);
const latLngs = [[37.03, 111.92], [37.53444, 111.98555], [36.88, 112.12], [37.53444, 112.24], [36.88, 112.54], [37.45, 112.74]];
const colors = [‘rgb(20, 200, 100)’, ‘rgb(200, 100, 20)’, null, null, ‘rgb(20, 200, 100)’, ‘rgb(0, 0, 0)’];
L.polycolor(latLngs, {
color: “#ff0000”,
colors: colors,
weight: 5
}).addTo(map);
完整代码:
import {ref, onMounted} from "vue";
import L from "leaflet";
import "leaflet.chinatmsproviders";
import leafletPolycolor from 'leaflet-polycolor';
leafletPolycolor(L);
function init() {
const TDT_KEY = "天地图上面获取key";
const normalm = L.tileLayer.chinaProvider("TianDiTu.Normal.Map", {
key: TDT_KEY,
maxZoom: 18,
mi服务器托管网nZoom: 5,
});
const normala 服务器托管网= L.tileLayer.chinaProvider("TianDiTu.Normal.Annotion", {
key: TDT_KEY,
maxZoom: 18,
minZoom: 5,
});
const imgm = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", {
key: TDT_KEY,
maxZoom: 24,
maxNativeZoom: 18,
minZoom: 5,
});
const imga = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", {
key: TDT_KEY,
maxZoom: 24,
maxNativeZoom: 18,
});
const normal = L.layerGroup([normalm, normala]);
const image = L.layerGroup([imgm, imga]);
const baseLayers = {
地图: normal,
影像: image,
};
// 初始化 map
var map = new L.Map('map', {
maxZoom: 24,
minZoom: 5,
center: [37.03, 111.92],
zoom: 16,
zoomControl: false,
renderer: L.canvas({ tolerance: 16 }),
layers: [normal],
});
L.control.layers(baseLayers, {}).addTo(map).setPosition("topleft");
L.control.zoom().addTo(map).setPosition("topleft");
L.circle([37.03, 111.92], { radius: 100, color: "#ff0000", weight: 5, fill: true, fillColor: "#00ff00", fillOpacity: 1 }).addTo(map);
const latLngs = [[37.03, 111.92], [37.53444, 111.98555], [36.88, 112.12], [37.53444, 112.24], [36.88, 112.54], [37.45, 112.74]];
const colors = ['rgb(20, 200, 100)', 'rgb(200, 100, 20)', null, null, 'rgb(20, 200, 100)', 'rgb(0, 0, 0)'];
L.polycolor(latLngs, {
color: "#ff0000",
colors: colors,
weight: 5
}).addTo(map);
}
onMounted(() => {
init();
})
注意:如果线两端点没有渲染,则线显示颜色为配置color颜色,不为渐变色。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net