openlayers 클릭feature 스타일 변경
16764 단어 openlayers
openlayers 클릭feature 스타일 변경
//
var trackData = [
{
"lon":120.124512,
"lat":35.978006,
"data": [
{"name":"zx"},
{"age":16},
{"position":"student"}
]
},
{
"lon":120.651855,
"lat":34.867905,
"data": [
{"name":"ss"},
{"age":13},
{"position":"student"}
]
},
{
"lon":121.398926,
"lat":33.779147,
"data": [
{"name":"zas"},
{"age":19},
{"position":"student"}
]
},
{
"lon":121.530762,
"lat":32.842674,
"data": [
{"name":"aas"},
{"age":29},
{"position":"student"}
]
}
]
//
var features = []
for(var i=0;i<trackData.length;i++){
//
var coordinate = ol.proj.transform([trackData[i].lon,trackData[i].lat],'EPSG:4326','EPSG:3857')
features[i] = new ol.Feature({
geometry: new ol.geom.Point(coordinate)
})
}
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([116.359506, 35.302920]),
zoom: 6
}),
layers:[
//
new ol.layer.Tile({
source: new ol.source.OSM()
}),
//
new ol.layer.Vector({
source: new ol.source.Vector({
features: features
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color:'#fff'
}),
fill: new ol.style.Fill({
color:'#f00'
})
})
})
})
]
})
var selectClick = new ol.interaction.Select({
//
condition: ol.events.condition.click,
//
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: '#09f'
}),
stroke: new ol.style.Stroke({
color:'#fff',
width: 2
})
})
})
})
map.addInteraction(selectClick)
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Setting up everything to use openlayers이제부터는 바로 전 포스팅 마지막에 언급했듯이 html, css, js를 각각 분리해서 관리할 것이다. 파일들을 쪼개보자. 로 들어가서 라이브러리들을 다운받은 후, assets 라는 폴더를 만들어 이 안에 다운 받은...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.