openlayers 標記點閃爍

阿新 • • 發佈：2020-08-13

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="map"></div>
  <script>
      var beijing = ol.proj.fromLonLat([116.28, 39.54]);
      var map = new ol.Map({
          target: 'map',
          layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              })
          ],
          view: new ol.View({
              center: beijing,
              zoom: 4
          })
      });

      //例項化向量點要素，通過向量圖層新增到地圖容器中
      //這樣就實現了預先載入圖文標註
      var iconFeature = new ol.Feature({
          geometry: new ol.geom.Point(beijing),
          name: '北京市',                         //名稱屬性
          population: 2115                       //人口數（萬）
      });
      //設定點要素樣式
      iconFeature.setStyle(createLabelStyle(iconFeature));
      //向量標註的資料來源
      var vectorSource = new ol.source.Vector({
          features: [iconFeature]
      });
      //向量標註圖層
      var vectorLayer = new ol.layer.Vector({
          source: vectorSource,
          visible: false
      });
      map.addLayer(vectorLayer);

      //向量標註樣式設定函式，設定image為圖示ol.style.Icon
      function createLabelStyle(feature){
          console.log(feature);
          return new ol.style.Style({
              image: new ol.style.Icon({
                  anchor: [0.5, 60],              //錨點
                  anchorOrigin:'top-right',       //錨點源
                  anchorXUnits: 'fraction',       //錨點X值單位
                  anchorYUnits: 'pixels',         //錨點Y值單位
                  offsetOrigin: 'top-right',      //偏移原點
                  opacity: 0.75,
                  scale: 0.05,
                  src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594359193211&di=1d6bb819a5daa724ff65cc4d011d4d42&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_pic%2F17%2F10%2F27%2F05dc60e54e3aa5d093cdc32611303643.jpg'  //圖示的URL
              }),
          });
      }
      var flag=true
      setInterval(() => {
        flag=!flag
        vectorLayer.setVisible(flag)
      }, 300);
  </script>
</body>
</html>

openlayers 標記點閃爍

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Openlayers實現點閃爍擴散效果

本文例項為大家分享了Openlayers實現點閃爍擴散效果的具體程式碼，供大家參考，具體內容如下

openlayers 新增點線面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

對arcGis動態渲染標記點優化

import React from \'react\'; import \'./index.less\'; import { mapContext } from \'contexts/map\'; import { Checkbox } from \'antd\';

【解決】簡單有效的解決百度地圖多個標記點多個資訊視窗只顯示一個問題(vue-baidu-map)

技術標籤：vscodevue.js 【解決】簡單有效的解決百度地圖多個標記點多個資訊視窗只顯示一個問題(vue-baidu-map)

leaflet在vue中標記點(mark)的三種方式

在地圖示記點,或者點選某處獲取經緯度在地圖操作中是必須的,整理了一下,三種方式進行使用:

vue web端-高德導航使用、標記點使用

1. 引用高德的js <script type=\"text/javascript\" src=\"https://webapi.amap.com/maps?v=2.0&key=945bxxxxxxxe5432f&&plugin=AMap.Geocoder,AMap.AutoComplete,AMap.PlaceSearch\"><