openlayers在底圖上添加靜態icon

越學習openlayer你會發現openlayer是真的很強大，今天記錄一下學習的成果，需求是作那種室內的CAD的場景而後裏面展現人員icon而且實時展現人員的位置信息，以及點擊彈出對應人員的一些位置信息，姓名，電話等等，這個在工業互聯網中是很常見的，接下來就開始操做了

因爲我是在vue+ts中寫的，因此下面的代碼片斷多是基於vue來寫的

第一步，咱們須要創建一個底圖，這個底圖能夠是谷歌地圖也能夠是咱們拿到的cad渲染出來的靜態底圖

let extent = [pointer.x, pointer.y, pointer2.x, pointer2.y]; // 圖片圖層四至
// pointer pointer2分別是靜態圖片左下角和右上角的基於基站的座標
        console.log(extent)
        let projection = new olprojProjection({
            code: "xkcd-image",
            units: "pixels",
            extent: extent
        });
this.map = new olMap({
            target: DOM接點的ID,
            layers: [
                new ollayerImage({
                    source: new olsourceImageStatic({
                        url: 靜態圖片的地址, // 靜態地圖，若是是本地的，在vuecli3中將圖片放在public裏
                        projection: projection,
                        imageExtent: extent // 映射到地圖的範圍
                    })
                })
            ],
            view: new olView({
                center: getCenter(extent),
                projection: projection,
                zoom: 2.2,
                minZoom: 1,
                maxZoom: 12
            }),
            // 加載控件到地圖容器中
            // 加載鼠標位置控件
            controls: defaults().extend([mousePositionControl])
        });

第二步，底圖創建好以後，接下來繪製人員圖標，我這邊和後臺的數據對接方式是ws，就是後臺實時推送人員的位置信息，前端渲染，這個時候很剛入學者會每一個icon創建一個layer，其實不是這樣的，你能夠先創建一個定位圖層layer，一個layer一個source就能夠了，

新建定位圖層

 // 建立定位圖層
        this.positionLayer = new ollayerVector({
            source: new olsourceVector(),
            style: new olstyleStyle()
        })
        this.map.addLayer(this.positionLayer)

而後拿到數據以後，我這邊獲取的數據接口是一個list，也就是一個數組，須要for循環來添加icon

list.forEach((value: any, index: number) => {
            let time = new Date().getTime()
            if (!that.personListCache.has(value.id)) {
                // 繪製人員定位信息
                let personS = that.createPerson(value)
                console.log(value)
                console.log(personS)
                that.personListCache.set(value.id, { spriteObj: personS, lastModified: time })
            } else {
                let personIn = that.personListCache.get(value.id)
                // console.log(personIn.spriteObj.getGeometry().getCoordinates())
                // var geometry = new olgeomPoint([value.x, value.y])
                // personIn.spriteObj.setGeometry(geometry)
                personIn.lastModified = time
                if (personIn) {
                    personIn.oldObj = {
                        x: personIn.spriteObj.getGeometry().getCoordinates()[0],
                        y: personIn.spriteObj.getGeometry().getCoordinates()[1]
                    }
                    personIn.newObj = {
                        x: value.x,
                        y: value.y
                    }
                    if (personIn.oldObj.x === personIn.newObj.x && personIn.oldObj.y === personIn.newObj.y) {
                        // that.updataPersonPos(personIn)
                    } else {
                        that.updataPersonPos(personIn)
                    }
                }
            }
        })

創建一個map的緣由是，後臺不肯定是否會新增重複的人員給我，故創建一個map對象判斷是否以及繪製在底圖上，若是繪製在底圖上了，那麼只用改變他的位置也就是xy或者說是經緯度，若是沒有就去調用createPerson方法去繪製icon

createPerson(value: any) {
        var startMarker = new olFeature({
            type: 'person',
            msg: value,
            geometry: new olgeomPoint([value.x, value.y])
        })
        let srcImg = value.type === 'type1' ? './images/type1.png' : value.type === 'type2' ? './images/type2.png' : './images/type3.png'
        var startStyle = new olstyleStyle({
            image: new olstyleIcon({
                anchor: [0.5, 0.5],
                scale: 0.3,
                src: srcImg,
                imgSize: [117, 158]
            }),
            text: new Text({
                text: value.name,
                // font: '14px font-size',
                padding: [4, 7, 4, 7],
                fill: new Fill({ color: '#fff' }),
                backgroundFill: new Fill({ color: '#3737379e' }),
                offsetY: -34
            })
        })
        startMarker.setStyle(startStyle)
        this.positionLayer.getSource().addFeature(startMarker)
        return startMarker
    }

注意紅色部分，很關鍵，第一次的我是直接把startStyle放到了positionLayer上，致使繪製出來的全部的icon的信息都是同樣的，至於上面的三目運算你們應該知道，icon的類型不同繪製出來的圖標也是須要不同的

好了，自定義底圖上添加靜態icon就完成了，

接下啦看看效果圖吧，底圖我隨便換了一個靜態圖片，icon也是

 

 

索嘎，完工